:root { --ink: #2c2c2c; --accent: #6c5ce7; --accent-light: #a29bfe; --correct: #00b894; --incorrect: #e17055; --bg: #f8f7ff; --card: #ffffff; --card-border: #e8e6f0; --shadow: 0 2px 12px rgba(108,92,231,0.08); --shadow-lg: 0 8px 30px rgba(108,92,231,0.12); --xp-bar: #fdcb6e; --streak: #e17055; --radius: 16px; --radius-sm: 10px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: 'Heebo', sans-serif; min-height: 100dvh; display: flex; justify-content: center; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Direction follows so the i18n harness can flip it at runtime without a reload. Defaults match Hebrew (RTL); FR/EN inherit LTR. */ html { direction: rtl; } html[dir="ltr"] { direction: ltr; } /* Hero logo for the entry/welcome screen — big and centered, sits above the welcome headline. The PNG already includes the "KefiKids" wordmark, so no text repetition needed below. */ .brand-hero { display: block; width: 220px; max-width: 60%; height: auto; margin: 0 auto; cursor: pointer; } .brand-hero-link { display: block; line-height: 0; } /* The brand block keeps the logo, "Bienvenue" headline and support line tightly packed (no flex `gap` between them). The whole block then acts as a single child of .profile-screen — the screen's 2rem gap pushes the email form *below* it, not internally. */ .brand-block { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .brand-block .profile-subtitle { margin-top: 0.1rem; } .brand-block__support { background: none; border: none; color: #888; font-size: 0.78rem; line-height: 1.4; cursor: pointer; padding: 0.3rem 0.5rem 0; font-family: inherit; margin-top: 0.3rem; } .brand-block__support u { text-decoration: underline; } /* Floating back-to-home button on entry screens — top-left so it doesn't collide with the lang picker (top-right). */ .back-home { position: absolute; top: 0.6rem; inset-inline-start: 0.6rem; background: #fff; border: 1px solid var(--card-border); color: #666; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; z-index: 5; } .back-home:hover { color: var(--accent); border-color: var(--accent); } /* Floating language picker — same physical position regardless of RTL/LTR. */ .lang-picker { position: absolute; top: 0.6rem; inset-inline-end: 0.6rem; display: flex; gap: 0.3rem; z-index: 5; } .lang-pill { background: #fff; border: 1px solid var(--card-border); color: #666; padding: 0.3rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; } .lang-pill--on { background: var(--accent); color: #fff; border-color: var(--accent); } #app { width: 100%; max-width: 480px; min-height: 100dvh; position: relative; } h1 { font-family: 'Secular One', sans-serif; font-size: 1.8rem; } h2 { font-family: 'Secular One', sans-serif; font-size: 1.5rem; } h3 { font-family: 'Secular One', sans-serif; font-size: 1.2rem; } .screen { min-height: 100dvh; padding: 1.25rem; display: flex; flex-direction: column; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } @keyframes glow { 0%,100% { box-shadow: 0 0 5px var(--accent-light); } 50% { box-shadow: 0 0 20px var(--accent-light); } } /* === BUTTONS === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1.5rem; border: 2px solid var(--card-border); border-radius: 50px; background: var(--card); color: var(--ink); font-family: 'Heebo', sans-serif; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; user-select: none; } .btn:active { transform: scale(0.96); } .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--primary:active { background: #5b4bd6; } .btn--correct { background: var(--correct); border-color: var(--correct); color: #fff; } .btn--incorrect { background: var(--incorrect); border-color: var(--incorrect); color: #fff; } .btn--disabled { opacity: 0.35; pointer-events: none; } .btn--full { width: 100%; } .btn--big { padding: 1rem 2rem; font-size: 1.2rem; } .btn--icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 1.3rem; } /* === CARDS === */ .card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 0.75rem; } /* === PROFILE SELECT === */ .profile-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 2rem; text-align: center; } .profile-title { font-family: 'Secular One', sans-serif; font-size: 2rem; color: var(--accent); } .profile-subtitle { color: #888; font-size: 1.1rem; } .profile-grid { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .profile-card { background: var(--card); border: 3px solid var(--card-border); border-radius: 20px; padding: 1.5rem 1.25rem; width: 130px; text-align: center; cursor: pointer; transition: all 0.2s; box-shadow: var(--shadow); } .profile-card:active { transform: scale(0.95); } .profile-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); } .profile-card__avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 0.75rem; color: #fff; } .profile-card__name { font-family: 'Secular One', sans-serif; font-size: 1.3rem; margin-bottom: 0.25rem; } .profile-card__age { font-size: 0.9rem; color: #888; } .profile-card__level { font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-top: 0.25rem; } /* === GAME HEADER === */ .game-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--card-border); } .game-header__title { font-family: 'Secular One', sans-serif; font-size: 1.15rem; } .game-header__timer { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); direction: ltr; } .game-header__back { background: none; border: none; font-size: 1.4rem; cursor: pointer; padding: 0.25rem; color: var(--ink); -webkit-tap-highlight-color: transparent; } .game-header__info { font-size: 0.9rem; color: #888; } /* === HUB === */ .hub-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .hub-profile { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; } .hub-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; } .hub-name { font-weight: 700; font-size: 1.05rem; } .hub-level { font-size: 0.8rem; color: var(--accent); font-weight: 600; } .hub-date { text-align: center; font-size: 0.9rem; color: #888; margin-bottom: 0.5rem; } /* XP Bar */ .xp-bar-wrap { background: var(--card-border); border-radius: 50px; height: 22px; position: relative; overflow: hidden; margin-bottom: 1rem; } .xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 50px; transition: width 0.5s ease; min-width: 2px; } .xp-bar-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.7rem; font-weight: 700; color: var(--ink); } /* Streak */ .streak-badge { display: inline-flex; align-items: center; gap: 0.3rem; background: #fff3e0; color: var(--streak); padding: 0.3rem 0.7rem; border-radius: 50px; font-size: 0.85rem; font-weight: 700; } /* Section title */ .section-title { font-family: 'Secular One', sans-serif; font-size: 1.1rem; margin: 1rem 0 0.5rem; color: var(--ink); } /* Daily session card */ .daily-card { background: linear-gradient(135deg, var(--accent), #a29bfe); border: none; border-radius: var(--radius); padding: 1.25rem; color: #fff; cursor: pointer; transition: transform 0.2s; box-shadow: var(--shadow-lg); margin-bottom: 1rem; } .daily-card:active { transform: scale(0.98); } .daily-card h3 { color: #fff; font-size: 1.2rem; margin-bottom: 0.3rem; } .daily-card p { opacity: 0.9; font-size: 0.95rem; } /* Game grid */ .game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .game-card { background: var(--card); border: 2px solid var(--card-border); border-radius: var(--radius); padding: 1rem 0.75rem; text-align: center; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; } .game-card:active { transform: scale(0.97); } .game-card:hover { border-color: var(--accent-light); } .game-card--done { border-color: var(--correct); background: #f0fff4; } .game-card__icon { font-size: 1.8rem; margin-bottom: 0.25rem; line-height: 1; } .game-card__name { font-size: 0.95rem; font-weight: 600; line-height: 1.2; } .game-card__score { font-size: 0.8rem; color: #999; margin-top: 0.15rem; direction: ltr; } .game-card__category { font-size: 0.65rem; color: var(--accent); font-weight: 600; margin-top: 0.15rem; text-transform: uppercase; } /* Hub bottom */ .hub-bottom { margin-top: auto; display: flex; gap: 0.6rem; padding-top: 1rem; } .hub-bottom .btn { flex: 1; } /* === TTS button === */ .tts-btn { background: var(--accent); border: none; border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; cursor: pointer; color: #fff; box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4); -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .tts-btn:active { transform: scale(0.9); } /* Validate button (mobile-friendly submit for typed answers) */ .exercise-go { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1rem; padding: 0.7rem 2.2rem; background: var(--correct); color: #fff; border: none; border-radius: 16px; font-size: 1.4rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 184, 148, 0.35); -webkit-tap-highlight-color: transparent; } .exercise-go:active { transform: scale(0.95); } /* Anagram tappable letters */ .anagram-tiles { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; } .anagram-tile { width: 54px; height: 54px; border-radius: 12px; background: var(--accent); color: #fff; border: none; font-family: 'Secular One', sans-serif; font-size: 1.6rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .anagram-tile:active { transform: scale(0.9); } .anagram-back { width: 54px; height: 54px; border-radius: 12px; background: var(--card); border: 2px solid var(--card-border); font-size: 1.4rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .anagram-back:active { transform: scale(0.92); } .anagram-clue { font-size: 3.5rem; text-align: center; width: 100%; } /* Hints / QCM */ .hint-btn { background: #ffd166; border: none; border-radius: 50%; width: 56px; height: 56px; font-size: 1.7rem; cursor: pointer; margin-top: 1.2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -webkit-tap-highlight-color: transparent; } .hint-btn:active { transform: scale(0.92); } .hint-panel { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; align-items: center; margin-top: 1rem; } .hint-choice { background: var(--card); border: 2px solid var(--accent); color: var(--accent); border-radius: 14px; padding: 0.7rem 1.3rem; font-size: 1.5rem; font-weight: 700; cursor: pointer; min-width: 64px; -webkit-tap-highlight-color: transparent; } .hint-choice:active { transform: scale(0.95); } .hint-aid { width: 100%; text-align: center; color: #888; font-size: 1.1rem; margin-top: 0.4rem; direction: ltr; } /* Confetti */ .confetti-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9999; } .confetti-piece { position: absolute; top: -24px; width: 10px; height: 14px; opacity: 0.95; animation: confetti-fall linear forwards; } @keyframes confetti-fall { 0% { transform: translateY(-24px) translateX(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) translateX(calc(var(--x) * 140px)) rotate(720deg); opacity: 0.9; } } /* Daily-complete celebration */ .daily-stats { display: flex; gap: 1.2rem; justify-content: center; margin: 1rem 0 0.5rem; font-size: 1.2rem; font-weight: 700; } .daily-stats span { font-weight: 400; } .daily-goal { margin: 0.6rem 0 0.2rem; color: var(--accent); font-weight: 600; } .daily-goal--done { color: var(--correct); } /* Sorting game */ .sort-item { font-size: 5rem; text-align: center; margin: 1.5rem 0 2rem; line-height: 1; animation: pop-in 0.25s ease; } @keyframes pop-in { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .sort-buckets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; max-width: 420px; margin: 0 auto; } .sort-bucket { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1rem 0.5rem; border: 3px solid var(--card-border); border-radius: 16px; background: var(--card); cursor: pointer; transition: transform 0.1s, border-color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .sort-bucket:active { transform: scale(0.96); } .sort-bucket__emoji { font-size: 2.2rem; line-height: 1; } .sort-bucket__name { font-size: 1.05rem; font-weight: 700; color: var(--ink); } .sort-bucket--correct { border-color: var(--correct); background: rgba(0, 184, 148, 0.12); } .sort-bucket--wrong { border-color: var(--incorrect); background: rgba(225, 112, 85, 0.12); } /* Emotional check-in */ .checkin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; min-height: 60vh; text-align: center; padding: 1rem; } .checkin__q { display: flex; align-items: center; gap: 0.6rem; font-size: 1.5rem; font-weight: 700; flex-wrap: wrap; justify-content: center; } .mood-row { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } .mood-face { font-size: 2.6rem; width: 64px; height: 64px; border: 3px solid var(--card-border); border-radius: 50%; background: var(--card); cursor: pointer; transition: transform 0.1s, border-color 0.15s; -webkit-tap-highlight-color: transparent; } .mood-face:active { transform: scale(0.9); } .mood-face:hover { border-color: var(--accent); } .energy-row { display: flex; gap: 1rem; justify-content: center; } .energy-opt { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1rem 1.4rem; border: 3px solid var(--card-border); border-radius: 16px; background: var(--card); cursor: pointer; font-size: 1.05rem; font-weight: 700; color: var(--ink); transition: transform 0.1s, border-color 0.15s; -webkit-tap-highlight-color: transparent; } .energy-opt:active { transform: scale(0.95); } .energy-opt__emoji { font-size: 2.4rem; } .checkin__face { font-size: 4.5rem; line-height: 1; animation: pop-in 0.3s ease; } .checkin__msg { display: flex; align-items: center; gap: 0.6rem; font-size: 1.3rem; font-weight: 600; max-width: 480px; flex-wrap: wrap; justify-content: center; } /* "Did you know?" fact card */ .fact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 60vh; text-align: center; padding: 1rem; } .fact__icon { font-size: 5rem; line-height: 1; animation: pop-in 0.3s ease; } .fact__text { font-size: 1.5rem; font-weight: 600; max-width: 520px; line-height: 1.5; } /* Reading / Listening comprehension */ .reading { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem; text-align: center; max-width: 560px; margin: 0 auto; } .reading__icon { font-size: 3.5rem; line-height: 1; } .reading__title { font-size: 1.6rem; } .reading__hint { color: #888; } .reading__body { background: var(--card); border: 2px solid var(--card-border); border-radius: var(--radius); padding: 1.2rem 1.4rem; font-size: 1.4rem; line-height: 1.9; box-shadow: var(--shadow); } .comp-q { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 1rem; max-width: 560px; margin: 0 auto; min-height: 50vh; justify-content: center; } .comp-q__text { display: flex; align-items: center; gap: 0.6rem; font-size: 1.5rem; font-weight: 700; flex-wrap: wrap; justify-content: center; text-align: center; } .comp-choices { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; max-width: 420px; } .comp-choice { padding: 1rem 1.2rem; border: 3px solid var(--card-border); border-radius: 14px; background: var(--card); color: var(--ink); font-size: 1.3rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.1s, border-color 0.15s; } .comp-choice:active { transform: scale(0.97); } .comp-choice--correct { border-color: var(--correct); background: rgba(0, 184, 148, 0.12); } .comp-choice--wrong { border-color: var(--incorrect); background: rgba(225, 112, 85, 0.12); } .comp-feedback { font-size: 1.4rem; font-weight: 700; min-height: 1.6rem; } .order-seq { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; max-width: 420px; min-height: 1rem; } .order-seq__item { background: rgba(108, 92, 231, 0.1); border-radius: 10px; padding: 0.5rem 0.8rem; font-weight: 600; } .order-pool { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; max-width: 420px; } .order-chip { padding: 0.9rem 1.1rem; border: 3px solid var(--accent); border-radius: 14px; background: var(--card); color: var(--accent); font-size: 1.25rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } .order-chip--used { opacity: 0.4; border-color: var(--card-border); color: #999; } /* === INSTRUCTION === */ .instruction { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; gap: 1rem; } .instruction__icon { font-size: 3.5rem; animation: popIn 0.4s ease; } .instruction__title { font-size: 1.4rem; } .instruction__text { font-size: 1.05rem; color: #666; line-height: 1.5; max-width: 340px; } /* === EXERCISE AREAS === */ .exercise-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; } .exercise-progress { font-size: 0.9rem; color: #888; direction: ltr; } .exercise-problem { font-family: 'Secular One', sans-serif; font-size: 3rem; text-align: center; min-height: 4rem; direction: ltr; } .exercise-input { width: 160px; font-family: 'Secular One', sans-serif; font-size: 2.5rem; text-align: center; border: none; border-bottom: 3px solid var(--ink); background: transparent; color: var(--ink); outline: none; padding: 0.25rem; direction: ltr; } .exercise-input:focus { border-bottom-color: var(--accent); } /* Stroop */ .stroop-word { font-family: 'Secular One', sans-serif; font-size: 3.5rem; text-align: center; } .stroop-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: 100%; max-width: 300px; } .stroop-btn { padding: 0.6rem; border: 3px solid; border-radius: var(--radius-sm); background: var(--card); font-family: 'Heebo', sans-serif; font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; } .stroop-btn:active { transform: scale(0.95); } /* Memory display */ .memo-display { font-family: 'Secular One', sans-serif; font-size: 3.5rem; text-align: center; letter-spacing: 0.3rem; min-height: 4.5rem; display: flex; align-items: center; justify-content: center; direction: ltr; } /* Number tracking */ .suivi-area { position: relative; width: 100%; height: 350px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .suivi-number { position: absolute; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Secular One', sans-serif; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; user-select: none; } .suivi-number--visible { background: var(--accent); color: #fff; } .suivi-number--hidden { background: #e8e6f0; color: #e8e6f0; } .suivi-number--revealed { background: var(--correct); color: #fff; } .suivi-number--wrong { background: var(--incorrect); color: #fff; animation: shake 0.4s ease; } /* Attention (CPT) */ .cpt-display { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 4rem; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); transition: all 0.15s; } .cpt-btn { width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--accent); background: var(--accent); color: #fff; font-size: 2rem; cursor: pointer; transition: all 0.1s; -webkit-tap-highlight-color: transparent; } .cpt-btn:active { transform: scale(0.9); background: #5b4bd6; } /* Grid Memory */ .grid-wrap { display: inline-grid; gap: 4px; background: var(--card-border); padding: 4px; border-radius: var(--radius-sm); } .grid-cell { width: 60px; height: 60px; background: var(--card); border-radius: 6px; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; } .grid-cell--lit { background: var(--accent); } .grid-cell--correct { background: var(--correct); } .grid-cell--wrong { background: var(--incorrect); } .grid-cell--missed { background: var(--accent-light); opacity: 0.5; } /* Rotation */ .rotation-grid { display: inline-grid; gap: 2px; background: var(--card-border); padding: 2px; border-radius: 4px; } .rotation-cell { width: 28px; height: 28px; border-radius: 3px; } .rotation-cell--on { background: var(--accent); } .rotation-cell--off { background: #f0eef5; } .rotation-choices { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; } .rotation-choice { padding: 0.5rem; border: 3px solid var(--card-border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; background: var(--card); } .rotation-choice:active { transform: scale(0.95); } .rotation-choice--correct { border-color: var(--correct); background: #f0fff4; } .rotation-choice--wrong { border-color: var(--incorrect); background: #fff5f5; } /* Word intruder */ .word-grid { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 300px; } .word-btn { padding: 0.8rem 1rem; border: 2px solid var(--card-border); border-radius: var(--radius-sm); background: var(--card); font-family: 'Heebo', sans-serif; font-size: 1.2rem; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.15s; -webkit-tap-highlight-color: transparent; } .word-btn:active { transform: scale(0.97); } .word-btn--correct { background: var(--correct); color: #fff; border-color: var(--correct); } .word-btn--wrong { background: var(--incorrect); color: #fff; border-color: var(--incorrect); } /* Sequence choices */ .seq-choices { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .seq-btn { width: 60px; height: 60px; border: 2px solid var(--card-border); border-radius: var(--radius-sm); background: var(--card); font-family: 'Secular One', sans-serif; font-size: 1.3rem; cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; direction: ltr; } .seq-btn:active { transform: scale(0.95); } /* Chain display */ .chain-display { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; font-family: 'Secular One', sans-serif; font-size: 1.6rem; direction: ltr; } .chain-op { color: var(--accent); font-weight: 700; } .chain-num { color: var(--ink); } /* === SUMMARY === */ .summary { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; } .summary__icon { font-size: 3rem; animation: popIn 0.4s ease; } .summary__big { font-family: 'Secular One', sans-serif; font-size: 3.5rem; color: var(--accent); } .summary__label { font-size: 1rem; color: #888; } .summary__detail { font-size: 0.9rem; color: #666; } .summary__xp { display: inline-flex; align-items: center; gap: 0.3rem; background: #fff3e0; color: #e67e22; padding: 0.4rem 0.8rem; border-radius: 50px; font-weight: 700; font-size: 1.1rem; animation: popIn 0.5s ease; } .summary__buttons { display: flex; gap: 0.6rem; margin-top: 1rem; } /* === ILLUSTRATIONS (SVG asset pack) === */ .illu { display: inline-block; vertical-align: middle; user-select: none; pointer-events: none; max-width: 100%; height: auto; } .illu--flag { border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } /* Avatars (round colored chip + illustration centered) */ .profile-card__avatar { display: flex; align-items: center; justify-content: center; overflow: hidden; } .profile-card__avatar .illu { width: 88%; height: 88%; } /* Hub avatar (small round in header) — fill the disk, dropping the emoji-era font-size */ .hub-avatar { overflow: hidden; padding: 4px; box-sizing: border-box; } .hub-avatar .illu { width: 100%; height: 100%; object-fit: contain; } /* Game card icon: tuned for the 2-column grid on mobile — 56px is the sweet spot that keeps the card compact while staying legible. The emoji-badge fallback (DUP_EXOS) inherits the same display rules so its sizing matches. */ .game-card__icon { display: flex; align-items: center; justify-content: center; min-height: 56px; } .game-card__icon .illu, .game-card__icon .exo-badge { width: 56px; height: 56px; max-width: 100%; max-height: 100%; } /* Theme header crest — small circular illustration inline with the title */ .theme-header .illu { flex-shrink: 0; } /* Companion (hub) — fill the slot, no font sizing needed any more */ .companion__pet { display: flex; align-items: center; justify-content: center; min-width: 80px; min-height: 80px; } .companion__pet .illu { width: 80px; height: 80px; } /* Instruction & summary big icons — centered & sized for impact */ .instruction__icon { display: flex; justify-content: center; min-height: 160px; } .instruction__icon .illu { width: 160px; height: 160px; max-width: 100%; } .summary__icon { display: flex; justify-content: center; min-height: 140px; } .summary__icon .illu { width: 140px; height: 140px; max-width: 100%; } /* Mood / energy buttons (check-in) — give the illustration room */ .mood-face, .energy-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; } .mood-face .illu, .energy-opt__emoji .illu { width: 64px; height: 64px; } .energy-opt__emoji { display: inline-flex; align-items: center; justify-content: center; } /* Big mood face in result panel of check-in */ .checkin__face .illu { width: 90px; height: 90px; } /* Badges grid — square illustration, full slot */ .badge__icon { display: flex; align-items: center; justify-content: center; } .badge__icon .illu { width: 72px; height: 72px; } /* === POP-IN (used by personal-best banner) === */ @keyframes popIn { 0% { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* === MULTIPLE-CHOICE BUTTONS — adaptive sizing === The vocab/L2 banks contain words that range from 3 to 10 chars across French/Hebrew/English. Keep them legible without overflowing a 2-up grid on small screens. */ .seq-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.6rem; } .seq-btn { word-break: break-word; overflow-wrap: anywhere; hyphens: auto; line-height: 1.2; padding: 0.8rem 0.6rem; min-height: 3.2rem; /* font-size shrinks for long content via clamp; explicit style overrides in the markup (e.g. font-size:1.5rem) still win when set inline. */ font-size: clamp(0.85rem, 3.4vw, 1.15rem); } @media (max-width: 360px) { .seq-btn { font-size: clamp(0.75rem, 3.2vw, 1rem); padding: 0.7rem 0.4rem; } } /* === SCAN GRID (selective-attention exercise) === */ .scan-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; margin: 1rem 0; } .scan-cell { cursor: pointer; transition: transform 0.1s ease; } .scan-cell:active { transform: scale(0.95); } /* === HISTORY === */ .history-list { list-style: none; } .history-item { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--card-border); } .history-item__date { font-size: 0.9rem; font-weight: 500; } .history-item__age { font-family: 'Secular One', sans-serif; font-size: 1.2rem; color: var(--accent); direction: ltr; } .history-item__games { font-size: 0.8rem; color: #999; } /* === BADGES === */ .badges-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .badge { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.5rem; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--card-border); width: 80px; text-align: center; } .badge--locked { opacity: 0.3; filter: grayscale(1); } .badge__icon { font-size: 1.5rem; } .badge__name { font-size: 0.65rem; font-weight: 600; line-height: 1.2; } /* === ENTRY TEST === */ .test-step { text-align: center; font-size: 1.1rem; color: #888; margin-bottom: 1rem; } .test-progress-dots { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 1.5rem; } .test-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--card-border); } .test-dot--active { background: var(--accent); } .test-dot--done { background: var(--correct); } /* === PROFILE STATS === */ .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--card-border); } .stat-row:last-child { border-bottom: none; } .stat-label { font-size: 0.95rem; color: #666; } .stat-value { font-weight: 700; color: var(--accent); direction: ltr; } /* === FLASH === */ .flash-correct { animation: flashGreen 0.4s ease; } @keyframes flashGreen { 0% { background-color: transparent; } 30% { background-color: rgba(0,184,148,0.15); } 100% { background-color: transparent; } } .flash-incorrect { animation: flashRed 0.4s ease; } @keyframes flashRed { 0% { background-color: transparent; } 30% { background-color: rgba(225,112,85,0.15); } 100% { background-color: transparent; } } /* === RESPONSIVE === */ @media (max-width: 380px) { .screen { padding: 0.75rem; } .exercise-problem { font-size: 2.5rem; } .suivi-area { height: 280px; } .game-grid { gap: 0.4rem; } .game-card { padding: 0.75rem 0.5rem; } .grid-cell { width: 50px; height: 50px; } .profile-card { width: 110px; padding: 1rem; } } /* ===== Entry extras (guest / parent) ===== */ .entry-extra { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; } .entry-btn { background: var(--card); border: 2px solid var(--card-border); border-radius: 16px; padding: 0.8rem 1.4rem; font-size: 1.1rem; font-weight: 600; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; } .entry-btn:active { transform: scale(0.96); } .entry-btn--parent { background: var(--accent); color: #fff; border-color: var(--accent); } /* ===== Parent dashboard ===== */ .parent { max-width: 560px; margin: 0 auto; padding: 0.5rem 1rem 2rem; } .parent-card { background: var(--card); border: 2px solid var(--card-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--shadow); } .parent-card--archived { display: flex; align-items: center; justify-content: space-between; opacity: 0.85; } .parent-card__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; } .parent-card__name { font-weight: 700; font-size: 1.2rem; } .parent-card__sub { color: #888; font-size: 0.9rem; } .parent-stats { display: flex; justify-content: space-between; gap: 0.3rem; margin-bottom: 0.8rem; text-align: center; } .parent-stats > div { flex: 1; } .parent-stats b { display: block; font-size: 1.3rem; color: var(--accent); } .parent-stats span { font-size: 0.75rem; color: #888; } .parent-actions { display: flex; gap: 0.5rem; } .parent-actions .btn { flex: 1; padding: 0.6rem 0.4rem; font-size: 0.95rem; } .parent-section { font-weight: 700; color: var(--ink); margin: 1.2rem 0 0.6rem; text-align: center; } .parent-bottom { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; } .parent-bottom .btn { padding: 0.9rem; font-size: 1.05rem; } /* Parent: add-child form */ .parent-form { max-width: 460px; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .parent-form label { align-self: flex-start; font-weight: 700; color: var(--ink); margin-top: 0.6rem; } .emoji-row, .age-row { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; } .emoji-pick { width: 48px; height: 48px; border-radius: 12px; border: 2px solid var(--card-border); background: var(--card); font-size: 1.6rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .emoji-pick--sel { border-color: var(--accent); background: var(--accent-light); } .age-pick { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--card-border); background: var(--card); font-size: 1.1rem; font-weight: 700; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; } .age-pick--sel { border-color: var(--accent); background: var(--accent); color: #fff; } /* Parent: per-exercise difficulty bars */ .stat-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; font-size: 0.95rem; } .stat-row__name { flex: 0 0 42%; } .stat-bar { flex: 1; height: 10px; background: var(--card-border); border-radius: 6px; overflow: hidden; } .stat-bar > div { height: 100%; background: var(--accent); } /* ===== Companion (grows with regularity) ===== */ .companion { display: flex; align-items: center; gap: 0.9rem; background: var(--card); border: 2px solid var(--card-border); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 0.8rem; box-shadow: var(--shadow); } .companion__pet { font-size: 2.8rem; line-height: 1; transition: filter 0.3s; } .companion--asleep .companion__pet { filter: grayscale(0.6) opacity(0.65); } .companion__name { font-weight: 700; font-size: 1.1rem; } .companion__status { font-size: 0.9rem; color: #888; } /* ===== Week calendar / regularity ===== */ .week-strip { display: flex; gap: 0.35rem; justify-content: space-between; margin-bottom: 0.4rem; } .week-day { flex: 1; text-align: center; padding: 0.45rem 0; border-radius: 10px; background: var(--card-border); color: #888; font-weight: 700; font-size: 0.9rem; } .week-day--done { background: var(--accent); color: #fff; } .week-day--today { outline: 2px solid var(--accent); outline-offset: 1px; } .week-goal { text-align: center; font-size: 0.9rem; color: var(--accent); font-weight: 600; margin-bottom: 1rem; } /* ===== Défis (challenges) ===== */ .pp-banner { text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--accent); margin-bottom: 0.3rem; } .challenges-intro { text-align: center; color: #888; font-size: 0.9rem; margin-bottom: 1rem; } .challenge-grid { display: grid; gap: 0.8rem; max-width: 520px; margin: 0 auto; } .challenge-card { background: var(--card); border: 2px solid var(--card-border); border-radius: var(--radius); padding: 1.1rem; text-align: center; box-shadow: var(--shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; } .challenge-card:active { transform: scale(0.98); } .challenge-card--locked { cursor: default; filter: grayscale(0.85); opacity: 0.7; } .challenge-card__icon { font-size: 2.6rem; line-height: 1; } .challenge-card__name { font-family: 'Secular One', sans-serif; font-size: 1.3rem; margin: 0.3rem 0; } .challenge-card__desc { color: #888; font-size: 0.95rem; } .challenge-card__best { margin-top: 0.5rem; font-weight: 700; color: var(--accent); } .challenge-lock { margin-top: 0.6rem; } .challenge-lock__bar { height: 8px; background: var(--card-border); border-radius: 6px; overflow: hidden; margin-bottom: 0.3rem; } .challenge-lock__bar > div { height: 100%; background: var(--accent); transition: width 0.4s; } .challenge-lock span { font-size: 0.85rem; color: #888; } /* Reflex challenge zone */ .reflex-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer; min-height: 55vh; transition: background 0.1s; user-select: none; -webkit-tap-highlight-color: transparent; } .reflex-area--go { background: var(--correct); } .reflex-area--early { background: var(--incorrect); } .reflex-msg { font-family: 'Secular One', sans-serif; font-size: 2.4rem; } .reflex-sub { font-size: 1.1rem; opacity: 0.9; }