/* ============================================================================= CHARTE GRAPHIQUE — Bloomji ============================================================================= Règles à respecter pour TOUTE nouvelle page/composant à partir d'aujourd'hui : 1. Rayon des coins : toujours var(--radius) (16px), sauf les "chips" pilule (badges score/pièces) qui sont intentionnellement en plein arrondi (999px) — c'est une forme différente, pas une exception à la règle. 2. Ombres : toujours var(--shadow-soft). Jamais de noir pur, jamais d'ombre dure. Une seule ombre de référence pour tout le jeu. 3. Police : une seule famille, var(--font-family), partout (titres et texte courant — seule la graisse change, jamais la famille). 4. Animations : 200 à 300ms pour toute animation de RÉPONSE à une action (clic, apparition, disparition). Jamais plus de 500ms, même pour les animations "ambiance" continues (halo, respiration de la tuile spéciale) qui ne sont pas des réponses directes mais restent bornées. ========================================================================= */ :root { /* --- Rayon & ombre (référence unique, ne pas dupliquer ailleurs) --- */ --radius: 16px; --radius-pill: 999px; --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-soft-lg: 0 4px 16px rgba(0, 0, 0, 0.08); /* --- Police (change uniquement ici pour tester une autre famille) --- */ --font-family: 'Nunito', sans-serif; /* --- Durées d'animation --- */ --duration-fast: 200ms; --duration-base: 250ms; --duration-max: 300ms; --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1); /* --- Fond : dégradé doux bleu pastel → lavande → blanc cassé --- */ --bg-grad-start: #bfd7f5; --bg-grad-mid: #dcc9f0; --bg-grad-end: #fbf8f4; /* --- Surfaces --- */ --card-bg: #fffdfb; --panel-bg: #f5f1fb; /* --- Texte --- */ --text-main: #4a4560; --text-dim: #8b85a3; --text-on-accent: #3a3550; /* --- Accents pastel (jamais de rouge vif, jamais de couleurs saturées) --- */ --accent-mint: #a8d8c9; /* action principale (Jouer, Continuer...) */ --accent-mint-deep: #7ec3ae; --accent-lavender: #cdbdf0; /* actions secondaires */ --accent-peach: #f7c9b8; /* mises en avant, records */ --accent-sky: #b8d4f0; /* niveau, progression */ --accent-yellow: #f5e0a8; /* pièces */ --accent-pink: #f3c9dc; /* alertes douces (jamais de rouge) */ } /* --- Variantes saisonnières du fond (activées via une classe sur , posée automatiquement selon la date — voir main.js) --- */ body.season-spring { --bg-grad-start:#cdeecb; --bg-grad-mid:#dcc9f0; --bg-grad-end:#fbf8f4; } body.season-summer { --bg-grad-start:#bfe3f5; --bg-grad-mid:#cdeecb; --bg-grad-end:#fdf8ec; } body.season-autumn { --bg-grad-start:#f0d9b8; --bg-grad-mid:#f0c0a8; --bg-grad-end:#fbf3ec; } body.season-winter { --bg-grad-start:#bfd7f5; --bg-grad-mid:#dcc9f0; --bg-grad-end:#fbf8f4; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: linear-gradient(160deg, var(--bg-grad-start) 0%, var(--bg-grad-mid) 45%, var(--bg-grad-end) 100%); background-attachment: fixed; font-family: var(--font-family); color: var(--text-main); overflow: hidden; -webkit-tap-highlight-color: transparent; } #app { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100%; padding: 18px 12px 28px; } h1 { font-family: var(--font-family); font-weight: 800; font-size: clamp(28px, 7vw, 42px); margin: 0; letter-spacing: 0.3px; color: var(--text-main); line-height: 1.1; text-align: center; } h2 { font-family: var(--font-family); font-weight: 800; font-size: 22px; margin: 0 0 10px; color: var(--text-main); } .subtitle { font-size: 13px; color: var(--text-dim); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; text-align: center; } /* --- Écrans --- */ .screen { display: none; width: 100%; flex-direction: column; align-items: center; } .screen.active { display: flex; } .hidden { display: none !important; } /* --- Chips (pilules) : coins/record/niveau — forme délibérément différente --- */ .home-stats { display: flex; gap: 10px; margin: 14px 0 4px; } .pill { background: var(--card-bg); box-shadow: var(--shadow-soft); border-radius: var(--radius-pill); padding: 6px 14px; font-weight: 800; font-size: 14px; color: var(--text-main); } .lives-box { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 18px; } .lives-hearts { font-size: 20px; letter-spacing: 2px; } .lives-hearts .heart.empty { opacity: 0.3; } .lives-timer { font-size: 12px; color: var(--text-dim); font-weight: 700; } /* --- Boutons : arrondis, pastel, ombre légère, jamais de rouge --- */ .btn { font-family: var(--font-family); font-weight: 800; font-size: 15px; border: none; border-radius: var(--radius); padding: 12px 28px; cursor: pointer; color: var(--text-on-accent); box-shadow: var(--shadow-soft); transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .btn:active { transform: translateY(1px) scale(0.98); box-shadow: var(--shadow-soft); } .btn-primary { background: var(--accent-mint); font-size: 18px; padding: 14px 46px; } .btn-secondary { background: var(--card-bg); color: var(--text-main); } .btn-ghost { color: var(--text-dim); background: transparent; box-shadow: none; margin-top: 16px; } .home-menu-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; } .pseudo-input { background: var(--card-bg); box-shadow: var(--shadow-soft); border: none; color: var(--text-main); border-radius: var(--radius); padding: 9px 14px; font-family: var(--font-family); font-weight: 700; font-size: 14px; text-align: center; width: 200px; margin-top: 16px; } .mock-ad { margin-top: 20px; font-size: 11px; color: var(--text-dim); background: var(--panel-bg); border-radius: var(--radius); padding: 8px 14px; max-width: 280px; text-align: center; } /* --- Cartes (boutique, niveaux, classement...) : flottantes, blanc cassé --- */ .shop-list { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; margin: 14px 0; overflow-y: auto; max-height: 60vh; } .shop-item { background: var(--card-bg); box-shadow: var(--shadow-soft); border-radius: var(--radius); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .shop-item .info { text-align: left; } .shop-item .info .name { font-weight: 800; font-size: 15px; color: var(--text-main); } .shop-item .info .desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; } .shop-item button { font-family: var(--font-family); font-weight: 800; font-size: 13px; border: none; border-radius: var(--radius); padding: 8px 14px; cursor: pointer; background: var(--accent-yellow); color: var(--text-on-accent); white-space: nowrap; transition: transform var(--duration-fast) var(--ease-standard); } .shop-item button:active { transform: scale(0.96); } .shop-item button:disabled { opacity: 0.35; cursor: not-allowed; } .shop-item button.owned { background: var(--accent-mint); } /* --- Classement --- */ .leaderboard-tabs { display: flex; gap: 6px; margin: 12px 0 10px; flex-wrap: wrap; justify-content: center; } .tab-btn { font-family: var(--font-family); font-weight: 800; font-size: 12px; border: none; background: var(--card-bg); color: var(--text-dim); box-shadow: var(--shadow-soft); border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .tab-btn.active { background: var(--accent-mint); color: var(--text-on-accent); } #level-select-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--text-dim); } #level-select { background: var(--card-bg); color: var(--text-main); box-shadow: var(--shadow-soft); border: none; border-radius: var(--radius); padding: 5px 10px; font-family: var(--font-family); font-weight: 700; } .leaderboard-note { font-size: 11px; color: var(--text-dim); max-width: 320px; text-align: center; margin-bottom: 12px; } .leaderboard-list { list-style: none; padding: 0; margin: 0; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; } .leaderboard-list li { display: flex; justify-content: space-between; background: var(--card-bg); box-shadow: var(--shadow-soft); border-radius: var(--radius); padding: 8px 14px; font-weight: 700; font-size: 14px; } .leaderboard-empty { color: var(--text-dim); font-size: 13px; font-weight: 600; } /* --- Réglages --- */ .settings-list { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; margin: 14px 0 20px; } .settings-row { display: flex; justify-content: space-between; align-items: center; background: var(--card-bg); box-shadow: var(--shadow-soft); border-radius: var(--radius); padding: 12px 16px; font-weight: 700; font-size: 14px; } .toggle-btn { font-family: var(--font-family); font-weight: 800; font-size: 12px; border: none; border-radius: var(--radius-pill); padding: 6px 16px; cursor: pointer; background: var(--accent-mint); color: var(--text-on-accent); min-width: 48px; transition: background var(--duration-fast) var(--ease-standard); } .toggle-btn.off { background: var(--panel-bg); color: var(--text-dim); } /* --- Overlays de fin de niveau (célébration / pub) --- */ .game-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(74, 69, 96, 0.28); /* voile doux, jamais de noir opaque */ border-radius: var(--radius); z-index: 20; } .overlay-card { background: var(--card-bg); border-radius: var(--radius); padding: 28px 26px; max-width: 280px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow-soft-lg); } .celebrate-emoji { font-size: 48px; animation: celebrate-pop 450ms var(--ease-standard); } @keyframes celebrate-pop { 0% { transform: scale(0) rotate(-10deg); } 65% { transform: scale(1.15) rotate(5deg); } 100% { transform: scale(1) rotate(0deg); } } .overlay-title { font-family: var(--font-family); font-weight: 800; font-size: 20px; color: var(--text-main); } .overlay-sub { font-size: 12px; color: var(--text-dim); line-height: 1.5; } .overlay-btn-row { display: flex; gap: 10px; margin-top: 6px; } .overlay-btn-row .btn { padding: 12px 20px; font-size: 14px; } .defeat-emoji { font-size: 44px; animation: defeat-pop 450ms var(--ease-standard); } @keyframes defeat-pop { 0% { transform: scale(0.5) rotate(0deg); opacity: 0; } 40% { transform: scale(1.1) rotate(-8deg); opacity: 1; } 65% { transform: scale(1) rotate(8deg); } 100% { transform: scale(1) rotate(0deg); } } .life-lost { font-weight: 800; font-size: 15px; color: var(--accent-pink); animation: life-lost-pulse 300ms var(--ease-standard); } @keyframes life-lost-pulse { 0% { transform: scale(1); opacity: 0; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } #defeat-coins-balance { font-size: 11px; margin-top: -6px; } #btn-defeat-buy-moves:disabled { opacity: 0.4; cursor: not-allowed; } /* --- Écran de jeu --- */ #screen-game { position: relative; width: 100%; } #btn-menu { position: absolute; left: 14px; top: 4px; background: var(--card-bg); box-shadow: var(--shadow-soft); border: none; color: var(--text-main); border-radius: var(--radius); width: 34px; height: 34px; font-size: 16px; cursor: pointer; } #btn-game-settings { position: absolute; right: 14px; top: 4px; background: var(--card-bg); box-shadow: var(--shadow-soft); border: none; color: var(--text-main); border-radius: var(--radius); width: 34px; height: 34px; font-size: 16px; cursor: pointer; } #hud { width: 100%; max-width: 520px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; margin: 48px 0 10px; } .stat { background: var(--card-bg); box-shadow: var(--shadow-soft); border-radius: var(--radius); padding: 8px 14px; min-width: 74px; text-align: center; } .stat .label { font-family: var(--font-family); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; } .stat .value { font-size: 22px; font-weight: 800; margin-top: 2px; color: var(--text-main); } #score .value { color: var(--accent-mint-deep); } #best .value { color: var(--text-main); } #level .value { color: var(--text-main); transition: transform var(--duration-base) var(--ease-standard); } #level.level-flash .value { transform: scale(1.3); } #game-container { border-radius: var(--radius); padding: 10px; background: var(--card-bg); box-shadow: var(--shadow-soft-lg); overflow: hidden; transform-origin: top center; } #restart { font-family: var(--font-family); font-size: 15px; font-weight: 800; color: var(--text-on-accent); background: var(--accent-mint); border: none; border-radius: var(--radius); padding: 10px 26px; cursor: pointer; box-shadow: var(--shadow-soft); transition: transform var(--duration-fast) var(--ease-standard); } #restart:active { transform: translateY(1px) scale(0.98); } #message { margin-top: 10px; min-height: 20px; font-weight: 700; color: var(--text-main); font-size: 14px; text-align: center; transition: opacity var(--duration-base) var(--ease-standard); } #level-name { font-size: 13px; font-weight: 800; color: var(--text-dim); margin: -4px 0 6px; text-align: center; min-height: 16px; } #move-score { min-height: 19px; margin: 2px 0 4px; color: var(--accent-mint-deep); font-size: 14px; font-weight: 800; text-align: center; opacity: 0; transform: translateY(3px) scale(0.92); transition: opacity 180ms ease, transform 260ms var(--ease-standard); } #move-score.visible { opacity: 1; transform: translateY(0) scale(1); } .game-settings-card { min-width: min(320px, 88vw); } .compact-settings { margin-bottom: 14px; } #objective { background: var(--panel-bg); color: var(--text-main); font-weight: 700; font-size: 13px; padding: 6px 16px; border-radius: var(--radius-pill); margin-bottom: 4px; text-align: center; } #leaderboard-status { font-size: 12px; color: var(--text-dim); font-weight: 700; min-height: 16px; text-align: center; } /* --- Carte du monde --- */ #worldmap-viewport { position: relative; width: 100%; max-width: 420px; height: 62vh; margin: 10px 0 16px; border-radius: var(--radius); background: linear-gradient(180deg, #f3f8ee 0%, #edf5e8 100%); box-shadow: var(--shadow-soft-lg); overflow: hidden; /* clippe proprement le contenu aux coins arrondis */ } #worldmap-scroll { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; /* Scrollbar native masquée : le glissement tactile/souris reste actif, seul l'indicateur visuel change (voir les fondus ci-dessous). */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Edge historique */ } #worldmap-scroll::-webkit-scrollbar { display: none; /* Chrome / Safari / Edge Chromium */ } /* Fondus haut/bas : signalent qu'il y a du contenu à faire défiler sans afficher de barre de scroll classique. Fixes (hors de la zone qui défile), non interactifs. */ #worldmap-fade-top, #worldmap-fade-bottom { position: absolute; left: 0; right: 0; height: 26px; pointer-events: none; z-index: 5; } #worldmap-fade-top { top: 0; background: linear-gradient(180deg, #f3f8ee 0%, rgba(243, 248, 238, 0) 100%); } #worldmap-fade-bottom { bottom: 0; background: linear-gradient(0deg, #edf5e8 0%, rgba(237, 245, 232, 0) 100%); } #worldmap-canvas { position: relative; width: 100%; min-height: 600px; } #worldmap-decor { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; will-change: transform; } .worldmap-decor-item { position: absolute; line-height: 1; user-select: none; pointer-events: none; filter: grayscale(0.15); } #worldmap-paths { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .worldmap-path { fill: none; stroke: var(--accent-lavender); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1.5 3.5; opacity: 0.7; vector-effect: non-scaling-stroke; } .worldmap-node { position: absolute; z-index: 2; transform: translate(-50%, -50%); width: 52px; height: 62px; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-family); font-weight: 800; background: transparent; color: var(--text-main); cursor: pointer; transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); } .worldmap-node:active { transform: translate(-50%, -50%) scale(0.92); } .worldmap-node.locked { opacity: 0.55; cursor: not-allowed; } .worldmap-node.boss { width: 64px; height: 72px; } .node-emblem { position: relative; z-index: 1; display: block; font-size: 31px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(87, 105, 83, 0.12)); } .worldmap-node.boss .node-emblem { font-size: 38px; } .node-flower { animation: flower-bloom 8s ease-in-out infinite; animation-delay: calc(var(--node-index) * -0.35s); } .node-bud { animation: bud-breathe 4.5s ease-in-out infinite; } .node-lock { filter: grayscale(0.45) opacity(0.8); } .node-number { position: absolute; top: calc(50% + 18px); left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; color: var(--text-dim); white-space: nowrap; } .node-leaf { position: absolute; z-index: 0; top: 9px; right: 1px; font-size: 15px; opacity: 0.55; transform-origin: left center; animation: leaf-sway var(--wind-duration, 7s) ease-in-out infinite; } .node-particle { position: absolute; z-index: 2; top: 3px; right: 1px; font-size: 12px; opacity: 0; pointer-events: none; animation: particle-float var(--particle-duration, 6.5s) ease-in-out infinite; animation-delay: calc(var(--node-index) * -0.8s); } @keyframes flower-bloom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045) rotate(1deg); } } @keyframes bud-breathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.055) translateY(-1px); } } @keyframes leaf-sway { 0%, 100% { transform: rotate(-7deg) translateX(0); } 50% { transform: rotate(8deg) translateX(2px); } } @keyframes particle-float { 0%, 18%, 100% { opacity: 0; transform: translate(0, 3px) scale(0.8); } 52% { opacity: var(--particle-opacity, 0.35); transform: translate(3px, -6px) scale(1); } } /* Élément ambiant qui traverse le cadre visible (feuille/abeille/papillon, voir "ambient" dans world.json) — une seule traversée toutes les ~15 secondes, discrète, jamais plus d'un élément à la fois. */ .worldmap-ambient-item { position: absolute; z-index: 6; font-size: 20px; opacity: 0; pointer-events: none; animation: ambient-cross linear forwards; animation-duration: var(--ambient-duration, 6s); } @keyframes ambient-cross { 0% { left: -8%; top: var(--start-y); opacity: 0; } 10% { opacity: 0.8; } 50% { top: var(--end-y); } 90% { opacity: 0.8; } 100% { left: 108%; top: var(--start-y); opacity: 0; } }