/* ============================================================ * Variables & base * ============================================================ */ :root { --bg-1: #16121f; --bg-2: #2b1055; --bg-3: #0f3460; --panel: rgba(255, 255, 255, 0.06); --panel-border: rgba(255, 255, 255, 0.12); --text: #f4f6ff; --muted: #aeb6d6; --accent: #ffcb05; --accent-2: #3b6cff; --red: #ee1515; --green: #3ad07a; --bad: #ff5470; --radius: 18px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Barres de défilement discrètes */ /* NB : on coupe le débordement horizontal au niveau de (racine = scroll de la page). Sur on utilise `clip` et PAS `hidden` : `hidden` ferait de un conteneur de défilement, ce qui casse le `position: sticky` de la barre de catégories. */ html { overflow-x: hidden; } * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } ::-webkit-scrollbar-corner { background: transparent; } html, body { height: 100%; } body { font-family: 'Poppins', system-ui, sans-serif; color: var(--text); min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(135deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3)); background-attachment: fixed; position: relative; overflow-x: clip; /* `clip` (et non `hidden`) pour ne pas casser le sticky de .cat-nav */ } main { flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px 40px; position: relative; z-index: 1; } /* ============================================================ * Monde Pokémon animé (décor de fond) * ============================================================ */ #world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: opacity 0.6s ease; } /* le décor animé appartient à l'accueil : on l'estompe pendant les jeux pour garder un fond lisible */ body:has(#game-screen.active) #world, body:has(#mp-screen.active) #world { opacity: 0.1; } /* fond plus sombre et désaturé pendant les jeux (lisibilité, pas d'agression visuelle) */ body:has(#game-screen.active), body:has(#mp-screen.active) { background: linear-gradient(155deg, #0c0a12, #130c22 55%, #0a1420); } .w-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0e0a26 0%, #1b1346 28%, #2c2160 48%, #4a366f 65%, #7d4f78 80%, #c06a6e 92%, #e69a5f 100%); } .w-sun { position: absolute; bottom: 24vh; left: 50%; transform: translateX(-50%); width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, #ffe7a8 0 40%, #ffce7a 55%, rgba(255, 200, 120, 0) 72%); filter: blur(2px); opacity: 0.85; } @keyframes sunPulse { 0%, 100% { opacity: 0.78; filter: blur(3px); } 50% { opacity: 1; filter: blur(1px); } } /* ───── Ciel étoilé + galaxie ───── */ .w-stars { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; will-change: opacity; /* les étoiles s'estompent vers l'horizon (où le ciel devient orangé) */ -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 100%); mask-image: linear-gradient(180deg, #000 56%, transparent 100%); } /* nappe d'étoiles lointaines : dense, discrète, scintillement lent */ .w-stars-far { height: 80%; background-image: radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 90px 70px, rgba(200, 220, 255, 0.6), transparent), radial-gradient(1.4px 1.4px at 150px 40px, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 50px 120px, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1px 1px at 120px 150px, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1.4px 1.4px at 185px 110px, rgba(210, 225, 255, 0.65), transparent); background-size: 210px 210px; background-repeat: repeat; animation: twinkle 5.5s ease-in-out infinite; } /* étoiles proches : plus grosses, brillantes, scintillement plus vif */ .w-stars-near { height: 70%; background-image: radial-gradient(1.8px 1.8px at 60px 80px, #fff, transparent), radial-gradient(2.2px 2.2px at 250px 50px, #fff, transparent), radial-gradient(1.8px 1.8px at 160px 190px, #d6e6ff, transparent), radial-gradient(2.4px 2.4px at 330px 140px, #fff, transparent), radial-gradient(1.6px 1.6px at 410px 70px, #fff, transparent); background-size: 460px 360px; background-repeat: repeat; animation: twinkle 3.4s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* galaxie / nébuleuse diagonale (type voie lactée) */ .w-galaxy { position: absolute; top: -10%; left: 50%; width: 160vw; height: 85vh; transform: translateX(-50%) rotate(-20deg); background: radial-gradient(closest-side, rgba(150, 110, 240, 0.22), rgba(150, 110, 240, 0) 72%) 32% 50% / 58% 60% no-repeat, radial-gradient(closest-side, rgba(80, 150, 250, 0.18), rgba(80, 150, 250, 0) 72%) 52% 58% / 46% 50% no-repeat, radial-gradient(closest-side, rgba(240, 110, 200, 0.16), rgba(240, 110, 200, 0) 72%) 66% 44% / 48% 52% no-repeat; filter: blur(12px); mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent 92%); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent 92%); animation: galaxyPulse 18s ease-in-out infinite; } @keyframes galaxyPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } } /* étoiles filantes occasionnelles */ .w-shooting-star { position: absolute; top: 12%; left: 78%; width: 150px; height: 2px; border-radius: 999px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 75%); transform: rotate(-22deg); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7)); animation: shoot 9s ease-in infinite; } .w-shooting-star-2 { top: 26%; left: 60%; width: 120px; animation-duration: 13s; animation-delay: 6s; } @keyframes shoot { 0%, 85% { opacity: 0; transform: translate(0, 0) rotate(-22deg); } 87% { opacity: 1; } 100% { opacity: 0; transform: translate(-280px, 115px) rotate(-22deg); } } .w-firefly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 240, 180, 0.95); box-shadow: 0 0 8px 2px rgba(255, 225, 150, 0.65); will-change: transform, opacity; pointer-events: none; } .w-cloud { position: absolute; height: 40px; border-radius: 999px; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)); filter: blur(6px); animation: wClouds linear infinite; } .w-cloud-1 { top: 14%; width: 260px; animation-duration: 90s; } .w-cloud-2 { top: 26%; width: 200px; height: 30px; animation-duration: 120s; animation-delay: -40s; opacity: 0.7; } .w-cloud-3 { top: 9%; width: 320px; height: 50px; animation-duration: 150s; animation-delay: -90s; opacity: 0.55; } @keyframes wClouds { from { transform: translateX(-340px); } to { transform: translateX(110vw); } } .w-hills { position: absolute; left: -5%; right: -5%; bottom: 0; background-repeat: repeat-x; background-position: bottom center; animation: wScroll linear infinite; } .w-hills-3 { height: 30vh; background-image: radial-gradient(140px 70px at 70px 70px, #3a2c5c 0 99.5%, transparent 100%); background-size: 240px 70px; opacity: 0.7; animation-duration: 110s; } .w-hills-2 { height: 24vh; background-image: radial-gradient(120px 70px at 60px 70px, #243a4a 0 99.5%, transparent 100%); background-size: 200px 70px; opacity: 0.85; animation-duration: 80s; } .w-hills-1 { height: 17vh; background-image: radial-gradient(110px 70px at 55px 70px, #16332a 0 99.5%, transparent 100%); background-size: 170px 70px; animation-duration: 55s; } @keyframes wScroll { from { background-position-x: 0; } to { background-position-x: -240px; } } .w-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 7vh; background: linear-gradient(180deg, #15311f, #0c2016); } /* couche des Pokémon attrapables : au-dessus de l'UI, mais clics traversants partout sauf sur un Pokémon */ #w-mons { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; transition: opacity 0.5s ease; } body:has(#game-screen.active) #w-mons, body:has(#mp-screen.active) #w-mons { opacity: 0; pointer-events: none; } /* les Pokémon eux-mêmes ré-activent les clics (pointer-events:auto) : on les coupe explicitement en jeu pour ne plus les toucher par accident (surtout sur mobile) */ body:has(#game-screen.active) #w-mons .w-mon, body:has(#mp-screen.active) #w-mons .w-mon { pointer-events: none; } .w-mon { position: absolute; left: 0; will-change: transform; transform: translateX(-20vw); pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .w-mon.grabbed { cursor: grabbing; z-index: 6; } .w-mon.grabbed img { animation: none; transform: scaleX(var(--fx, 1)); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)) brightness(1.12); } .w-mon img { width: 58px; height: 58px; image-rendering: pixelated; display: block; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4)); } .w-mon.walker img { animation: wBob 0.55s ease-in-out infinite alternate; } @keyframes wBob { from { transform: translateY(0) scaleX(var(--fx, 1)); } to { transform: translateY(-5px) scaleX(var(--fx, 1)); } } .w-mon.flyer img { width: 50px; height: 50px; animation: wFloat 3.2s ease-in-out infinite alternate; } @keyframes wFloat { from { transform: translateY(-6px) scaleX(var(--fx, 1)); } to { transform: translateY(6px) scaleX(var(--fx, 1)); } } /* assombrit le décor pour garder le contenu lisible */ .w-overlay { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 38%, rgba(10, 8, 20, 0.15), rgba(10, 8, 20, 0.62) 100%), linear-gradient(180deg, rgba(10, 8, 20, 0.5) 0%, rgba(10, 8, 20, 0.25) 45%, rgba(10, 8, 20, 0.6) 100%); } @media (max-width: 640px) { .w-mon.flyer:nth-child(n+7) { display: none; } } a { color: var(--accent); } /* ============================================================ * En-tête * ============================================================ */ .app-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; max-width: 1000px; margin: 0 auto; width: 100%; flex-wrap: wrap; } .logo { font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: 0.5px; cursor: pointer; user-select: none; } .logo span { background: linear-gradient(90deg, var(--accent), #ff9d00); -webkit-background-clip: text; background-clip: text; color: transparent; } .header-controls { display: flex; align-items: center; gap: 10px; } .icon-btn { font-size: 1.1rem; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); cursor: pointer; transition: 0.2s; } .icon-btn:hover { transform: translateY(-2px); border-color: var(--accent); } .icon-btn.off { opacity: 0.45; } .vol-wrap { position: relative; } .vol-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; background: #1b1830; border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); display: none; } .vol-pop.open { display: block; animation: fadeIn 0.15s ease; } .vol-pop input[type=range] { width: 130px; accent-color: var(--accent); vertical-align: middle; } .lang-toggle { display: flex; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; overflow: hidden; } .lang-toggle button { border: 0; background: transparent; color: var(--muted); font-weight: 700; padding: 8px 16px; cursor: pointer; font-family: inherit; transition: 0.2s; } .lang-toggle button.active { background: var(--accent); color: #1a1c2c; } /* Panneau Paramètres (roue crantée) */ .settings-wrap { position: relative; } .settings-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: 290px; max-width: calc(100vw - 32px); background: #1b1830; border: 1px solid var(--panel-border); border-radius: 16px; padding: 12px 16px 16px; box-shadow: var(--shadow); display: none; } .settings-pop.open { display: block; animation: fadeIn 0.15s ease; } .set-title { margin: 0 0 6px; font-size: 1rem; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .set-row > span { color: var(--muted); font-size: 0.9rem; font-weight: 600; } .set-row.col { flex-direction: column; align-items: stretch; gap: 6px; } .set-row.col > span { color: var(--text); } .switch-btn { border: 1px solid var(--panel-border); background: rgba(255, 255, 255, 0.05); color: var(--muted); font-family: inherit; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.5px; padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: 0.18s; min-width: 58px; } .switch-btn.on { background: var(--green); color: #08220f; border-color: var(--green); } .set-row input[type=range] { width: 150px; accent-color: var(--accent); } .set-select { width: 100%; background: #14111f; color: var(--text); border: 1px solid var(--panel-border); border-radius: 10px; padding: 8px 10px; font-family: inherit; font-size: 0.85rem; cursor: pointer; } .set-select:focus { outline: none; border-color: var(--accent); } .tagline { text-align: center; color: var(--muted); margin: 10px 0 26px; font-size: 1.05rem; } /* ============================================================ * Écrans * ============================================================ */ .screen { display: none; animation: fadeIn 0.35s ease; } .screen.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ============================================================ * Menu * ============================================================ */ /* ============================================================ * Navbar de catégories (collante, 1 rangée centrée ou défilante) * ============================================================ */ .cat-nav { position: sticky; top: 0; z-index: 6; margin: 4px -20px 26px; padding: 10px 0; background: color-mix(in srgb, var(--bg-1) 78%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--panel-border); overflow-x: auto; overscroll-behavior-x: contain; -ms-overflow-style: none; scrollbar-width: none; /* masque en fondu les bords quand ça déborde */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); } .cat-nav::-webkit-scrollbar { display: none; } .cat-nav-inner { display: flex; gap: 8px; width: max-content; margin: 0 auto; padding: 0 20px; } .cat-chip { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-weight: 700; font-size: 0.82rem; color: var(--muted); background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; padding: 7px 13px; cursor: pointer; scroll-snap-align: center; transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease, border-color 0.18s ease; white-space: nowrap; } .cat-chip > i { width: 8px; height: 8px; border-radius: 50%; background: var(--chip); box-shadow: 0 0 8px var(--chip); flex: none; } .cat-chip > b { font-size: 0.68rem; color: var(--muted); background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; transition: 0.18s; } .cat-chip:hover { color: var(--text); transform: translateY(-2px); border-color: color-mix(in srgb, var(--chip) 60%, transparent); } .cat-chip.active { color: #0c0c14; background: var(--chip); border-color: var(--chip); box-shadow: 0 6px 16px color-mix(in srgb, var(--chip) 35%, transparent); } .cat-chip.active > i { background: #0c0c14; box-shadow: none; } .cat-chip.active > b { color: #0c0c14; background: rgba(0, 0, 0, 0.18); } /* le titre ne doit pas passer sous la nav collante au scroll */ .section-title[id] { scroll-margin-top: 78px; } @media (max-width: 640px) { .cat-nav { margin-inline: -20px; padding: 9px 0; } /* cibles tactiles plus confortables (la barre défile horizontalement, donc on peut se permettre + grand) */ .cat-chip { font-size: 0.82rem; padding: 9px 14px; } } .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .game-card { text-align: left; font-family: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 24px 22px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(8px); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; animation: cardIn 0.5s backwards; --card-accent: var(--accent); border-top: 3px solid color-mix(in srgb, var(--card-accent) 65%, transparent); overflow: hidden; } .ribbon { position: absolute; top: 13px; left: -36px; transform: rotate(-45deg); width: 140px; text-align: center; padding: 3px 0; z-index: 4; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #0c0c14; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); pointer-events: none; } .ribbon-easy { background: var(--green); } .ribbon-medium { background: var(--accent); } .ribbon-hard { background: #ff5470; color: #fff; } .ribbon-expert { background: #b06bff; color: #fff; } .game-card:nth-child(1) { animation-delay: 0.04s; } .game-card:nth-child(2) { animation-delay: 0.09s; } .game-card:nth-child(3) { animation-delay: 0.14s; } .game-card:nth-child(4) { animation-delay: 0.19s; } .game-card:nth-child(5) { animation-delay: 0.24s; } .game-card:nth-child(6) { animation-delay: 0.29s; } @keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } } .game-card:hover { transform: translateY(-6px); border-color: var(--card-accent); box-shadow: 0 14px 34px color-mix(in srgb, var(--card-accent) 28%, transparent); } .game-card { position: relative; } /* l'aperçu "respire" dans la couleur de la carte */ .card-preview { animation: previewGlow 4.5s ease-in-out infinite; } @keyframes previewGlow { 0%, 100% { box-shadow: inset 0 0 0 transparent; } 50% { box-shadow: inset 0 0 18px color-mix(in srgb, var(--card-accent) 22%, transparent); } } /* reflet qui balaie la carte au survol */ .game-card::after { content: ''; position: absolute; top: 0; left: -75%; width: 55%; height: 100%; z-index: 3; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .game-card:hover::after { animation: cardShine 0.75s ease; } @keyframes cardShine { from { left: -75%; opacity: 1; } to { left: 130%; opacity: 1; } } .card-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; font-size: 1.9rem; background: color-mix(in srgb, var(--card-accent) 20%, transparent); border: 1px solid color-mix(in srgb, var(--card-accent) 40%, transparent); } .game-card h3 { font-size: 1.25rem; } .game-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.45; flex: 1; } .card-best { align-self: flex-start; font-size: 0.78rem; font-weight: 700; color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 16%, transparent); padding: 4px 12px; border-radius: 999px; } /* Héro d'accueil */ .hero { text-align: center; margin: 6px 0 26px; } .hero-ball { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 14px; position: relative; background: linear-gradient(#ee1515 0 calc(50% - 5px), #15151f calc(50% - 5px) calc(50% + 5px), #fff calc(50% + 5px) 100%); border: 4px solid #15151f; box-shadow: var(--shadow); animation: ballBob 3s ease-in-out infinite; } .hero-ball::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid #15151f; } @keyframes ballBob { 50% { transform: translateY(-7px) rotate(10deg); } } .hero-title { font-size: clamp(1.5rem, 4vw, 2.3rem); font-weight: 800; } .section-title { font-size: 1.15rem; font-weight: 800; margin: 24px 0 14px; display: flex; align-items: center; gap: 10px; } .section-title::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--panel-border), transparent); } /* Bannière multijoueur mise en avant */ .mp-banner { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; color: var(--text); cursor: pointer; background: linear-gradient(120deg, rgba(59,108,255,0.25), rgba(176,107,255,0.22)); border: 1px solid rgba(120,150,255,0.4); border-radius: var(--radius); padding: 20px 24px; transition: transform 0.18s ease, box-shadow 0.2s ease; } .mp-banner:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(80,110,255,0.3); } .mp-banner-icon { font-size: 2.6rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); } .mp-banner-txt { flex: 1; } .mp-banner-txt h3 { font-size: 1.3rem; } .mp-banner-txt p { color: var(--muted); font-size: 0.92rem; line-height: 1.45; margin-top: 4px; } .mp-banner-go { font-weight: 800; color: var(--accent); white-space: nowrap; } /* Mini-démos de gameplay dans les cartes (vrais sprites) */ .card-preview { position: relative; height: 94px; border-radius: 14px; margin-bottom: 2px; background: color-mix(in srgb, var(--card-accent) 13%, rgba(0, 0, 0, 0.3)); border: 1px solid color-mix(in srgb, var(--card-accent) 28%, transparent); overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; } .dm-sprite { width: 66px; height: 66px; object-fit: contain; image-rendering: pixelated; flex: none; transition: filter 0.45s ease; } .dm-sprite.silhouette { filter: brightness(0); } .dm-sprite.side { width: 54px; height: 54px; } .card-demo:has(.dm-name) { flex-direction: column; gap: 2px; } .dm-name { font-weight: 700; font-size: 0.74rem; color: var(--card-accent); opacity: 0; transform: translateY(4px); transition: 0.3s; white-space: nowrap; } .dm-name.show { opacity: 1; transform: none; } .dm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 1; min-width: 0; } .dm-opts span { font-size: 0.56rem; font-weight: 600; padding: 4px 5px; border-radius: 6px; text-align: center; background: rgba(255, 255, 255, 0.08); color: var(--muted); border: 1px solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: 0.25s; } .dm-opts span[style*="--tc"] { background: color-mix(in srgb, var(--tc) 45%, #15151f); color: #fff; } .dm-opts span.ok { background: var(--green); color: #08220f; border-color: #fff; } .dm-opts span.no { background: var(--bad); color: #2a0009; border-color: #fff; } .dm-vs { display: flex; align-items: center; gap: 8px; } .dm-mon { display: flex; flex-direction: column; align-items: center; padding: 3px 6px; border-radius: 8px; border: 2px solid transparent; transition: 0.3s; } .dm-mon img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; } .dm-mon b { font-family: 'Press Start 2P', monospace; font-size: 0.5rem; color: var(--muted); } .dm-mon.ok { border-color: var(--green); box-shadow: 0 0 12px rgba(58, 208, 122, 0.5); } .dm-mon.ok b { color: var(--green); } .dm-x { font-family: 'Press Start 2P', monospace; font-size: 0.5rem; color: var(--red); background: #fff; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; } .dm-eq { display: flex; gap: 3px; align-items: flex-end; height: 34px; flex: none; } .dm-eq i { width: 4px; border-radius: 2px; background: var(--card-accent); height: 30%; } .dm-eq i:nth-child(1) { animation: cpEq .8s -.0s ease-in-out infinite; } .dm-eq i:nth-child(2) { animation: cpEq .8s -.3s ease-in-out infinite; } .dm-eq i:nth-child(3) { animation: cpEq .8s -.6s ease-in-out infinite; } .dm-eq i:nth-child(4) { animation: cpEq .8s -.2s ease-in-out infinite; } .dm-eq i:nth-child(5) { animation: cpEq .8s -.5s ease-in-out infinite; } @keyframes cpEq { 0%, 100% { height: 15%; } 50% { height: 95%; } } .dm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); grid-auto-rows: 1fr; gap: 4px; width: 100%; height: 100%; } .dm-grid i { border-radius: 5px; background: rgba(255, 255, 255, 0.05); display: grid; place-items: center; overflow: hidden; } .dm-grid i img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; opacity: 0; transform: scale(0.4); transition: 0.3s; } .dm-grid i.on { background: color-mix(in srgb, var(--card-accent) 22%, transparent); } .dm-grid i.on img { opacity: 1; transform: scale(1); } /* démos des nouveaux jeux */ .dm-dex { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; } .dm-dex span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px; border-radius: 6px; border: 2px solid transparent; transition: 0.3s; } .dm-dex span img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; } .dm-dex span b { font-family: 'Press Start 2P', monospace; font-size: 0.4rem; color: var(--muted); } .dm-dex span.ok { border-color: var(--green); background: color-mix(in srgb, var(--green) 20%, transparent); } .dm-dex span.ok b { color: var(--green); } .dm-cat, .dm-entree { font-size: 0.7rem; line-height: 1.35; text-align: center; color: var(--text); padding: 2px 6px; } .dm-entree { font-style: italic; } .dm-cat { font-weight: 700; color: var(--card-accent); } .dm-clues { display: flex; flex-direction: column; gap: 3px; width: 100%; } .dm-clues div { font-size: 0.62rem; font-weight: 600; background: rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 3px 8px; text-align: center; } .dm-zoom { width: 70px; height: 70px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: rgba(0, 0, 0, 0.25); } .dm-zoom img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; animation: dmZoom 3s ease-in-out infinite; } @keyframes dmZoom { 0%, 100% { transform: scale(3); } 50% { transform: scale(1); } } /* démo Kahoot (bannière multi) */ .mp-banner-demo { --card-accent: #6a8bff; width: 116px; height: 78px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--card-accent) 16%, rgba(0, 0, 0, 0.3)); border: 1px solid color-mix(in srgb, var(--card-accent) 30%, transparent); display: grid; place-items: center; overflow: hidden; } .dm-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .dm-answers span { width: 36px; height: 23px; border-radius: 6px; display: grid; place-items: center; background: var(--kc); color: #fff; font-size: 0.85rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); box-shadow: 0 3px 0 rgba(0, 0, 0, .25); opacity: 0.85; transition: 0.25s; } .dm-answers span.ok { outline: 2px solid #fff; transform: translateY(-2px) scale(1.08); opacity: 1; box-shadow: 0 0 12px var(--kc); } @media (max-width: 560px) { .mp-banner-demo { display: none; } } /* ============================================================ * Barre de jeu + HUD * ============================================================ */ .game-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } #back-btn { font-size: 1.2rem; padding: 8px 16px; } #game-title { font-size: 1.4rem; flex: 1; text-align: center; min-width: 140px; } .hud { display: flex; align-items: center; gap: 14px; } .hud-left .hearts { font-size: 1.15rem; letter-spacing: 1px; } .streak-badge { font-weight: 800; font-size: 1.05rem; background: rgba(255, 95, 30, 0.18); border: 1px solid rgba(255, 140, 40, 0.5); padding: 5px 12px; border-radius: 999px; } .hud-score { font-family: 'Press Start 2P', monospace; font-size: 1rem; color: var(--accent); min-width: 70px; text-align: right; text-shadow: 0 2px 6px rgba(255, 203, 5, 0.4); } /* Chrono */ .timer-wrap { height: 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); overflow: hidden; margin-bottom: 18px; border: 1px solid var(--panel-border); } .timer-bar { height: 100%; width: 100%; transform-origin: left center; border-radius: 999px; transition: background 0.3s; } .timer-bar.ok { background: linear-gradient(90deg, #3ad07a, #6dffb0); } .timer-bar.warn { background: linear-gradient(90deg, #ffb300, #ffd166); } .timer-bar.danger { background: linear-gradient(90deg, #ff3b3b, #ff7a7a); animation: pulseBar 0.5s ease-in-out infinite; } @keyframes pulseBar { 50% { opacity: 0.65; } } /* Combo */ .combo-indicator { text-align: center; font-weight: 800; font-size: 1.15rem; color: #ff9d3c; height: 1.6em; opacity: 0; transform: scale(0.6); } .combo-indicator.show { animation: comboPop 0.6s ease; } @keyframes comboPop { 0% { opacity: 0; transform: scale(0.4) rotate(-8deg); } 40% { opacity: 1; transform: scale(1.25) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } /* ============================================================ * Boutons * ============================================================ */ .btn { font-family: inherit; font-weight: 600; font-size: 0.95rem; color: var(--text); background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 11px 20px; cursor: pointer; transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease; } .btn:hover:not(:disabled) { transform: translateY(-2px); } .btn:active:not(:disabled) { transform: translateY(0) scale(0.97); } .btn:disabled { cursor: default; opacity: 0.7; } .btn.primary { background: linear-gradient(90deg, var(--accent), #ff9d00); color: #1a1c2c; border: 0; box-shadow: 0 6px 18px rgba(255, 157, 0, 0.35); } .btn.ghost { background: transparent; } .btn.small { padding: 7px 14px; font-size: 0.85rem; } /* ============================================================ * Panneau de jeu commun * ============================================================ */ .card-panel { position: relative; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 30px 28px 28px; backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; animation: fadeIn 0.3s ease; } .card-panel::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--accent), #ff6ec7); } .card-panel .hint small { color: var(--muted); font-weight: 400; } .hint { color: var(--muted); max-width: 540px; line-height: 1.5; } .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* Sprite */ .sprite-box { /* on plafonne AUSSI par la hauteur d'écran (vh) : sinon le sprite mange tout l'espace vertical sur mobile et pousse le formulaire / bouton « Valider » hors de l'écran */ width: 280px; max-width: min(78vw, 42vh); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.08), transparent 70%); border-radius: var(--radius); } .sprite-box.small { width: 230px; max-width: min(72vw, 32vh); } .sprite-box.zoomed { overflow: hidden; } .sprite-box.zoomed .sprite { transform: scale(6); animation: none; transition: transform 0.7s cubic-bezier(.2, 1, .4, 1); } .sprite { width: 100%; height: 100%; object-fit: contain; transition: filter 0.5s ease, transform 0.4s ease; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4)); } .sprite.silhouette { filter: brightness(0) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)); } .sprite:not(.silhouette) { animation: reveal 0.55s cubic-bezier(.2,1.3,.4,1); } @keyframes reveal { 0% { transform: scale(0.7) rotate(-6deg); filter: brightness(3) drop-shadow(0 8px 16px rgba(255,255,255,.6)); } 60% { transform: scale(1.12); } 100% { transform: scale(1) rotate(0); } } /* Nom révélé */ .reveal-name { min-height: 1.6em; font-size: 1.4rem; font-weight: 700; opacity: 0; transform: translateY(6px); transition: 0.3s; } .reveal-name.show { opacity: 1; transform: none; } .reveal-name span { color: var(--muted); font-weight: 500; font-size: 1rem; } /* Feedback */ .feedback { min-height: 1.4em; font-weight: 600; } .feedback.good { color: var(--green); } .feedback.bad { color: var(--bad); } /* ============================================================ * Blindtest : saisie * ============================================================ */ .guess-form { display: flex; gap: 10px; width: 100%; max-width: 460px; position: relative; } /* autocomplétion */ .ac-box { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: #1b1830; border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; text-align: left; } .ac-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; cursor: pointer; } .ac-item span { font-weight: 600; } .ac-item small { color: var(--muted); } .ac-item.hi, .ac-item:hover { background: rgba(255, 203, 5, 0.18); } .guess-form input { flex: 1; font-family: inherit; font-size: 1rem; color: var(--text); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 16px; outline: none; transition: border-color 0.2s; } .guess-form input:focus { border-color: var(--accent); } .guess-form input::placeholder { color: var(--muted); } .shake { animation: shake 0.4s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } /* ============================================================ * QCM : options façon Kahoot * ============================================================ */ .options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 540px; } .kahoot-opt { display: flex; align-items: center; gap: 12px; font-family: inherit; font-weight: 700; font-size: 1rem; color: #fff; text-align: left; cursor: pointer; background: var(--opt-color); border: 3px solid transparent; border-radius: 14px; padding: 16px 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25); transition: transform 0.12s, box-shadow 0.12s, filter 0.2s; } .kahoot-opt:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.08); } .kahoot-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.25); } .kahoot-opt .opt-shape { font-size: 1.2rem; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .kahoot-opt .opt-label { flex: 1; } .kahoot-opt:disabled { opacity: 0.55; } .kahoot-opt.correct { background: var(--green); border-color: #fff; opacity: 1; animation: rightPulse 0.5s; } .kahoot-opt.wrong { background: var(--bad); border-color: #fff; opacity: 1; } @keyframes rightPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* ============================================================ * Le plus fort : versus * ============================================================ */ .versus { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; flex-wrap: wrap; } .stat-card { font-family: inherit; color: var(--text); flex: 1; min-width: 220px; max-width: 320px; background: rgba(0, 0, 0, 0.2); border: 3px solid var(--panel-border); border-radius: var(--radius); padding: 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .stat-card .sprite { width: 170px; height: 170px; } .stat-card:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); border-color: var(--accent); } .stat-card .stat-name { font-weight: 700; font-size: 1.15rem; } .stat-card .stat-total { font-family: 'Press Start 2P', monospace; font-size: 1.1rem; color: var(--accent); } .stat-card.win { border-color: var(--green); box-shadow: 0 0 26px rgba(58, 208, 122, 0.45); } .stat-card.lose { border-color: var(--bad); box-shadow: 0 0 26px rgba(255, 84, 112, 0.4); } .vs-badge { font-family: 'Press Start 2P', monospace; font-size: 1rem; color: var(--red); background: #fff; border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); animation: vsPop 0.4s ease; } @keyframes vsPop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1); } } /* ============================================================ * Types : grille * ============================================================ */ .type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; width: 100%; max-width: 640px; } .type-btn { font-family: inherit; font-weight: 700; font-size: 0.9rem; color: #fff; border: 2px solid transparent; border-radius: 12px; padding: 11px 6px; cursor: pointer; background: color-mix(in srgb, var(--type-color) 45%, #15131d); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; } .type-icon { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); } .type-btn:hover:not(:disabled) { transform: translateY(-2px); } .type-btn.selected { background: var(--type-color); border-color: #fff; box-shadow: 0 0 14px var(--type-color); transform: translateY(-2px); } .type-btn.correct { background: var(--green); border-color: #fff; } .type-btn.wrong { background: var(--bad); border-color: #fff; } .type-btn.missed { border-color: var(--accent); box-shadow: 0 0 12px var(--accent); } .type-btn:disabled:not(.correct):not(.wrong):not(.missed) { opacity: 0.35; } /* ============================================================ * Quiz Musique * ============================================================ */ .music-visual { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* égaliseur décoratif au-dessus du disque */ /* barres pilotées par l'audio réel (voir Visualizer dans app.js) */ .eq { display: flex; gap: 4px; align-items: flex-end; height: 30px; opacity: 0.92; } .eq span { width: 5px; height: 100%; border-radius: 3px; background: linear-gradient(var(--accent), #ff6ec7); transform: scaleY(0.14); transform-origin: bottom; transition: transform 0.07s linear; } /* disque + ondes parfaitement centrées dessus */ .disc-wrap { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; } .music-disc { width: 160px; height: 160px; border-radius: 50%; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 3.4rem; background: radial-gradient(circle at 50% 50%, #2b2b3a 0 20%, #15151f 21% 25%, #2b2b3a 26% 100%), conic-gradient(from 0deg, #3b3b52, #1a1a26, #3b3b52, #1a1a26, #3b3b52); box-shadow: var(--shadow), inset 0 0 0 6px rgba(255,255,255,0.04); border: 3px solid rgba(255,255,255,0.12); } .music-disc.spin { animation: spinDisc 3.2s linear infinite; } /* tourne seulement quand l'audio joue */ @keyframes spinDisc { to { transform: rotate(360deg); } } .disc-wrap::before, .disc-wrap::after { content: ''; position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.7); } .disc-wrap:has(.music-disc.spin)::before { animation: ripple 1.8s ease-out infinite; } .disc-wrap:has(.music-disc.spin)::after { animation: ripple 1.8s ease-out infinite 0.9s; } @keyframes ripple { 0% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.7); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.65); } } /* progression du clip (0 -> 20 s) + lien réécouter */ .clip-progress { width: 100%; max-width: 320px; height: 8px; border-radius: 999px; background: rgba(0,0,0,0.3); border: 1px solid var(--panel-border); overflow: hidden; } .clip-bar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ff9d00); transition: transform 0.1s linear; } .clip-time { font-size: 0.85rem; color: var(--muted); } .link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-family: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; } .link-btn:hover { text-decoration: underline; } /* essais restants */ .tries { font-weight: 600; color: var(--muted); } .tries .pips { letter-spacing: 3px; margin-left: 4px; } .bonus { width: 100%; max-width: 520px; } .bonus-q { font-weight: 700; margin-bottom: 10px; color: var(--accent); } .bonus-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bonus-opt { font-size: 0.9rem; } .bonus-opt.correct { background: var(--green); color: #08220f; border: 0; } .bonus-opt.wrong { background: var(--bad); color: #2a0009; border: 0; } /* ============================================================ * Game over * ============================================================ */ .gameover-panel { gap: 12px; } .go-emoji { font-size: 4rem; animation: reveal 0.6s ease; } .gameover-panel h3 { font-size: 1.6rem; } .final-score { font-family: 'Press Start 2P', monospace; font-size: 2.4rem; color: var(--accent); text-shadow: 0 3px 10px rgba(255, 203, 5, 0.5); } .go-best { color: var(--muted); } /* ============================================================ * Spinner Pokéball + erreur * ============================================================ */ .spinner { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); } .pokeball-spinner { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(#ff1c1c 0 50%, #fff 50% 100%); border: 4px solid #15151f; position: relative; animation: spin 1s linear infinite; } .pokeball-spinner::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 4px; background: #15151f; transform: translateY(-50%); } .pokeball-spinner::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #15151f; transform: translate(-50%, -50%); } @keyframes spin { to { transform: rotate(360deg); } } .error { color: var(--bad); display: flex; flex-direction: column; align-items: center; gap: 12px; } /* ============================================================ * Effets : confettis, popup points, flash * ============================================================ */ .fx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 50; } .points-popup { position: fixed; transform: translate(-50%, -50%); font-family: 'Press Start 2P', monospace; font-size: 1.6rem; color: var(--accent); text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 60; animation: floatUp 1.1s ease-out forwards; } @keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } } .screen-flash { position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0; transition: opacity 0.12s ease; } .screen-flash.show { opacity: 0.5; } .screen-flash.good { background: radial-gradient(circle, rgba(58,208,122,0.5), transparent 70%); } .screen-flash.bad { background: radial-gradient(circle, rgba(255,84,112,0.55), transparent 70%); } /* ============================================================ * Pied de page * ============================================================ */ .app-footer { position: relative; z-index: 1; text-align: center; padding: 18px; color: var(--muted); font-size: 0.85rem; } /* ============================================================ * Jeux supplémentaires (médias) * ============================================================ */ .qg-media { display: flex; justify-content: center; align-items: center; min-height: 70px; } .qg-text { font-size: 1.5rem; font-weight: 700; text-align: center; padding: 14px 10px; color: var(--accent); } .qg-dex { max-width: 520px; font-size: 1.05rem; line-height: 1.55; text-align: center; font-style: italic; padding: 8px 6px; } .qg-clues { display: flex; flex-direction: column; gap: 8px; } .qg-clues div { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-border); border-radius: 10px; padding: 8px 16px; font-weight: 600; } .zoom-box { width: 190px; height: 190px; border-radius: var(--radius); overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.06), transparent 70%); } .zoom-box img { width: 100%; height: 100%; object-fit: contain; transform: scale(4.6); image-rendering: pixelated; } .item-box { width: 200px; height: 200px; display: grid; place-items: center; border-radius: var(--radius); background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.1), transparent 70%); } .item-box img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); } .dm-item { width: 60px; height: 60px; object-fit: contain; image-rendering: pixelated; flex: none; } /* Wordle Pokémon */ .wd-grid { display: flex; flex-direction: column; gap: 6px; align-items: center; } .wd-row { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 6px; } .wd-cell { width: 46px; height: 46px; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; text-transform: uppercase; border: 2px solid var(--panel-border); border-radius: 8px; color: var(--text); background: rgba(255, 255, 255, 0.03); } .wd-cell.correct { background: #538d4e; border-color: #538d4e; color: #fff; animation: wdPop 0.3s ease; } .wd-cell.present { background: #b59f3b; border-color: #b59f3b; color: #fff; animation: wdPop 0.3s ease; } .wd-cell.absent { background: #3a3a3c; border-color: #3a3a3c; color: #fff; } @keyframes wdPop { from { transform: scale(0.8); } to { transform: scale(1); } } .wd-reveal { display: inline-flex; align-items: center; gap: 10px; } .wd-reveal img { width: 52px; height: 52px; image-rendering: pixelated; } @media (max-width: 480px) { .wd-cell { width: 38px; height: 38px; font-size: 1.15rem; } } .dm-wd { display: flex; gap: 4px; } .dm-wd span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; font-weight: 800; font-size: 0.8rem; color: #fff; background: #3a3a3c; opacity: 0; transform: scale(0.5); transition: 0.25s; } .dm-wd span.on { opacity: 1; transform: none; } .dm-wd span[data-m="correct"].on { background: #538d4e; } .dm-wd span[data-m="present"].on { background: #b59f3b; } /* Akinator */ .akinator { gap: 14px; } .aki-orb { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: #fff; background: radial-gradient(circle at 35% 30%, #b18bff, #6a3fd0); box-shadow: 0 0 28px rgba(155, 109, 255, 0.55); animation: akiPulse 1.6s ease-in-out infinite; } @keyframes akiPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .aki-count { color: var(--muted); font-size: 0.85rem; } .aki-q { text-align: center; font-size: 1.5rem; line-height: 1.3; } .aki-answers { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .aki-answers .btn { min-width: 108px; } .aki-yes { background: var(--green); color: #08220f; } .aki-no { background: #ff5470; color: #fff; } .aki-idk { background: rgba(255, 255, 255, 0.1); color: var(--text); } .aki-guess { display: flex; flex-direction: column; align-items: center; gap: 6px; } .aki-guess img { width: 200px; max-width: 60vw; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4)); } .aki-name { font-size: 1.5rem; font-weight: 800; color: var(--accent); } .dm-aki { position: relative; width: 64px; height: 64px; display: grid; place-items: center; } .dm-orb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: radial-gradient(circle at 35% 30%, #b18bff, #6a3fd0); transition: 0.4s; } .dm-aki-mon { position: absolute; width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; opacity: 0; transform: scale(0.5); transition: 0.4s; } .dm-aki.reveal .dm-orb { opacity: 0; transform: scale(0.3); } .dm-aki.reveal .dm-aki-mon { opacity: 1; transform: none; } /* pastille couleur (jeux Couleur / Type d'attaque) */ .color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; border: 1px solid rgba(255, 255, 255, 0.25); } .kahoot-opt .color-dot { width: 14px; height: 14px; } /* Révélation progressive */ .reveal-blur { animation-name: deblur; animation-timing-function: ease-out; animation-fill-mode: forwards; } @keyframes deblur { from { filter: blur(20px); } 60% { filter: blur(6px); } to { filter: blur(0); } } /* Mémo (paires) */ .memo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 440px; margin: 0 auto; width: 100%; } .memo-card { position: relative; aspect-ratio: 1; border: 0; background: none; cursor: pointer; padding: 0; } .memo-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; transition: opacity 0.25s, transform 0.25s; } .memo-back { background: linear-gradient(150deg, var(--accent), #6a3fd0); color: #fff; font-size: 1.6rem; font-weight: 800; } .memo-front { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-border); opacity: 0; transform: scale(0.85); } .memo-front img { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; } .memo-card.flip .memo-back { opacity: 0; } .memo-card.flip .memo-front { opacity: 1; transform: none; } .memo-card.done { opacity: 0.5; } .memo-card.done .memo-front { border-color: var(--green); box-shadow: inset 0 0 0 2px var(--green); } /* Vrai ou Faux */ .tf-claim { text-align: center; font-size: 1.5rem; line-height: 1.3; min-height: 2em; } .tf-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .tf-btns .btn { min-width: 130px; font-size: 1.1rem; } .tf-true { background: var(--green); color: #08220f; } .tf-false { background: #ff5470; color: #fff; } /* Révélation pixelisée */ .reveal-game { gap: 14px; } .pix-canvas { width: 240px; height: 240px; max-width: 72vw; max-height: 72vw; border-radius: var(--radius); background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.06), transparent 70%); image-rendering: pixelated; } .rv-pix-btn b { color: var(--accent); } .rv-pix-btn:disabled { opacity: 0.45; } /* Modale de confirmation maison */ .modal-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(8, 6, 16, 0.62); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.2s ease; } .modal-back.open { opacity: 1; } .modal-box { background: #1b1830; border: 1px solid var(--panel-border); border-radius: 18px; padding: 24px 26px; max-width: 380px; width: 100%; box-shadow: var(--shadow); text-align: center; transform: scale(0.92) translateY(10px); transition: transform 0.22s cubic-bezier(.2, 1.2, .4, 1); } .modal-back.open .modal-box { transform: none; } .modal-box h3 { margin: 0 0 8px; font-size: 1.25rem; } .modal-box p { color: var(--muted); margin: 0 0 20px; } .modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .modal-actions .btn { min-width: 120px; } .btn.danger { background: #ff5470; color: #fff; border-color: #ff5470; } .btn.danger:hover { filter: brightness(1.08); } /* démos */ .dm-memo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .dm-mcard { width: 19px; height: 19px; border-radius: 4px; background: var(--card-accent); display: grid; place-items: center; overflow: hidden; transition: 0.3s; } .dm-mcard img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; opacity: 0; transform: scale(0.4); transition: 0.3s; } .dm-mcard.flip { background: rgba(255, 255, 255, 0.08); } .dm-mcard.flip img { opacity: 1; transform: none; } .dm-deblur { animation: dmDeblur 2.6s ease-out infinite; } @keyframes dmDeblur { 0% { filter: blur(10px); } 70%, 100% { filter: blur(0); } } .dm-intrus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .dm-intrus span { border-radius: 6px; padding: 2px; border: 2px solid transparent; transition: 0.3s; } .dm-intrus span img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; } .dm-intrus span.ok { border-color: #ff5470; background: color-mix(in srgb, #ff5470 18%, transparent); } .dm-tf { display: flex; gap: 8px; } .dm-tf span { padding: 7px 15px; border-radius: 999px; font-weight: 800; font-size: 0.78rem; background: rgba(255, 255, 255, 0.06); color: var(--muted); transition: 0.3s; } .dm-tf span.ok { background: var(--green); color: #08220f; } .dm-opts span i.color-dot { width: 11px; height: 11px; margin-right: 4px; } /* ============================================================ * Challenge "Trouve-les tous" * ============================================================ */ .findall { width: 100%; max-width: 760px; } .fa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; } .fa-type-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #fff; background: var(--type-color); padding: 6px 14px; border-radius: 999px; text-shadow: 0 1px 2px rgba(0,0,0,.4); } .fa-counter { font-family: 'Press Start 2P', monospace; font-size: 0.95rem; color: var(--accent); } .fa-time { font-family: 'Press Start 2P', monospace; font-size: 1.1rem; color: var(--text); } .fa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; width: 100%; max-height: 52vh; overflow-y: auto; padding: 4px; background: rgba(0,0,0,0.2); border-radius: 12px; border: 1px solid var(--panel-border); } .fa-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-radius: 10px; overflow: hidden; } .fa-cell .fa-num { color: var(--muted); font-size: 0.75rem; font-weight: 700; } .fa-cell.found { background: rgba(58,208,122,0.16); border-color: var(--green); animation: pop 0.4s ease; } .fa-cell.found.missed { background: rgba(255,84,112,0.14); border-color: var(--bad); } .fa-cell.found img { width: 100%; height: 68%; object-fit: contain; } .fa-cell.found span { font-size: 0.6rem; font-weight: 600; line-height: 1.1; padding: 0 2px 3px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* ============================================================ * Multijoueur * ============================================================ */ #mp-root { max-width: 640px; margin: 0 auto; } .mp-panel { position: relative; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 26px; backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 16px; animation: fadeIn 0.3s ease; } .mp-panel h2 { text-align: center; } .mp-center { align-items: center; text-align: center; } .mp-mini { align-self: flex-start; padding: 6px 12px; font-size: 0.85rem; } .mp-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--muted); } .mp-field input[type=text], .mp-field input:not([type]), .mp-field select, #mp-pseudo, #mp-code { font-family: inherit; font-size: 1rem; color: var(--text); background: rgba(0,0,0,0.25); border: 1px solid var(--panel-border); border-radius: 12px; padding: 11px 14px; outline: none; } .mp-field input[type=range] { accent-color: var(--accent); } .mp-field select option { background: #1b1830; } .mp-cat-all { margin-left: 8px; font: inherit; font-size: 0.72rem; font-weight: 700; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: underline; } .mp-cats { display: flex; flex-wrap: wrap; gap: 7px; } .mp-cat-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--panel-border); border-radius: 999px; padding: 6px 12px; font-size: 0.82rem; font-weight: 600; color: var(--muted); transition: 0.15s; } .mp-cat-chip input { accent-color: var(--accent); margin: 0; } .mp-cat-chip:has(input:checked) { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 14%, rgba(0, 0, 0, 0.25)); } .mp-check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; } .mp-actions { display: flex; gap: 10px; flex-wrap: wrap; } .mp-actions .btn { flex: 1; } .mp-join { display: flex; gap: 10px; } .mp-join #mp-code { flex: 1; letter-spacing: 4px; font-weight: 800; text-align: center; } .mp-code { background: rgba(0,0,0,0.35); padding: 12px 16px; border-radius: 10px; font-family: monospace; white-space: pre; } .mp-code-big { text-align: center; font-weight: 700; font-size: 1.1rem; color: var(--muted); } .mp-code-big span { font-family: 'Press Start 2P', monospace; font-size: 1.6rem; color: var(--accent); letter-spacing: 3px; margin-left: 8px; } .mp-games { display: flex; flex-direction: column; gap: 10px; } .mp-game-row { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.2); border-radius: 12px; padding: 10px 14px; } .mp-game-code { font-family: 'Press Start 2P', monospace; color: var(--accent); } .mp-game-row > span:nth-child(2) { flex: 1; color: var(--muted); font-size: 0.9rem; } .mp-players { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; } .mp-player { display: inline-flex; align-items: center; gap: 7px; background: rgba(59,108,255,0.15); border: 1px solid rgba(59,108,255,0.35); padding: 7px 12px; border-radius: 999px; font-weight: 600; } .mp-player.host { background: rgba(255,203,5,0.15); border-color: rgba(255,203,5,0.4); } .mp-player.joined { animation: chipIn 0.5s ease; } .mp-badge { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 999px; } .mp-badge.host { background: var(--accent); color: #1a1c2c; } .mp-badge.you { background: rgba(255,255,255,0.16); color: var(--text); } .mp-kick { border: 0; background: rgba(255,84,112,0.2); color: #ff8198; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 0.7rem; line-height: 1; display: grid; place-items: center; transition: 0.15s; } .mp-kick:hover { background: #ff5470; color: #fff; } .mp-recap { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; } .mp-cats-recap { margin-top: 2px; } .mp-tag { font-size: 0.78rem; font-weight: 600; color: var(--muted); background: rgba(255,255,255,0.06); border: 1px solid var(--panel-border); border-radius: 999px; padding: 5px 11px; } .mp-tag.accent { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 14%, rgba(0,0,0,0.2)); } @keyframes chipIn { from { opacity: 0; transform: scale(0.4); } 60% { transform: scale(1.15); } to { opacity: 1; transform: scale(1); } } .mp-online-bar { text-align: center; } .mp-online-bar span { font-size: 0.82rem; font-weight: 700; color: var(--green); background: rgba(58,208,122,0.14); border: 1px solid rgba(58,208,122,0.35); padding: 4px 12px; border-radius: 999px; } .mp-wait { text-align: center; } .mp-count { font-family: 'Press Start 2P', monospace; font-size: 4rem; color: var(--accent); animation: pop 0.6s ease; } .mp-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); background: #1b1830; border: 1px solid var(--accent); color: var(--text); padding: 12px 20px; border-radius: 12px; z-index: 70; box-shadow: var(--shadow); animation: fadeIn 0.2s ease; } /* question multi */ .mp-question { gap: 14px; } .mp-qbar { display: flex; justify-content: center; font-weight: 700; color: var(--muted); } .mp-q { text-align: center; font-size: 1.3rem; } .mp-media { display: flex; flex-direction: column; align-items: center; gap: 10px; } .mp-options { max-width: none; } .mp-opt { width: 100%; } .mp-opt-sprite { width: 40px; height: 40px; object-fit: contain; } .mp-opt.chosen { outline: 3px solid #fff; } .mp-status { text-align: center; min-height: 1.4em; font-weight: 700; } .mp-status.good { color: var(--green); } .mp-status.bad { color: var(--bad); } /* leaderboard */ .lb { display: flex; flex-direction: column; gap: 8px; } .lb-row { display: flex; align-items: center; gap: 10px; } .lb-row.me .lb-name { color: var(--accent); } .lb-row.dead { opacity: 0.5; } .lb-rank { width: 26px; text-align: center; font-weight: 800; color: var(--muted); } .lb-name { width: 110px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-bar-wrap { flex: 1; background: rgba(0,0,0,0.25); border-radius: 999px; overflow: hidden; } .lb-bar { background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: #0c1330; font-weight: 800; font-size: 0.8rem; text-align: right; padding: 5px 10px; border-radius: 999px; white-space: nowrap; transition: width 1s cubic-bezier(.2,1,.3,1); min-width: 2ch; } /* podium */ .podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 10px 0; } .podium-spot { display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); border: 1px solid var(--panel-border); border-radius: 14px 14px 0 0; padding: 14px 16px; } .podium-spot.p1 { padding-bottom: 50px; border-color: var(--accent); box-shadow: 0 0 24px rgba(255,203,5,0.35); order: 2; } .podium-spot.p2 { padding-bottom: 32px; order: 1; } .podium-spot.p3 { padding-bottom: 20px; order: 3; } .podium-medal { font-size: 2rem; } .podium-name { font-weight: 700; } .podium-score { font-family: 'Press Start 2P', monospace; font-size: 0.85rem; color: var(--accent); } /* ============================================================ * Responsive * ============================================================ */ @media (max-width: 560px) { .options { grid-template-columns: 1fr; gap: 10px; } .versus { flex-direction: column; } .vs-badge { transform: rotate(90deg); } .card-panel { padding: 20px 16px; gap: 14px; } /* barre de jeu compacte : titre sur sa ligne, le reste tient sans déborder */ .game-bar { gap: 8px; margin-bottom: 10px; } #game-title { order: -1; flex-basis: 100%; font-size: 1.15rem; min-width: 0; } #back-btn { font-size: 1.05rem; padding: 7px 13px; } .hud { gap: 10px; } .hud-left .hearts { font-size: 1rem; letter-spacing: 0; } .hud-score { font-size: 0.8rem; min-width: 54px; } .streak-badge { font-size: 0.9rem; padding: 4px 10px; } .timer-wrap { margin-bottom: 14px; } /* réponses QCM un peu plus compactes et lisibles au pouce */ .kahoot-opt { padding: 14px; font-size: 0.95rem; gap: 10px; } .reveal-name { font-size: 1.2rem; } .combo-indicator { font-size: 1rem; } /* grille des 18 types resserrée pour que le bouton « Valider » reste atteignable */ .type-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 7px; } .type-btn { font-size: 0.8rem; padding: 8px 4px; gap: 4px; } .type-icon { width: 16px; height: 16px; } /* le formulaire de réponse reste large et accessible */ .guess-form { max-width: none; } /* « Devine les types » : la grille est haute, on ÉPINGLE « Valider » en bas de l'écran pour qu'il soit toujours visible et cliquable sans scroller jusqu'en bas */ .types-game .actions { position: sticky; bottom: 0; z-index: 5; margin: 4px -16px -20px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(12, 10, 18, 0) 0%, rgba(12, 10, 18, 0.92) 45%); backdrop-filter: blur(2px); } .types-game .actions .btn { width: 100%; } } /* très petits téléphones : on resserre encore pour éviter tout débordement */ @media (max-width: 380px) { #game-title { font-size: 1.05rem; } #back-btn { font-size: 1rem; padding: 6px 11px; } .hud { gap: 8px; } .hud-score { min-width: 48px; } .kahoot-opt { padding: 12px; font-size: 0.9rem; } }