/* Immigré Games web — mise en scène de la Kafmusique du jour et du Kafblindtest, comme dans l'app. Chargée après v3.css. Les animations qui font le spectacle (vinyle, platine, égaliseur, compte à rebours, confettis) restent jouées même quand le système demande moins d'animations : styles.css les coupe toutes sinon (animation: none !important). Aucun clignotement agressif. */ /* =================== Commun =================== */ .game-view .game-panel { position: relative; overflow: hidden; } .game-confetti { position: absolute; top: -12px; left: var(--x); z-index: 20; width: 8px; height: 13px; border-radius: 2px; pointer-events: none; animation: game-confetti 2.2s cubic-bezier(.25, .6, .45, 1) var(--delay) both !important; } @keyframes game-confetti { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift), 110vh) rotate(var(--spin)); } } /* =================== Kafmusique du jour =================== */ #dailyKafmusicView .daily-layout { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 26px; align-items: center; } /* La pochette du jour, et le vinyle qui sort de sa pochette pendant l'écoute. */ #dailyKafmusicView .daily-record { position: relative; width: min(74%, 300px); aspect-ratio: 1; margin: 0 auto 0 4%; } #dailyKafmusicView .daily-sleeve { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 18px; background: #15161b; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 60px -20px rgba(255, 106, 61, .6); } #dailyKafmusicView .daily-sleeve img { display: block; width: 100%; height: 100%; object-fit: cover; } #dailyKafmusicView .daily-sleeve::after { position: absolute; inset: 0; content: ""; background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 40%); pointer-events: none; } #dailyKafmusicView .daily-day { position: absolute; bottom: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(12, 12, 16, .78); color: #ffd46a; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } #dailyKafmusicView .daily-vinyl { position: absolute; top: 4%; left: 4%; z-index: 1; width: 92%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, #111 0 2px, #1c1c21 2px 3px), #111; box-shadow: 0 20px 40px rgba(0, 0, 0, .6); transform: translateX(0); transition: transform .9s cubic-bezier(.3, 1.1, .4, 1); } #dailyKafmusicView .daily-vinyl::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%); } #dailyKafmusicView .daily-vinyl > i { position: absolute; top: 50%; left: 50%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #111 0 8%, #ff6a3d 9% 60%, #ffb347 61% 100%); transform: translate(-50%, -50%); } #dailyKafmusicView.is-playing .daily-vinyl, #dailyKafmusicView.is-ended .daily-vinyl, #dailyKafmusicView.is-claimed .daily-vinyl { transform: translateX(32%); } #dailyKafmusicView.is-playing .daily-vinyl { animation: daily-spin 2.4s linear infinite !important; } #dailyKafmusicView.is-playing .daily-sleeve { transform: translateX(-6%) rotate(-2deg); transition: transform .9s cubic-bezier(.3, 1.1, .4, 1); } #dailyKafmusicView .daily-panel { z-index: 3; display: grid; gap: 18px; padding: 28px; } #dailyKafmusicView .daily-title-block { display: grid; gap: 6px; min-width: 0; } #dailyKafmusicView .daily-title-block small { color: #ffb347; font-size: .7rem; font-weight: 900; letter-spacing: .16em; } #dailyKafmusicView .daily-title-block strong { overflow: hidden; color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.05; text-overflow: ellipsis; } #dailyKafmusicView .daily-title-block span { color: var(--muted); } /* Pastille de récompense : +20 Kafpoints, puis « Validé ». */ #dailyKafmusicView .daily-reward { display: inline-flex; width: max-content; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid rgba(255, 211, 46, .4); border-radius: 999px; background: linear-gradient(90deg, rgba(255, 211, 46, .16), rgba(255, 106, 61, .1)); } #dailyKafmusicView .daily-reward b { display: grid; min-width: 46px; height: 32px; place-items: center; padding: 0 8px; border-radius: 999px; background: linear-gradient(90deg, #ffd32e, #ffb347); color: #1d1000; font-size: .95rem; font-weight: 950; } #dailyKafmusicView .daily-reward span { color: #ffd46a; font-weight: 900; } #dailyKafmusicView .daily-reward em { display: none; color: #7dffb0; font-style: normal; font-weight: 900; } #dailyKafmusicView.is-claimed .daily-reward { border-color: rgba(125, 255, 176, .45); background: linear-gradient(90deg, rgba(83, 230, 165, .18), transparent); } #dailyKafmusicView.is-claimed .daily-reward b { background: linear-gradient(90deg, #53e6a5, #2bc0ff); } #dailyKafmusicView.is-claimed .daily-reward em { display: inline; } #dailyKafmusicView.is-rewarded .daily-reward { animation: daily-pop .6s cubic-bezier(.2, 1.4, .4, 1) both !important; } /* Progression : repère de mi-parcours (là où la récompense se débloque). */ #dailyKafmusicView .daily-progress-block { display: grid; gap: 8px; } #dailyKafmusicView .progress { position: relative; height: 10px; overflow: visible; background: rgba(255, 255, 255, .1); } #dailyKafmusicView .progress span { position: relative; z-index: 1; border-radius: 999px; background: linear-gradient(90deg, #ff6a3d, #ffb347); box-shadow: 0 0 14px rgba(255, 140, 60, .6); } #dailyKafmusicView .daily-half { position: absolute; top: -5px; left: 50%; z-index: 2; width: 3px; height: 20px; border-radius: 2px; background: #ffd46a; box-shadow: 0 0 8px #ffd46a; transform: translateX(-50%); } #dailyKafmusicView.is-past-half .daily-half, #dailyKafmusicView.is-claimed .daily-half { background: #7dffb0; box-shadow: 0 0 10px #7dffb0; } #dailyKafmusicView .daily-time { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; } #dailyKafmusicView .daily-time small { color: #ffd46a; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } /* Égaliseur : bouge pendant l'écoute. */ #dailyKafmusicView .daily-eq { display: flex; height: 34px; align-items: flex-end; gap: 5px; } #dailyKafmusicView .daily-eq i { width: 7px; height: 20%; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, #ff6a3d, #ffd46a); opacity: .35; transform-origin: bottom; } #dailyKafmusicView.is-playing .daily-eq i { height: 100%; opacity: 1; animation: daily-eq .9s ease-in-out infinite alternate !important; } #dailyKafmusicView.is-playing .daily-eq i:nth-child(2) { animation-delay: -.3s !important; animation-duration: .7s !important; } #dailyKafmusicView.is-playing .daily-eq i:nth-child(3) { animation-delay: -.6s !important; } #dailyKafmusicView.is-playing .daily-eq i:nth-child(4) { animation-delay: -.15s !important; animation-duration: 1.1s !important; } #dailyKafmusicView.is-playing .daily-eq i:nth-child(5) { animation-delay: -.45s !important; animation-duration: .8s !important; } #dailyKafmusicView.is-playing .daily-eq i:nth-child(6) { animation-delay: -.7s !important; } #dailyKafmusicView.is-playing .daily-eq i:nth-child(7) { animation-delay: -.2s !important; animation-duration: .75s !important; } #dailyKafmusicView .daily-play { min-width: 220px; min-height: 54px; font-size: 1rem; } /* =================== Kafblindtest : studio néon =================== */ #blindtestView { --blind-left: 1; --blind-glow: #ff6a3d; } #blindtestView.is-correct { --blind-glow: #3ecf8e; } #blindtestView.is-wrong { --blind-glow: #ff4d5e; } #blindtestView .blindtest-panel { padding: 22px 26px 28px; background: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 26px, radial-gradient(ellipse at 50% 0%, rgba(255, 106, 61, .2), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(143, 92, 255, .24), transparent 60%), #0b0a10; } #blindtestView .blindtest-header strong { padding: 5px 12px; border: 1px solid rgba(255, 106, 61, .45); border-radius: 999px; background: rgba(255, 106, 61, .12); color: #ffb08f; font-variant-numeric: tabular-nums; } #blindtestView .blindtest-header span { padding: 5px 12px; border-radius: 999px; background: rgba(255, 212, 106, .12); color: #ffd46a; } /* Pastilles des 10 manches. */ #blindtestView .blind-rounds { display: flex; justify-content: center; gap: 7px; margin-top: 12px; } #blindtestView .blind-rounds i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); } #blindtestView .blind-rounds i.is-now { background: #ffd46a; box-shadow: 0 0 10px #ffd46a; animation: blind-now 1s ease-in-out infinite !important; } #blindtestView .blind-rounds i.is-good { background: #3ecf8e; box-shadow: 0 0 8px rgba(62, 207, 142, .8); } #blindtestView .blind-rounds i.is-bad { background: #ff4d5e; box-shadow: 0 0 8px rgba(255, 77, 94, .7); } /* Série de bonnes réponses. */ #blindtestView .blind-streak { display: block; width: max-content; margin: 10px auto 0; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, #ff6a3d, #ffb347); color: #1d0a00; font-size: .8rem; font-weight: 900; box-shadow: 0 10px 24px -8px rgba(255, 106, 61, .8); } #blindtestView .blind-streak[hidden] { display: none; } #blindtestView .blind-streak.is-bump { animation: blind-bump .45s cubic-bezier(.2, 1.5, .4, 1) !important; } /* Platine : vinyle, bras qui se pose pendant l'extrait, anneau = temps restant, égaliseur. */ #blindtestView .blindtest-layout { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 34px; margin-top: 22px; } #blindtestView .blind-deck { position: relative; display: grid; width: min(100%, 320px); aspect-ratio: 1; margin: auto; place-items: center; } #blindtestView .blind-deck > .blind-stage { width: 84%; margin: 0; border: 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); } #blindtestView .blind-deck > .blind-stage::before, #blindtestView .blind-deck > .blind-stage::after { display: none; } #blindtestView .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% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); opacity: .35; filter: drop-shadow(0 0 8px var(--blind-glow)); } #blindtestView.is-playing .blind-ring, #blindtestView.is-revealed .blind-ring { opacity: 1; } #blindtestView .disc { inset: 8%; border: 0; background: repeating-radial-gradient(circle at 50% 50%, #111 0 2px, #1b1b1f 2px 3px), #111; animation: none !important; } #blindtestView .disc::after { width: 34%; border: 0; background: radial-gradient(circle, #111 0 9%, #ff6a3d 10% 100%); } #blindtestView .disc span { position: relative; z-index: 3; margin: 0; color: #1d0a00; font-size: 1.8rem; } #blindtestView.is-playing .disc { animation: blind-spin 1.8s linear infinite !important; } #blindtestView .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) !important; pointer-events: none; } #blindtestView .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); } #blindtestView .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; } #blindtestView .blind-arm b { position: absolute; bottom: 4%; left: 30%; width: 16px; height: 24px; border-radius: 3px; background: linear-gradient(#cfcfd6, #6f6f78); transform: rotate(14deg); } #blindtestView.is-playing .blind-arm { transform: rotate(4deg); } #blindtestView .blind-eq { position: absolute; right: 22%; bottom: -14px; left: 22%; z-index: 5; display: flex; height: 30px; align-items: flex-end; justify-content: center; gap: 4px; } #blindtestView .blind-eq i { width: 6px; height: 18%; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, #ff6a3d, #ffd46a); opacity: .3; transform-origin: bottom; box-shadow: 0 0 8px rgba(255, 140, 60, .6); } #blindtestView.is-playing .blind-eq i { height: 100%; opacity: 1; animation: daily-eq .8s ease-in-out infinite alternate !important; } #blindtestView.is-playing .blind-eq i:nth-child(2n) { animation-duration: .6s !important; animation-delay: -.3s !important; } #blindtestView.is-playing .blind-eq i:nth-child(3n) { animation-duration: 1s !important; animation-delay: -.5s !important; } #blindtestView.is-revealed .blind-stage { box-shadow: 0 0 0 4px var(--blind-glow), 0 0 40px var(--blind-glow); } #blindtestView .blind-stage > img { border-radius: 50%; object-fit: cover; } #blindtestView .blind-stage.revealed .disc { opacity: 0; transform: scale(.7); transition: opacity .4s ease, transform .5s ease !important; } #blindtestView.is-revealed .blind-stage > img { animation: blind-reveal .6s cubic-bezier(.2, .9, .3, 1) both !important; } /* Chrono linéaire masqué : l'anneau le remplace. */ #blindtestView .blind-main > .progress { opacity: 0; height: 4px; } #blindtestView .blind-main h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); text-shadow: 0 0 18px rgba(255, 106, 61, .35); } #blindtestView.is-revealed .blind-main h2 { color: var(--blind-glow); text-shadow: 0 0 22px var(--blind-glow); } /* Réponses en verre : lettre en pastille, vert ou rouge au verdict. */ #blindtestView .answers { gap: 12px; } #blindtestView .answers button { position: relative; overflow: hidden; min-height: 60px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); color: #fff; } #blindtestView .answers button:hover:not(:disabled) { border-color: rgba(255, 106, 61, .6); background: linear-gradient(135deg, rgba(255, 106, 61, .18), rgba(255, 255, 255, .03)); } #blindtestView .answers button span { border: 0; background: linear-gradient(135deg, #ff6a3d, #ffb347); color: #1d0a00; } #blindtestView .answers button strong { font-size: .92rem; } #blindtestView .answers .correct { 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 !important; } #blindtestView .answers .correct span { background: #3ecf8e; } #blindtestView .answers .wrong { border-color: #ff4d5e; background: rgba(255, 77, 94, .18); animation: blind-shake .45s ease !important; } #blindtestView .answers .wrong span { background: #ff4d5e; color: #fff; } #blindtestView #blindStart[hidden] { display: none !important; } #blindtestView #blindStart:not([hidden]) { min-height: 54px; animation: blind-pulse 2.2s ease-in-out infinite !important; } /* Compte à rebours géant. */ #blindtestView .blind-countdown { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: radial-gradient(circle, rgba(255, 106, 61, .25), rgba(10, 10, 16, .94) 60%); pointer-events: none; } #blindtestView .blind-countdown[hidden] { display: none; } #blindtestView .blind-countdown strong { color: #fff; font-size: clamp(5rem, 16vw, 9rem); font-weight: 950; line-height: 1; text-shadow: 0 0 20px #ff6a3d, 0 0 60px #ff6a3d; } #blindtestView .blind-countdown strong.is-tick { animation: blind-count .65s cubic-bezier(.2, 1.3, .4, 1) both !important; } /* Fin de partie : score géant, étoiles et grade. */ #blindtestView.is-finished .blind-main h2 { font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1; } #blindtestView.is-finished .blind-main h2::after { display: block; margin-top: 8px; content: var(--blind-stars, ""); color: #ffd46a; font-size: 1.6rem; letter-spacing: .2em; text-shadow: 0 0 14px rgba(255, 212, 106, .8); } #blindtestView.is-finished #blindFeedback::before { display: block; margin-bottom: 4px; content: attr(data-grade); color: #ffb08f; font-size: .82rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } @keyframes daily-spin { from { transform: translateX(32%) rotate(0); } to { transform: translateX(32%) rotate(360deg); } } @keyframes daily-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } } @keyframes daily-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes blind-spin { to { transform: rotate(360deg); } } @keyframes blind-now { 50% { transform: scale(1.5); } } @keyframes blind-bump { 0% { transform: scale(.6); } 100% { transform: scale(1); } } @keyframes blind-reveal { 0% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: 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% { filter: brightness(1); } 50% { filter: brightness(1.12); } } @keyframes blind-count { 0% { opacity: 0; transform: scale(1.8); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: .9; transform: scale(.92); } } /* =================== Téléphone =================== */ @media (max-width: 760px) { #dailyKafmusicView .daily-layout { grid-template-columns: 1fr; } #dailyKafmusicView .daily-record { width: min(70%, 280px); margin: 0 auto; transform: translateX(-10%); } #dailyKafmusicView.is-playing .daily-vinyl, #dailyKafmusicView.is-ended .daily-vinyl, #dailyKafmusicView.is-claimed .daily-vinyl { transform: translateX(22%); } #dailyKafmusicView .daily-panel { padding: 20px; } #dailyKafmusicView .daily-play { width: 100%; } #blindtestView .blindtest-panel { padding: 16px 14px 20px; } #blindtestView .blindtest-layout { grid-template-columns: 1fr; gap: 24px; } #blindtestView .blind-deck { width: min(70vw, 260px); } #blindtestView .answers { grid-template-columns: 1fr; } } @media (max-width: 760px) { @keyframes daily-spin { from { transform: translateX(22%) rotate(0); } to { transform: translateX(22%) rotate(360deg); } } } /* =================== Lancement d'Al Marj Target et du Juste Kafpoint =================== */ /* Une seule grande carte à toucher : les navigateurs ne laissent partir le son du générique qu'après un toucher. */ .launch-stage { position: relative; display: block; width: min(100%, 860px); margin: 8px auto 0; padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; background: #0c0c11; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 50px -20px var(--game, #ff6a3d); transition: transform .25s ease, box-shadow .25s ease; } .launch-stage img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; transition: transform .6s ease; } .launch-stage::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(8, 8, 12, .92), rgba(8, 8, 12, .1) 55%, transparent); pointer-events: none; } .launch-stage:hover, .launch-stage:focus-visible { transform: translateY(-3px); box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .95), 0 0 70px -16px var(--game, #ff6a3d); } .launch-stage:hover img { transform: scale(1.03); } .launch-play { position: absolute; right: 22px; bottom: 18px; z-index: 3; display: grid; width: 84px; height: 84px; place-items: center; padding-left: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--game, #ff6a3d), var(--game-2, #ffb347)); color: #111; font-size: 2rem; box-shadow: 0 0 0 8px rgba(255, 255, 255, .12), 0 16px 34px rgba(0, 0, 0, .6); } .launch-stage .launch-play { animation: launch-pulse 2.4s ease-in-out infinite !important; } .launch-copy { position: absolute; right: 120px; bottom: 18px; left: 22px; z-index: 2; display: grid; gap: 4px; } .launch-copy strong { font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 950; } .launch-copy small { color: rgba(255, 255, 255, .72); font-size: .82rem; } .launch-stage[aria-disabled="true"] { cursor: default; filter: grayscale(.6); } .launch-note { min-height: 1.4em; margin: 12px auto 0; text-align: center; } #justeKafpointView { --game: #2f7dff; --game-2: #ffd32e; --game-emoji: "🏷️"; } @keyframes launch-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } @media (max-width: 760px) { .launch-stage img { aspect-ratio: 4 / 3; } .launch-play { right: 14px; bottom: 14px; width: 60px; height: 60px; font-size: 1.4rem; } .launch-copy { right: 90px; bottom: 14px; left: 16px; } } /* =================== Kafchampions : le classement du Kafblindtest, comme dans l'app =================== */ #blindtestView .blind-board { margin-top: 18px; padding: 20px 22px 22px; border-color: color-mix(in srgb, var(--game) 32%, transparent); background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--game-2) 16%, transparent), transparent 60%), #0e0d13; } #blindtestView .blind-board-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; } #blindtestView .blind-board-head .eyebrow { color: var(--game); } #blindtestView .blind-board-head h2 { margin: 4px 0 0; font-size: clamp(1.3rem, 3vw, 1.8rem); text-transform: uppercase; } #blindtestView .blind-board-head small { color: var(--muted); font-size: .8rem; } #blindtestView .blind-board-list { display: grid; gap: 8px; } #blindtestView .blind-board-list article { display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 14px 9px 10px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px; background: rgba(255, 255, 255, .03); } #blindtestView .blind-board-list article.is-me { border-color: color-mix(in srgb, var(--game) 60%, transparent); background: color-mix(in srgb, var(--game) 12%, transparent); } #blindtestView .blind-board-list article > b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; } #blindtestView .blind-board-list article[data-rank="1"] > b { background: linear-gradient(135deg, #ffd46a, #ff9f1c); color: #1d0a00; box-shadow: 0 0 16px rgba(255, 212, 106, .6); } #blindtestView .blind-board-list article[data-rank="2"] > b { background: linear-gradient(135deg, #e7ecf3, #9aa4b2); color: #15161b; } #blindtestView .blind-board-list article[data-rank="3"] > b { background: linear-gradient(135deg, #ffb27a, #b8642e); color: #1d0a00; } #blindtestView .blind-board-avatar { position: relative; display: grid; width: 42px; height: 42px; place-items: center; } #blindtestView .blind-board-avatar > img:first-child, #blindtestView .blind-board-avatar > span { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } #blindtestView .blind-board-avatar > span { display: grid; place-items: center; background: linear-gradient(135deg, var(--game), var(--game-2)); color: #fff; font-weight: 900; } #blindtestView .blind-board-frame { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); pointer-events: none; } #blindtestView .blind-board-list div { display: grid; min-width: 0; gap: 2px; } #blindtestView .blind-board-list div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #blindtestView .blind-board-list div small { color: var(--muted); font-size: .78rem; } #blindtestView .blind-board-list em { color: #ffd46a; font-size: 1.35rem; font-style: normal; font-weight: 950; font-variant-numeric: tabular-nums; } #blindtestView .blind-board-list em small { color: var(--muted); font-size: .75rem; font-weight: 800; } #blindtestView .blind-board-empty { display: grid; justify-items: center; gap: 4px; padding: 22px 10px; color: var(--muted); text-align: center; } #blindtestView .blind-board-empty span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--game) 20%, transparent); color: var(--game); font-size: 1.4rem; font-weight: 950; } #blindtestView .blind-board-empty strong { color: var(--ink); } @media (max-width: 760px) { #blindtestView .blind-board { padding: 16px 12px; } #blindtestView .blind-board-head { align-items: start; flex-direction: column; gap: 2px; } #blindtestView .blind-board-list article { grid-template-columns: 28px 42px minmax(0, 1fr) auto; gap: 9px; padding: 8px 10px 8px 8px; } } /* =================== Al Marj Target : générique au format web =================== */ /* Seulement si c'est la vidéo verticale de l'app (al-marj.js passe à la version 16:9 sur écran large). La vidéo de l'app est verticale. Sur un écran large, au lieu de la rogner, on la passe dans le canon du gunbarrel au centre, encadrée par le titre, comme une ouverture de film. */ @media (min-width: 761px) and (min-aspect-ratio: 1/1) { body:has(#alMarjView) .amt-intro:has(video[src*="al-marj-intro.mp4"]) { background: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(0, 0, 0, .85) 62%), repeating-conic-gradient(from 0deg at 50% 50%, #0b0b0b 0 7.5deg, #161616 7.5deg 15deg), #000; } body:has(#alMarjView) .amt[data-screen="intro"] .amt-intro:has(video[src*="al-marj-intro.mp4"]), body:has(#alMarjView) .amt.is-intro-out .amt-intro:has(video[src*="al-marj-intro.mp4"]) { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } body:has(#alMarjView) .amt-intro:has(video[src*="al-marj-intro.mp4"]) video { grid-column: 2; width: auto; height: 100vh; height: 100dvh; aspect-ratio: 9 / 16; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 80px 30px #000; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } body:has(#alMarjView) .amt-intro:has(video[src*="al-marj-intro.mp4"])::before, body:has(#alMarjView) .amt-intro:has(video[src*="al-marj-intro.mp4"])::after { display: grid; gap: 10px; padding: 0 6%; color: var(--bf-paper, #ece6d8); font-family: var(--bf-font, "Arial Narrow", sans-serif); font-size: clamp(2.6rem, 6vw, 5.6rem); font-weight: 700; line-height: .95; letter-spacing: .06em; text-transform: uppercase; white-space: pre-line; animation: amt-web-title 1.4s 1.2s cubic-bezier(.2, .9, .3, 1) both !important; } body:has(#alMarjView) .amt-intro:has(video[src*="al-marj-intro.mp4"])::before { grid-column: 1; grid-row: 1; justify-self: end; content: "Al\A Marj"; text-align: right; } body:has(#alMarjView) .amt-intro:has(video[src*="al-marj-intro.mp4"])::after { grid-column: 3; grid-row: 1; justify-self: start; content: "Target"; color: var(--bf-orange, #ff8a1f); text-align: left; } body:has(#alMarjView) .amt-intro:has(video[src*="al-marj-intro.mp4"]) small { z-index: 2; } } @keyframes amt-web-title { 0% { opacity: 0; letter-spacing: .4em; } 100% { opacity: 1; letter-spacing: .06em; } } /* Al Marj Target sur PC (web) : le décor plein écran flouté bougeait en continu sous le menu, donc le flou était recalculé à chaque image et le survol des boutons ramait. Ici, hors partie le décor reste fixe, plus de modes de fusion ni de flou d'arrière-plan, et les animations de fond passent par transform (sur la carte graphique). */ body.amt-open .games-app { visibility: hidden; } .amt:not([data-screen="play"]):not([data-screen="count"]) :is(.amt-map, .amt-sun, .amt-dust, .amt-weather, .amt-rifling) { animation-play-state: paused !important; } .amt:not([data-screen="play"]):not([data-screen="count"]) .amt-weather::after { animation-play-state: paused !important; } .amt-sun { mix-blend-mode: normal !important; } .amt[data-screen="menu"]::after, .amt[data-screen="end"]::after { mix-blend-mode: normal !important; opacity: .05 !important; } .amt :is(.amt-close, .amt-mute, .amt-combo) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(0, 0, 0, .62) !important; } .amt-dust { inset: -92px !important; animation-name: amt-dust-web !important; will-change: transform; } .amt[data-theme="rain"] .amt-weather { inset: -70px !important; animation-name: amt-rain-web !important; will-change: transform; } @keyframes amt-dust-web { from { transform: translate(0, 0); } to { transform: translate(46px, -92px); } } @keyframes amt-rain-web { from { transform: translate(0, 0); } to { transform: translate(-22px, 70px); } } /* Al Marj Target : sur le site, le jeu joue toutes ses animations comme dans l'app, même quand Windows demande moins d'animations (sinon plus de barres de vie, plus de transitions de monde : un jeu figé). */ @media (prefers-reduced-motion: reduce) { body .amt .amt-map { animation: amt-pan 38s ease-in-out infinite alternate !important; } body .amt .amt-sun { animation: amt-breathe 6s ease-in-out infinite !important; } body .amt .amt-dust { animation: amt-dust-web 18s linear infinite !important; } body .amt .amt-rifling { animation: amt-rifle 70s linear infinite !important; } body .amt.is-shaking :is(.amt-world, .amt-field) { animation: amt-shake .4s linear !important; } body .amt[data-theme="dusk"] .amt-weather { animation: amt-storm-web 2.6s linear infinite !important; } body .amt[data-theme="snow"] .amt-weather { animation: amt-snow-web 5s linear infinite !important; } body .amt[data-theme="rain"] .amt-weather { animation: amt-rain-web .32s linear infinite !important; } body .amt[data-theme="rain"] .amt-weather::after { animation: amt-lightning 7s linear infinite !important; } body .amt[data-theme="ash"] .amt-weather { animation: amt-embers-web 4s linear infinite !important; } body .amt.is-intro-out .amt-intro { animation-duration: 1.2s !important; } body .amt.is-intro-out .amt-menu > * { animation-name: amt-menu-in; animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-fill-mode: both; } }