/* ============================================================ CosmoCat — Styles spécifiques au jeu Le design system sombre violet est réutilisé pour le chrome. La zone de jeu (canvas) a sa propre palette par niveau. ============================================================ */ /* Fond commun à toute la page CosmoCat. Factorisation 2026-04-24 : le gradient + la grille + les étoiles sont désormais appliqués une seule fois au niveau body/body-level (cato-bg-stars, cato-bg-grid) et non plus dupliqués par vue — chaque écran du jeu partage la même ambiance arcade. background-attachment: fixed pour rester immobile quand la vue scrolle. */ body { background: radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255, 77, 204, 0.2) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 75% 70%, rgba(77, 208, 255, 0.15) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 50% 100%, rgba(124, 77, 255, 0.25) 0%, transparent 65%), #0a0418; background-attachment: fixed; min-height: 100vh; min-height: 100dvh; } /* Étoiles scintillantes en fond, visibles sur toutes les vues (home, play, game over, leaderboard). Générées en JS (spawnIntroStars → 40 particules). position: fixed → couvre la viewport indépendamment du scroll/de la vue active. pointer-events: none pour laisser tous les clics passer. */ .cato-bg-stars { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .cato-bg-stars i { position: absolute; background: #fff; border-radius: 50%; animation: cato-bg-twinkle ease-in-out infinite; } @keyframes cato-bg-twinkle { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } /* Grille violette vignette superposée au gradient : donne le feel "arcade" factoré depuis view-home/view-gameover. Mask radial → estompe vers les bords pour ne pas créer de cadre rigide. */ .cato-bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 80%); } /* Stacking : header/main/footer doivent rester au-dessus des couches de fond (étoiles z:0, grille z:0). position: relative active le stacking context. */ .yc-header, .cosmocat-layout main, .cato-footer { position: relative; z-index: 1; } /* Vues SPA (1 visible à la fois) */ .yc-view { display: block; } .yc-view[hidden] { display: none; } /* Anti-flash deep-link leaderboard : early-route.js pose data-route sur avant le parse du body. On masque view-home et on dévoile view-leaderboard pour que la 1re frame soit déjà la bonne vue, sans passage par l'intro pendant que game.js (deferred) initialise. Force display: avec spécificité supérieure aux règles ci-dessus. */ html[data-route="leaderboard"] #view-home { display: none !important; } html[data-route="leaderboard"] #view-leaderboard[hidden] { display: flex !important; } /* Vue PLAY : centrage vertical du canvas dans l'espace main. main est déjà flex column flex:1, donc flex:1 ici remplit la hauteur disponible puis align-items/justify-content centrent .cato-play-wrap. */ #view-play[hidden] { display: none; } #view-play:not([hidden]) { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: var(--yc-sp-4); } /* Layout du chrome jeu */ .cosmocat-layout { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .cosmocat-layout main { flex: 1; display: flex; flex-direction: column; align-items: center; /* padding 0 pour laisser les vues gérer leur propre padding et permettre au gradient de body de s'étendre jusqu'aux bords (sinon bande visible). */ padding: 0; gap: var(--yc-sp-6); } .cato-actions { display: flex; flex-wrap: wrap; gap: var(--yc-sp-3); margin-top: var(--yc-sp-6); } /* Zone de jeu (canvas) max-width pilotée par la hauteur viewport (dvh = dynamic viewport height, s'adapte aux barres mobiles) : on prend 85% de la hauteur dispo et on reconvertit en largeur via l'aspect-ratio 9/16. Résultat : le canvas tient toujours à l'écran avec ~15% de marge totale (répartie header+footer), sans scroll nécessaire pour voir toute la zone de jeu. Cap dur à 480px pour les très grands écrans. */ .cato-play-wrap { width: 100%; max-width: min(480px, calc(85dvh * 9 / 16)); aspect-ratio: 9 / 16; background: #0a0418; border: 1px solid var(--yc-white-faint); border-radius: var(--yc-radius-lg); overflow: hidden; position: relative; } .cato-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; } /* HUD in-game (sera rempli en 3.2+) */ .cato-hud { position: absolute; top: 0; left: 0; right: 0; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; background: rgba(26, 16, 51, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: ui-monospace, monospace; font-size: 14px; color: #fff; z-index: 2; } .cato-hud button { pointer-events: auto; } .cato-hud .hud-score { color: #fff; } .cato-hud .hud-meals { color: #ff7a2e; font-weight: 700; } .cato-hud #hud-meals { display: inline-block; transform-origin: center; } /* Phase 3.7 — pulse déclenché via JS (classe .hud-meal-pulse sur #hud-meals) à chaque incrément du compteur repas. Respecte prefers-reduced-motion. */ @keyframes cato-meal-pulse { 0% { transform: scale(1); text-shadow: none; } 30% { transform: scale(1.4); text-shadow: 0 0 10px rgba(255, 122, 46, 0.9); } 100% { transform: scale(1); text-shadow: none; } } .cato-hud #hud-meals.hud-meal-pulse { animation: cato-meal-pulse 600ms ease-out; } @media (prefers-reduced-motion: reduce) { .cato-hud #hud-meals.hud-meal-pulse { animation: none; } } /* Footer jeu */ .cato-footer { padding: var(--yc-sp-6) var(--yc-sp-4); text-align: center; color: var(--yc-white-dim); font-size: 0.85rem; border-top: 1px solid var(--yc-white-faint); } /* Sur mobile et pendant une partie, on masque le footer : sa hauteur grignote l'espace utile au canvas (le calcul 85dvh inclut header + footer) et les liens légaux invitent au scroll pendant le gameplay. Le footer reste accessible depuis l'écran d'accueil et de fin de partie. */ @media (max-width: 640px) { body:has(#view-play:not([hidden])) .cato-footer { display: none; } } .cato-footer a { color: var(--yc-white-dim); } .cato-footer a:hover { color: var(--yc-violet-light); } .cato-footer ul { list-style: none; padding: 0; margin: 0 0 var(--yc-sp-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--yc-sp-4); } /* ============================================================ Contrôles tactiles virtuels (mobile only) Deux ronds semi-transparents fixés en bas de l'écran pour diriger Buddy au doigt. Se masquent automatiquement quand la vue PLAY n'est pas active (hérité de #view-play[hidden] → display:none sur enfants). ============================================================ */ .cato-touch-controls { display: none; } /* Activés uniquement sur petits écrans ET device tactile (pointer: coarse écarte les navigateurs desktop en mode responsive mouse). */ @media (max-width: 640px) and (pointer: coarse) { .cato-touch-controls { position: fixed; left: 0; right: 0; /* Remonte au-dessus de la barre home iOS via safe-area-inset. */ bottom: max(var(--yc-sp-4), calc(env(safe-area-inset-bottom, 0px) + var(--yc-sp-3))); display: flex; justify-content: space-between; padding: 0 var(--yc-sp-5, 20px); pointer-events: none; /* Container transparent aux clics, seuls les boutons reçoivent */ z-index: 20; } .cato-touch-btn { pointer-events: auto; width: 76px; height: 76px; border-radius: 50%; background: rgba(124, 77, 255, 0.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1.5px solid rgba(179, 136, 255, 0.45); color: rgba(255, 255, 255, 0.88); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 24px rgba(124, 77, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .cato-touch-btn svg { filter: drop-shadow(0 0 6px rgba(179, 136, 255, 0.6)); pointer-events: none; } /* État pressé (CSS :active + classe JS .is-active pour garder l'état pendant un glissement hors bouton sur pointercancel). */ .cato-touch-btn:active, .cato-touch-btn.is-active { background: rgba(124, 77, 255, 0.55); border-color: rgba(255, 77, 204, 0.75); color: #fff; transform: scale(0.92); box-shadow: 0 0 28px rgba(255, 77, 204, 0.55), 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28); } @media (prefers-reduced-motion: reduce) { .cato-touch-btn { transition: background 80ms linear, border-color 80ms linear; } .cato-touch-btn:active, .cato-touch-btn.is-active { transform: none; } } } /* Pause overlay */ .cato-pause-overlay { position: absolute; inset: 0; background: rgba(10, 4, 24, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: var(--yc-sp-4); z-index: 5; } .cato-pause-overlay[hidden] { display: none; } .cato-pause-box { background: var(--yc-bg-mid); border: 1px solid var(--yc-white-faint); border-radius: var(--yc-radius-lg); padding: var(--yc-sp-6); max-width: 320px; width: 100%; text-align: center; } .cato-pause-box h2 { margin: 0 0 var(--yc-sp-2); font-size: 1.5rem; } .cato-pause-box p { margin: 0 0 var(--yc-sp-3); font-size: 0.9rem; color: var(--yc-white-dim); } .cato-pause-countdown { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 2.5rem; font-weight: 700; color: #fff; margin: var(--yc-sp-4) 0; letter-spacing: 0.05em; } .cato-pause-warning { color: var(--yc-error) !important; font-weight: 600; margin-bottom: var(--yc-sp-4); } /* Désactive la sélection / tap highlight sur la zone de jeu (mobile). touch-action: none uniquement sur le canvas pour ne pas bloquer les boutons du HUD (le canvas gère les touches gauche/droite, le HUD est au-dessus et conserve son comportement click normal). */ .cato-play-wrap { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: default; } .cato-canvas { cursor: default; touch-action: none; } /* ============================================================ Écran fin de partie — design "arcade trophée" Implémentation du bundle Claude Design 2026-04-22. Toutes les classes sont préfixées cato-go- pour ne pas entrer en conflit avec le design-system global. ============================================================ */ /* Quand on est sur la vue game over, le fond du layout bascule vers un ambiance violet profond + radial gradients (feel arcade). Le :not([hidden]) empêche notre display:flex (ID specificity) d'écraser la règle .yc-view[hidden] { display:none } du layout SPA. Sans ça, la vue game over s'affichait en-dessous de la home au chargement. */ #view-gameover[hidden] { display: none; } #view-gameover:not([hidden]) { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; padding: var(--yc-sp-6) var(--yc-sp-4); display: flex; align-items: center; justify-content: center; overflow-x: hidden; /* Background (gradient, étoiles, grille) mutualisé au niveau body et .cato-bg-stars / .cato-bg-grid (fixed). */ } /* Confettis : petites barres colorées qui tombent en tournant. Générés dynamiquement en JS (60 particules) ; coupés en reduced-motion. */ .cato-go-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .cato-go-confetti i { position: absolute; top: -20px; width: 8px; height: 10px; animation: cato-go-fall linear infinite; } @keyframes cato-go-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0.9; } } /* Carte centrale : gradient violet + ombre longue + glow subtil */ .cato-go-card { position: relative; z-index: 2; width: 100%; max-width: 560px; background: linear-gradient(180deg, rgba(45,27,94,0.85) 0%, rgba(26,16,51,0.95) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 0 60px rgba(124,77,255,0.15), inset 0 1px 0 rgba(255,255,255,0.08); } /* Tête : trophée + kicker + titre */ .cato-go-head { position: relative; text-align: center; padding: 40px 36px 28px; border-bottom: 1px solid rgba(255,255,255,0.06); } .cato-go-head::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center top, rgba(255, 184, 77, 0.18), transparent 60%); pointer-events: none; } .cato-go-trophy { width: 80px; height: 80px; margin: 0 auto 20px; position: relative; animation: cato-go-trophy-bob 2.4s ease-in-out infinite; } .cato-go-trophy svg { filter: drop-shadow(0 0 20px rgba(255, 184, 77, 0.5)); } @keyframes cato-go-trophy-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } } .cato-go-kicker { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #5eff9f; margin: 0 0 10px; display: inline-flex; align-items: center; gap: 10px; } .cato-go-kicker::before, .cato-go-kicker::after { content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, transparent, #5eff9f); } .cato-go-kicker::after { background: linear-gradient(90deg, #5eff9f, transparent); } .cato-go-title { font-family: var(--yc-font-display, 'Outfit', 'Inter', sans-serif); font-size: 44px; font-weight: 900; margin: 0; letter-spacing: -0.02em; line-height: 1; background: linear-gradient(180deg, #fff 0%, #d8c3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Bloc score : chiffre géant en gradient rose→violet→cyan + underline néon */ .cato-go-score { position: relative; padding: 32px 36px 24px; text-align: center; } .cato-go-score-label { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: rgba(255,255,255,0.62); text-transform: uppercase; margin-bottom: 12px; } .cato-go-score-value { position: relative; display: inline-block; font-family: var(--yc-font-display, 'Outfit', 'Inter', sans-serif); font-size: 108px; font-weight: 900; line-height: 0.9; background: linear-gradient(135deg, #ff4dcc 0%, #b388ff 45%, #4dd0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } .cato-go-score-value::after { content: ''; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent, #b388ff, transparent); } .cato-go-score-unit { display: block; margin-top: 22px; font-size: 13px; font-family: ui-monospace, 'JetBrains Mono', monospace; letter-spacing: 0.25em; color: rgba(255,255,255,0.62); text-transform: uppercase; } /* Carte impact : rose/violette avec 🐾 et chiffre gradient */ .cato-go-impact { margin: 8px 28px 28px; padding: 22px 24px; background: linear-gradient(135deg, rgba(255, 77, 204, 0.12), rgba(124, 77, 255, 0.08)); border: 1px solid rgba(255, 77, 204, 0.25); border-radius: 20px; display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; } .cato-go-impact::before { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(255, 77, 204, 0.3), transparent 70%); pointer-events: none; } .cato-go-impact-icon { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #ff4dcc, #7c4dff); display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 8px 24px rgba(255, 77, 204, 0.35); position: relative; } .cato-go-impact-body { flex: 1; position: relative; } .cato-go-impact-label { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #ff4dcc; margin-bottom: 4px; font-weight: 700; } .cato-go-impact-value { font-family: var(--yc-font-display, 'Outfit', 'Inter', sans-serif); font-size: 24px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -0.01em; } .cato-go-impact-num { font-size: 30px; background: linear-gradient(90deg, #ff4dcc, #ffb84d); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 6px; } .cato-go-impact-partner { font-size: 12px; color: rgba(255,255,255,0.62); margin-top: 4px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } /* Ligne 2 : "Financé par" + logo RC à droite du texte, centrés verticalement. */ .cato-go-impact-partner-by { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; color: #fff; } .cato-go-impact-partner strong { color: #fff; font-family: var(--yc-font-display, 'Outfit', 'Inter', sans-serif); font-weight: 800; } .cato-go-partner-logo { height: 30px; width: auto; display: block; } .cato-go-partner-logo[hidden] { display: none; } /* Actions : boutons hiérarchisés */ .cato-go-actions { padding: 4px 28px 32px; display: flex; flex-direction: column; gap: 12px; } .cato-go-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border-radius: 14px; font-family: var(--yc-font-sans, 'Inter', system-ui, sans-serif); font-weight: 700; font-size: 15px; cursor: pointer; border: none; min-height: 54px; color: #fff; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } .cato-go-btn:hover { transform: translateY(-2px); } .cato-go-btn:active { transform: translateY(0); } /* Bouton Rejouer game over → composant partagé .yc-play-btn (design-system.css). */ .cato-go-btn--donate { background: linear-gradient(135deg, #ffb84d, #ff6b4d); /* Texte blanc (demande produit) + ombre portée sombre pour compenser le faible contraste AA du blanc sur fond ambre (~2:1). */ color: #fff; text-shadow: 0 1px 2px rgba(60, 20, 0, 0.45); box-shadow: 0 8px 24px rgba(255, 184, 77, 0.3), inset 0 1px 0 rgba(255,255,255,0.35); } /* Force le blanc dans tous les états du lien pour battre design-system `a:hover { color: var(--yc-white) }` (spécificité 0-1-1) et `a { color: var(--yc-violet-light) }`. Sans ça le texte apparaît violet-clair hors hover. */ .cato-go-btn--donate:link, .cato-go-btn--donate:visited, .cato-go-btn--donate:hover, .cato-go-btn--donate:active, .cato-go-btn--donate:focus { color: #fff; } .cato-go-btn--donate:hover { box-shadow: 0 12px 30px rgba(255, 184, 77, 0.45), inset 0 1px 0 rgba(255,255,255,0.35); } .cato-go-btn--ghost { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 14px; font-weight: 600; min-height: 48px; padding: 12px 18px; } .cato-go-btn--ghost:hover { background: rgba(255,255,255,0.09); border-color: #b388ff; } .cato-go-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Partage : icônes circulaires */ .cato-go-share { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 16px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.06); } .cato-go-share-label { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-right: 4px; } .cato-go-share-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; padding: 0; transition: all 180ms ease; } .cato-go-share-icon:hover { background: #7c4dff; border-color: #7c4dff; transform: translateY(-2px); } /* Pied : hint classement (caché par défaut, révélé si rang connu) */ .cato-go-foot { padding: 16px 28px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); } .cato-go-foot[hidden] { display: none; } .cato-go-foot-text { margin: 0; font-size: 12px; color: rgba(255,255,255,0.62); line-height: 1.4; } .cato-go-foot-text strong { color: #fff; } .cato-go-foot-link { background: none; border: none; font-size: 12px; font-weight: 700; color: #b388ff; cursor: pointer; white-space: nowrap; padding: 0; font-family: inherit; } .cato-go-foot-link:hover { color: #fff; } /* Message "partie trop courte" : affiché à la place du footer classement quand durée < minDurationSec. Pas de soumission serveur pour ces parties, donc pas de rang à afficher. Style volontairement sobre + ambre pour signaler un état neutre (pas une erreur). */ .cato-go-too-short { margin: 0; padding: 16px 28px 24px; text-align: center; font-size: 13px; line-height: 1.5; color: #ffd28a; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.18); } .cato-go-too-short[hidden] { display: none; } /* Responsive mobile (iPhone SE et en-dessous) */ @media (max-width: 520px) { .cato-go-score-value { font-size: 84px; } .cato-go-title { font-size: 36px; } .cato-go-head { padding: 32px 24px 24px; } .cato-go-score { padding: 24px 24px 20px; } .cato-go-impact { margin: 8px 20px 24px; padding: 18px 18px; gap: 14px; } .cato-go-actions { padding: 4px 20px 24px; } .cato-go-foot { padding: 14px 20px 18px; } } /* Reduced-motion : on coupe confettis, trophy bob, transitions */ @media (prefers-reduced-motion: reduce) { .cato-go-trophy { animation: none; } .cato-go-confetti { display: none; } .cato-go-btn:hover, .cato-go-share-icon:hover { transform: none; } } /* ============================================================ Écran de lancement — design "arcade intro" (Claude Design 2026-04-22) Même grammaire visuelle que l'écran game over : carte violet + chips partenaire/cause + mécanique impact 2 étapes. Classes cato-intro-*. ============================================================ */ #view-home[hidden] { display: none; } #view-home:not([hidden]) { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; padding: var(--yc-sp-6) var(--yc-sp-4); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-x: hidden; /* flex-direction column nécessaire dès qu'il y a plus d'un enfant (cf. ajout de .cato-challenge-banner au-dessus de .cato-intro-card 2026-05-03). Sans column, les 2 sont placés côte à côte. */ /* Background (gradient, étoiles, grille) mutualisé au niveau body et .cato-bg-stars / .cato-bg-grid (fixed). */ } /* Carte centrale */ .cato-intro-card { position: relative; z-index: 2; width: 100%; max-width: 620px; background: linear-gradient(180deg, rgba(45,27,94,0.85) 0%, rgba(26,16,51,0.95) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 0 60px rgba(124,77,255,0.15), inset 0 1px 0 rgba(255,255,255,0.08); } /* Hero : bannière étoilée + chat cosmonaute + orbit ring */ .cato-intro-hero { position: relative; aspect-ratio: 620/240; overflow: hidden; background: linear-gradient(180deg, #1a0a3d 0%, #3d0a5e 50%, #0a0418 100%); border-bottom: 1px solid rgba(255,255,255,0.08); } .cato-intro-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255, 184, 77, 0.25), transparent 50%), radial-gradient(circle at 20% 70%, rgba(77, 208, 255, 0.2), transparent 50%); } .cato-intro-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff 1px, transparent 1px), radial-gradient(1px 1px at 60% 20%, #fff 1px, transparent 1px), radial-gradient(1.5px 1.5px at 80% 60%, #fff 1px, transparent 1px), radial-gradient(1px 1px at 40% 80%, #fff 1px, transparent 1px), radial-gradient(1px 1px at 90% 40%, #fff 1px, transparent 1px), radial-gradient(1px 1px at 10% 50%, #fff 1px, transparent 1px), radial-gradient(1px 1px at 50% 50%, #fff 1px, transparent 1px); background-size: 300px 200px; opacity: 0.8; } .cato-intro-cat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 160px; height: 160px; z-index: 2; animation: cato-intro-cat-float 3s ease-in-out infinite; } .cato-intro-cat svg { filter: drop-shadow(0 8px 24px rgba(255, 77, 204, 0.4)); } @keyframes cato-intro-cat-float { 0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); } 50% { transform: translate(-50%, -58%) rotate(4deg); } } .cato-intro-orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); width: 280px; height: 280px; border: 1px dashed rgba(255,255,255,0.2); border-radius: 50%; z-index: 1; } .cato-intro-orbit::before, .cato-intro-orbit::after { content: ''; position: absolute; border-radius: 50%; box-shadow: 0 0 12px currentColor; } .cato-intro-orbit::before { width: 10px; height: 10px; top: -5px; left: 50%; background: #ffb84d; color: #ffb84d; } .cato-intro-orbit::after { width: 8px; height: 8px; bottom: 10%; right: 0; background: #4dd0ff; color: #4dd0ff; } /* Chip partenaire (bottom-right du hero intro) : positionnement local uniquement, style chip fourni par .yc-partner (design-system.css). */ .cato-intro-partner { position: absolute; bottom: 20px; right: 20px; z-index: 3; } /* Chip cause (top-right) */ .cato-intro-cause-chip { position: absolute; top: 20px; right: 20px; z-index: 3; padding: 6px 12px; background: rgba(255, 77, 204, 0.12); border: 1px solid rgba(255, 77, 204, 0.35); border-radius: 999px; font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #ff4dcc; font-weight: 700; } /* Body : meta + titre + tagline + mécanique + CTA */ .cato-intro-body { padding: 32px 36px 28px; position: relative; } /* ============================================================ Bandeau défi viral : capsule pill positionnée AU-DESSUS de .cato-intro-card. Visible UNIQUEMENT si l'URL contient un challenge valide (?s=&p=). Rempli + démasqué côté game.js applyChallengeBanner. Hidden par défaut (attribut HTML) pour zéro flash sur arrivants standards. Design (cohérent grammaire CosmoCat) : - Pill rounded full (border-radius 999px) sans background ni border -> laisse le bg gradient violet du body apparaître à travers, rendu plus intégré au fond sombre étoilé - Double layer glow rose/violet pour effet "neon arcade" qui délimite la capsule sans la surcharger - Icône 🔥 légèrement bouncy - Animation d'entrée slide-down + fade-in (0.5s) - Shimmer horizontal lent (4s) pour vivre sans distraire - Centrée horizontalement, max-width pour ne pas s'étirer en desktop Cf. commit 6 OG image 2026-05-03. ============================================================ */ .cato-challenge-banner { display: flex; align-self: center; /* centrage explicite dans #view-home flex-column */ width: fit-content; /* capsule prend la taille du contenu */ align-items: center; gap: 14px; position: relative; margin: 0 0 24px; padding: 14px 26px 14px 22px; max-width: min(620px, calc(100% - 32px)); border-radius: 999px; font-size: 15px; line-height: 1.35; color: #ffffff; text-align: left; box-shadow: 0 0 0 1px rgba(255, 77, 204, 0.30), 0 8px 32px rgba(184, 30, 127, 0.50), 0 4px 16px rgba(94, 43, 199, 0.40); overflow: hidden; animation: cato-challenge-enter 0.55s cubic-bezier(.25, 1.4, .45, 1) both, cato-challenge-glow 3.2s ease-in-out 0.55s infinite; z-index: 5; } .cato-challenge-banner[hidden] { display: none; } .cato-challenge-banner-icon { font-size: 24px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); animation: cato-challenge-icon-bounce 1.8s ease-in-out infinite; } .cato-challenge-banner-text { flex: 1; min-width: 0; } .cato-challenge-banner-text strong { color: #ffffff; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } .cato-challenge-banner-text span { color: rgba(255, 255, 255, 0.95); font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); } /* Shimmer horizontal lent (effet "verre poli" qui balaye la capsule). */ .cato-challenge-banner-shine { position: absolute; top: 0; left: -40%; width: 35%; height: 100%; background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100% ); pointer-events: none; animation: cato-challenge-shine 4s ease-in-out infinite; } @keyframes cato-challenge-enter { from { opacity: 0; transform: translateY(-12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes cato-challenge-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 77, 204, 0.30), 0 8px 32px rgba(184, 30, 127, 0.50), 0 4px 16px rgba(94, 43, 199, 0.40); } 50% { box-shadow: 0 0 0 1px rgba(255, 77, 204, 0.45), 0 12px 40px rgba(184, 30, 127, 0.70), 0 6px 22px rgba(94, 43, 199, 0.55); } } @keyframes cato-challenge-icon-bounce { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(4deg); } } @keyframes cato-challenge-shine { 0% { left: -40%; } 60%, 100% { left: 110%; } } /* Mobile : capsule reste pill mais sans cap, padding réduit, font légèrement plus petit pour rester sur 1 ligne quand possible. */ @media (max-width: 560px) { .cato-challenge-banner { margin: 0 16px 18px; padding: 12px 18px 12px 16px; font-size: 13.5px; gap: 10px; max-width: calc(100% - 32px); } .cato-challenge-banner-icon { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .cato-challenge-banner, .cato-challenge-banner-icon, .cato-challenge-banner-shine { animation: none; } } .cato-intro-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .cato-intro-tag { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #b388ff; font-weight: 700; } .cato-intro-sep { width: 4px; height: 4px; background: rgba(255,255,255,0.25); border-radius: 50%; } .cato-intro-difficulty { display: inline-flex; gap: 3px; align-items: center; font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.62); letter-spacing: 0.05em; } .cato-intro-pip { width: 6px; height: 6px; background: #5eff9f; border-radius: 50%; box-shadow: 0 0 6px #5eff9f; } .cato-intro-pip.off { background: rgba(255,255,255,0.15); box-shadow: none; } .cato-intro-title { font-family: var(--yc-font-display, 'Outfit', 'Inter', sans-serif); font-size: 68px; font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; margin: 10px 0 14px; background: linear-gradient(135deg, #fff 0%, #b388ff 60%, #ff4dcc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cato-intro-tagline { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.88); margin: 0 0 22px; font-weight: 500; max-width: 460px; } /* Mécanique d'impact : composant partagé .yc-impact (design-system.css). Overrides locaux scopés au contexte pour les marges : - Intro (.cato-intro-impact) : margin-top 21px (respiration après CTAs). - Game over (.cato-go-impact-mech) : horizontales 29px pour s'aligner avec la carte impact qui précède (padding horizontal 29px). */ .cato-intro-impact { margin-top: 21px; margin-bottom: 28px; } #view-gameover .cato-go-impact-mech { margin: 0 29px 24px; } .cato-intro-limit { font-size: 12px; color: rgba(255,255,255,0.62); margin: -16px 0 22px; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: ui-monospace, 'JetBrains Mono', monospace; letter-spacing: 0.02em; } .cato-intro-limit svg { flex-shrink: 0; opacity: 0.7; } /* CTA : Jouer primaire (gradient rose/violet + shine) + Classement ghost */ .cato-intro-actions { display: flex; gap: 12px; align-items: stretch; } /* Bouton "Jouer maintenant" → composant partagé .yc-play-btn (design-system.css). Seul le bouton ghost "Classement" reste local. */ .cato-intro-btn--ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 28px; border-radius: 14px; font-family: var(--yc-font-sans, 'Inter', system-ui, sans-serif); font-weight: 600; font-size: 16px; cursor: pointer; min-height: 60px; color: #fff; text-decoration: none; white-space: nowrap; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); } .cato-intro-btn--ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,0.09); border-color: #b388ff; } .cato-intro-btn--ghost:active { transform: translateY(0); } /* Footer : hint contrôles seul (stats déplacées dans le body sous la tagline). Block + text-align:center pour centrer de façon bulletproof l'inline-flex enfant. */ .cato-intro-foot { padding: 14px 36px 18px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); text-align: center; font-size: 12px; color: rgba(255,255,255,0.62); } /* Stats intro/leaderboard : composant partagé .yc-stats (design-system.css), peuplé par YCStats.update(). Plus de style local ici. */ .cato-intro-foot-ctrl { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; } .cato-intro-key { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-bottom-width: 2px; border-radius: 5px; } /* ============================================================ Écran classement — design "arcade classement" (Claude Design 2026-04-24) Hero avec chips partenaire/cause, titre gradient, podium top 3 avec cartouches Game Boy (avatars pixel cat or/argent/bronze), liste rangs 4+ avec avatars initiales, ligne VOUS highlight rose, footer stats + actions. Classes préfixées cato-lb-. ============================================================ */ /* Layout posé directement sur l'id : permet l'override anti-flash `html[data-route="leaderboard"] #view-leaderboard[hidden]` de toucher uniquement le display sans avoir à dupliquer toutes les règles flex. */ #view-leaderboard { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; padding: var(--yc-sp-6) var(--yc-sp-4); display: flex; align-items: flex-start; justify-content: center; overflow-x: hidden; } #view-leaderboard[hidden] { display: none; } /* Carte centrale */ .cato-lb-card { position: relative; z-index: 2; width: 100%; max-width: 720px; background: linear-gradient(180deg, rgba(45,27,94,0.85) 0%, rgba(26,16,51,0.95) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 0 60px rgba(124,77,255,0.15), inset 0 1px 0 rgba(255,255,255,0.08); } /* Hero : bannière étoilée + chips partenaire/cause + titre */ .cato-lb-hero { position: relative; padding: 26px 28px 22px; background: linear-gradient(180deg, #1a0a3d 0%, #3d0a5e 60%, #1a0a3d 100%); border-bottom: 1px solid rgba(255,255,255,0.08); overflow: hidden; } .cato-lb-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255, 184, 77, 0.25), transparent 50%), radial-gradient(circle at 20% 70%, rgba(77, 208, 255, 0.2), transparent 50%); pointer-events: none; } .cato-lb-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff 1px, transparent 1px), radial-gradient(1px 1px at 60% 20%, #fff 1px, transparent 1px), radial-gradient(1.5px 1.5px at 80% 60%, #fff 1px, transparent 1px), radial-gradient(1px 1px at 40% 80%, #fff 1px, transparent 1px), radial-gradient(1px 1px at 90% 40%, #fff 1px, transparent 1px), radial-gradient(1px 1px at 10% 50%, #fff 1px, transparent 1px); background-size: 300px 200px; opacity: 0.7; pointer-events: none; } .cato-lb-head-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; margin-bottom: 0; flex-wrap: wrap; } /* Chip partenaire du leaderboard : style .yc-partner --sm (design-system.css), plus aucune règle locale nécessaire. */ .cato-lb-cause-chip { /* Padding asymétrique (7 haut / 5 bas) + line-height: 1 pour compenser l'absence de descendeurs en uppercase : le texte est optiquement centré. */ display: inline-flex; align-items: center; padding: 7px 12px 5px; line-height: 1; background: rgba(255, 77, 204, 0.12); border: 1px solid rgba(255, 77, 204, 0.35); border-radius: 999px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #ff4dcc; font-weight: 700; } .cato-lb-meta { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .cato-lb-tag { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--yc-violet-light, #b388ff); font-weight: 700; } .cato-lb-sep { width: 4px; height: 4px; background: rgba(255,255,255,0.25); border-radius: 50%; } .cato-lb-live { display: inline-flex; align-items: center; gap: 5px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; color: #5eff9f; letter-spacing: 0.08em; } .cato-lb-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #5eff9f; box-shadow: 0 0 8px #5eff9f; animation: cato-lb-blink 1.6s ease-in-out infinite; } @keyframes cato-lb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .cato-lb-title { position: relative; z-index: 2; font-family: var(--yc-font-display, 'Outfit', 'Inter', sans-serif); font-size: 44px; font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; margin: 4px 0 6px; background: linear-gradient(135deg, #fff 0%, #b388ff 60%, #ff4dcc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cato-lb-subtitle { position: relative; z-index: 2; font-size: 14px; color: rgba(255,255,255,0.8); margin: 0; } /* Empty state */ .cato-lb-empty { padding: 28px 28px 32px; text-align: center; color: rgba(255,255,255,0.72); font-size: 14px; } .cato-lb-empty p { margin: 0; } /* Podium */ .cato-lb-podium-wrap { position: relative; z-index: 2; padding: 8px 20px 28px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.2) 100%); } .cato-lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; margin-top: 20px; } /* Cartouche podium (Game Boy style) */ .cato-lb-pod { position: relative; border-radius: 18px; padding: 14px 12px 16px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(180deg, rgba(26,16,51,0.7) 0%, rgba(10,4,24,0.9) 100%); text-align: center; transition: transform 200ms ease; } .cato-lb-pod[hidden] { display: none; } .cato-lb-pod:hover { transform: translateY(-4px); } /* grid-column ancre chaque pod à sa colonne indépendamment de l'ordre DOM (HTML : 2, 1, 3). Nécessaire pour que si un pod est caché (ex. moins de 3 entrées), les autres gardent leur position visuelle au lieu de se décaler dans les colonnes laissées vides. */ .cato-lb-pod--2 { grid-column: 1 / 2; } .cato-lb-pod--1 { grid-column: 2 / 3; } .cato-lb-pod--3 { grid-column: 3 / 4; } .cato-lb-pod--1 { background: linear-gradient(180deg, rgba(255, 208, 105, 0.18) 0%, rgba(26,16,51,0.9) 100%); border-color: rgba(255, 208, 105, 0.45); box-shadow: 0 0 30px rgba(255, 208, 105, 0.25), inset 0 1px 0 rgba(255,255,255,0.15); padding-top: 20px; padding-bottom: 20px; transform: translateY(-8px); } .cato-lb-pod--2 { background: linear-gradient(180deg, rgba(212, 226, 255, 0.14) 0%, rgba(26,16,51,0.9) 100%); border-color: rgba(212, 226, 255, 0.35); box-shadow: 0 0 20px rgba(212, 226, 255, 0.18); } .cato-lb-pod--3 { background: linear-gradient(180deg, rgba(212, 122, 82, 0.16) 0%, rgba(26,16,51,0.9) 100%); border-color: rgba(212, 122, 82, 0.4); box-shadow: 0 0 20px rgba(212, 122, 82, 0.2); } /* "VOUS" sur le podium : surcouche rose néon pour identifier le joueur courant quand il est rang 1-3, cohérence visuelle avec .cato-lb-row--me sans masquer l'or/argent/bronze positionnel (ajouté par-dessus). */ .cato-lb-pod--me { outline: 2px solid rgba(255, 77, 204, 0.55); outline-offset: -1px; } .cato-lb-pod--me .cato-lb-pod-name { color: #ff4dcc; } /* Médaille / couronne du 1er */ .cato-lb-pod-medal { width: 40px; height: 40px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-family: var(--yc-font-display, 'Outfit', 'Inter', sans-serif); font-weight: 900; font-size: 18px; border-radius: 50%; color: #0a0418; } .cato-lb-pod--1 .cato-lb-pod-medal { background: linear-gradient(135deg, #fff4c4, #ffd069); box-shadow: 0 0 20px rgba(255, 208, 105, 0.6); } .cato-lb-pod--2 .cato-lb-pod-medal { background: linear-gradient(135deg, #fff, #d4e2ff); box-shadow: 0 0 14px rgba(212, 226, 255, 0.5); } .cato-lb-pod--3 .cato-lb-pod-medal { background: linear-gradient(135deg, #ffb88a, #d47a52); box-shadow: 0 0 14px rgba(212, 122, 82, 0.5); } .cato-lb-pod-crown { width: 28px; height: 28px; } /* Avatar (sprite chat pixel art) */ .cato-lb-pod-avatar { width: 72px; height: 72px; margin: 6px auto 8px; border-radius: 18px; background: linear-gradient(135deg, #1a0a3d, #3d0a5e); border: 2px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .cato-lb-pod-avatar svg { width: 64px; height: 64px; } .cato-lb-pod--1 .cato-lb-pod-avatar { border-color: #ffd069; box-shadow: 0 0 18px rgba(255, 208, 105, 0.4), inset 0 0 12px rgba(255, 208, 105, 0.15); } .cato-lb-pod--2 .cato-lb-pod-avatar { border-color: rgba(212, 226, 255, 0.5); } .cato-lb-pod--3 .cato-lb-pod-avatar { border-color: rgba(212, 122, 82, 0.5); } .cato-lb-pod-name { font-family: var(--yc-font-display, 'Outfit', 'Inter', sans-serif); font-weight: 800; font-size: 16px; margin: 2px 0; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cato-lb-pod-score { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; margin-top: 8px; } .cato-lb-pod--1 .cato-lb-pod-score { color: #ffd069; } .cato-lb-pod--2 .cato-lb-pod-score { color: #d4e2ff; } .cato-lb-pod--3 .cato-lb-pod-score { color: #ffb88a; } .cato-lb-pod-score-lab { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 9px; color: rgba(255,255,255,0.62); letter-spacing: 0.15em; text-transform: uppercase; margin-top: 4px; } .cato-lb-pod-meals { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 4px 10px; background: rgba(255, 184, 77, 0.12); border: 1px solid rgba(255, 184, 77, 0.3); border-radius: 999px; font-size: 10px; color: #ffb84d; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; } /* Liste rangs 4+ */ .cato-lb-list-wrap { padding: 18px 28px 8px; } .cato-lb-list-head { display: grid; grid-template-columns: 40px 1fr 90px 100px; gap: 14px; padding: 8px 14px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.62); font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.06); } .cato-lb-list-head .cato-lb-col-meals { text-align: right; } .cato-lb-list-head .cato-lb-col-score { text-align: right; } .cato-lb-list { list-style: none; padding: 8px 0 0; margin: 0; } .cato-lb-row { display: grid; grid-template-columns: 40px 1fr 90px 100px; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 12px; transition: background 160ms ease, transform 160ms ease; } .cato-lb-row + .cato-lb-row { margin-top: 4px; } .cato-lb-row:hover { background: rgba(124, 77, 255, 0.08); transform: translateX(2px); } .cato-lb-row--me { background: linear-gradient(90deg, rgba(255, 77, 204, 0.12), rgba(124, 77, 255, 0.08)); border: 1px solid rgba(255, 77, 204, 0.3); box-shadow: 0 0 14px rgba(255, 77, 204, 0.15); } .cato-lb-row--me:hover { background: linear-gradient(90deg, rgba(255, 77, 204, 0.18), rgba(124, 77, 255, 0.12)); } /* Séparateur visuel entre la dernière ligne visible et la ligne "VOUS" appended quand le joueur courant est hors de la page visible (ex. rang 24 alors qu'on n'affiche que 1-10). Indique au joueur qu'il y a un "saut" de rangs. */ .cato-lb-gap { display: flex; align-items: center; justify-content: center; padding: 8px 0 4px; gap: 6px; color: rgba(255,255,255,0.35); font-size: 14px; letter-spacing: 0.3em; pointer-events: none; } /* Bouton "Voir plus" — pagination client par lots de 10. Ghost full-width sous la liste, apparaît uniquement s'il reste des entrées à afficher. */ .cato-lb-see-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 12px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: rgba(255,255,255,0.85); font-family: var(--yc-font-sans, 'Inter', system-ui, sans-serif); font-weight: 600; font-size: 13px; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, transform 150ms ease; } .cato-lb-see-more[hidden] { display: none; } .cato-lb-see-more:hover { background: rgba(255,255,255,0.08); border-color: rgba(179,136,255,0.4); transform: translateY(-1px); } .cato-lb-rank { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.62); text-align: center; } .cato-lb-player { display: flex; align-items: center; gap: 12px; min-width: 0; } .cato-lb-player-avatar { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #1a0a3d, #3d0a5e); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-family: var(--yc-font-display, 'Outfit', 'Inter', sans-serif); font-weight: 800; font-size: 14px; color: var(--yc-violet-light, #b388ff); flex-shrink: 0; overflow: hidden; } .cato-lb-row--me .cato-lb-player-avatar { background: linear-gradient(135deg, #ff4dcc, #7c4dff); color: #fff; border-color: rgba(255, 77, 204, 0.5); } /* Cœur blanc décalé 1px vers le bas : l'emoji 🤍 est rendu un poil au-dessus du centre visuel dans les fonts système (iOS / Android). translate sur le span, pas sur le conteneur → taille inchangée. */ .cato-lb-me-heart { display: inline-block; transform: translateY(1px); } .cato-lb-player-info { min-width: 0; } .cato-lb-player-name { font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; } .cato-lb-badge-you { padding: 1px 6px; background: rgba(255, 77, 204, 0.15); border: 1px solid rgba(255, 77, 204, 0.4); border-radius: 4px; color: #ff4dcc; font-weight: 700; font-size: 9px; letter-spacing: 0.1em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; } .cato-lb-meals-cell { text-align: right; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: #ffb84d; font-weight: 700; white-space: nowrap; } .cato-lb-meals-cell .cato-lb-meals-lab { color: rgba(255,255,255,0.62); font-weight: 500; margin-left: 2px; font-size: 10px; } .cato-lb-score-cell { text-align: right; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; } .cato-lb-row--me .cato-lb-score-cell { color: #ff4dcc; } /* Stats leaderboard : composant partagé .yc-stats (design-system.css). Override ciblé pour passer au-dessus des pseudo-éléments décoratifs du hero (::before radials, ::after étoiles). */ .cato-lb-hero .yc-stats { position: relative; z-index: 2; } /* Footer : uniquement les actions maintenant que les stats sont dans le hero. justify-content: center → le trio nom-du-jeu / Partager / Rejouer est centré horizontalement (plus équilibré qu'aligné à droite). */ .cato-lb-foot { padding: 14px 28px 18px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.25); display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,0.62); } .cato-lb-actions { display: flex; gap: 10px; flex-wrap: wrap; } .cato-lb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 10px; font-weight: 700; font-size: 13px; font-family: var(--yc-font-sans, 'Inter', system-ui, sans-serif); cursor: pointer; border: none; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; color: #fff; text-decoration: none; white-space: nowrap; } .cato-lb-btn:hover { transform: translateY(-2px); } .cato-lb-btn--primary { background: linear-gradient(135deg, #ff4dcc, #7c4dff); box-shadow: 0 0 24px rgba(255, 77, 204, 0.4), 0 8px 20px rgba(124, 77, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.25); font-weight: 800; position: relative; overflow: hidden; } .cato-lb-btn--primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); animation: cato-lb-shine 3s ease-in-out infinite; } @keyframes cato-lb-shine { 0%, 30% { left: -100%; } 60%, 100% { left: 200%; } } .cato-lb-btn--ghost { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); font-weight: 600; } .cato-lb-btn--ghost:hover { background: rgba(255,255,255,0.09); border-color: var(--yc-violet-light, #b388ff); } /* Responsive mobile : podium en layout horizontal compact (au lieu d'une pile de cartes qui prenaient trop de hauteur). Chaque pod devient une rangée avec médaille + avatar + pseudo à gauche, score + label + badge repas à droite (alignés via grid-template-areas). */ @media (max-width: 640px) { .cato-lb-title { font-size: 34px; } .cato-lb-podium { grid-template-columns: 1fr; gap: 8px; /* max-width + margin auto → podium centré sur la largeur de l'écran, chaque carte ne s'étire plus sur toute la largeur mobile (plus lisible sur grands mobiles et tablettes portrait). */ max-width: 315px; margin: 12px auto 0; } .cato-lb-pod--1, .cato-lb-pod--2, .cato-lb-pod--3 { grid-column: 1 / 2; } .cato-lb-pod--1 { transform: none; order: -1; } .cato-lb-pod--2 { order: 0; } .cato-lb-pod--3 { order: 1; } .cato-lb-pod { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "medal avatar name score" "medal avatar name lab" "medal avatar name meals"; column-gap: 10px; row-gap: 0; align-items: center; text-align: left; padding: 10px 12px; } .cato-lb-pod--1 { padding: 12px; } .cato-lb-pod-medal { grid-area: medal; width: 32px; height: 32px; margin: 0; font-size: 14px; align-self: center; } .cato-lb-pod-crown { width: 22px; height: 22px; } .cato-lb-pod-avatar { grid-area: avatar; width: 52px; height: 52px; margin: 0; border-radius: 12px; } .cato-lb-pod-avatar svg { width: 46px; height: 46px; } .cato-lb-pod-name { grid-area: name; margin: 0; font-size: 15px; align-self: center; min-width: 0; } .cato-lb-pod-score { grid-area: score; margin: 0; font-size: 20px; line-height: 1; text-align: right; align-self: end; } .cato-lb-pod-score-lab { grid-area: lab; margin: 2px 0 0; text-align: right; align-self: start; } .cato-lb-pod-meals { grid-area: meals; justify-self: end; margin: 4px 0 0; padding: 3px 8px; font-size: 9px; } .cato-lb-list-head, .cato-lb-row { grid-template-columns: 32px 1fr 70px 80px; gap: 10px; padding: 10px 8px; } .cato-lb-list-wrap { padding: 14px 16px 4px; } .cato-lb-hero { padding: 20px 20px 16px; } .cato-lb-foot { padding: 14px 16px 16px; flex-direction: column; align-items: stretch; } .cato-lb-actions { justify-content: space-between; } .cato-lb-actions .cato-lb-btn { flex: 1; padding: 12px 10px; font-size: 12px; } .cato-lb-head-row { gap: 8px; } .cato-lb-partner { font-size: 11px; padding: 6px 12px; } } @media (prefers-reduced-motion: reduce) { .cato-lb-live::before { animation: none; } .cato-lb-btn--primary::before { display: none; } .cato-lb-row:hover { transform: none; } .cato-lb-pod:hover { transform: none; } .cato-lb-pod--1 { transform: translateY(-8px); } } /* ============================================================ Animations d'apparition du leaderboard — déclenchées par .is-fresh posée sur #view-leaderboard à chaque ouverture / rebuild. La carte slide-up, le podium révèle 3→2→1 (rang 1 finit en dernier, effet "couronnement"), les rangs 4+ cascadent depuis la droite. Cohérent avec le count-up des scores (animateScore côté game.js). ============================================================ */ @keyframes cato-lb-card-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes cato-lb-pod-rise { from { opacity: 0; transform: translateY(36px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Pod 1 garde son translateY(-8px) à l'arrivée (surélevé). */ @keyframes cato-lb-pod1-rise { from { opacity: 0; transform: translateY(28px) scale(0.92); } to { opacity: 1; transform: translateY(-8px) scale(1); } } @keyframes cato-lb-row-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes cato-lb-soft-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #view-leaderboard.is-fresh .cato-lb-card { animation: cato-lb-card-rise 540ms cubic-bezier(0.22, 1, 0.36, 1) both; } #view-leaderboard.is-fresh .cato-lb-pod { animation: cato-lb-pod-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both; } #view-leaderboard.is-fresh .cato-lb-pod--3 { animation-delay: 240ms; } #view-leaderboard.is-fresh .cato-lb-pod--2 { animation-delay: 360ms; } #view-leaderboard.is-fresh .cato-lb-pod--1 { animation-name: cato-lb-pod1-rise; animation-delay: 480ms; animation-duration: 720ms; } #view-leaderboard.is-fresh .cato-lb-list-head { animation: cato-lb-soft-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 380ms; } #view-leaderboard.is-fresh .cato-lb-row { animation: cato-lb-row-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both; } #view-leaderboard.is-fresh .cato-lb-row:nth-child(1) { animation-delay: 440ms; } #view-leaderboard.is-fresh .cato-lb-row:nth-child(2) { animation-delay: 485ms; } #view-leaderboard.is-fresh .cato-lb-row:nth-child(3) { animation-delay: 530ms; } #view-leaderboard.is-fresh .cato-lb-row:nth-child(4) { animation-delay: 575ms; } #view-leaderboard.is-fresh .cato-lb-row:nth-child(5) { animation-delay: 620ms; } #view-leaderboard.is-fresh .cato-lb-row:nth-child(6) { animation-delay: 665ms; } #view-leaderboard.is-fresh .cato-lb-row:nth-child(7) { animation-delay: 710ms; } #view-leaderboard.is-fresh .cato-lb-row:nth-child(n+8) { animation-delay: 755ms; } #view-leaderboard.is-fresh .cato-lb-foot { animation: cato-lb-soft-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 560ms; } #view-leaderboard.is-fresh .cato-lb-empty { animation: cato-lb-soft-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 240ms; } @media (prefers-reduced-motion: reduce) { #view-leaderboard.is-fresh .cato-lb-card, #view-leaderboard.is-fresh .cato-lb-pod, #view-leaderboard.is-fresh .cato-lb-pod--1, #view-leaderboard.is-fresh .cato-lb-list-head, #view-leaderboard.is-fresh .cato-lb-row, #view-leaderboard.is-fresh .cato-lb-foot, #view-leaderboard.is-fresh .cato-lb-empty { animation: none; } } @media (max-width: 560px) { .cato-intro-hero { aspect-ratio: 16/10; } .cato-intro-cat { width: 130px; height: 130px; } .cato-intro-orbit { width: 220px; height: 220px; } .cato-intro-title { font-size: 52px; } .cato-intro-body { padding: 24px 22px 22px; } .cato-intro-foot { padding: 12px 22px 14px; } .cato-intro-actions { flex-direction: column; } .cato-intro-btn { min-height: 54px; } /* Mobile mechanic : géré par le composant partagé .yc-impact (design-system.css @media max-width: 640px). */ .cato-intro-partner { font-size: 12px; padding: 6px 14px 6px 8px; } .cato-intro-paw { width: 24px; height: 24px; } } /* Reduced motion : coupe twinkle, cat float. Le bouton .yc-play-btn gère son propre reduced-motion via le composant partagé (design-system.css). */ @media (prefers-reduced-motion: reduce) { .cato-bg-stars { display: none; } .cato-intro-cat { animation: none; } .cato-intro-btn--ghost:hover { transform: none; } }