/* ─────────────────────────────────────────────────────────────── DESIGN TOKENS ─────────────────────────────────────────────────────────────── */ :root { /* Surface */ --navy: #0F1B3A; --navy-deep: #0A1228; --navy-soft: #1A2A57; --cream: #FAF6E9; --cream-soft: #F2EBD3; --cream-edge: #E8DFC2; --ink: #1A1E2E; --ink-soft: #4A526B; --ink-mute: #8A8FA3; /* Rainbow rows (per-decade) */ --row-1: #E04848; --row-2: #EC7A2C; --row-3: #E8B324; --row-4: #4FA85A; --row-5: #2E8AC9; --row-6: #5C5BCB; --row-7: #9148BF; --row-8: #C4438A; --row-9: #2EA89A; --row-10: #B85C2C; /* Tier accents */ --tier-1: var(--row-1); --tier-2: var(--row-2); --tier-3: var(--row-3); --tier-4: var(--row-4); --tier-5: var(--row-5); --tier-free: var(--row-6); --tier-c: var(--tier-1); /* dynamic, set by JS */ /* Semantic */ --correct: #2FA85F; --wrong: #D8443A; --info: #2E8AC9; /* CTA */ --cta-from: #FFC73B; --cta-to: #F08A1E; --cta-ink: #2A1A05; /* Type */ --font-display: "Fraunces", "Fredoka", system-ui, sans-serif; --font-ui: "Fredoka", "Inter", system-ui, sans-serif; /* Spacing */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; /* Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* Shadows */ --sh-card: 0 4px 0 var(--cream-edge), 0 18px 40px -18px rgba(10, 18, 40, 0.55); --sh-circle: 0 3px 0 rgba(0, 0, 0, 0.10), 0 6px 14px -4px rgba(10, 18, 40, 0.35); --sh-button: 0 4px 0 var(--cta-ink), 0 10px 20px -8px rgba(240, 138, 30, 0.6); --sh-overlay: 0 30px 80px -20px rgba(0, 0, 0, 0.6); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-ui); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--navy); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; /* Safety net, not the primary fix: the welcome/game card is sized to fit known viewports (see the height-aware rules further down), but `hidden` here would silently clip anything that still doesn't fit on an unanticipated device instead of letting it scroll into view — same philosophy as the other Number games (numbers_counting.html etc.), whose html:fullscreen rule below is the same "just scroll, never clip" approach. */ overflow-y: auto; overflow-x: hidden; } /* FULLSCREEN — like the other Number games (numbers_counting.html, numbers_count_the_berries.html, numbers_count_to_100.html) and the operation pages: "Let's Play" fullscreens the whole page (, not just the card) so the navy board fills the screen with no browser chrome eating into the height. Desktop only — the Fullscreen API is unreliable on phones (see _startFs() below). This body is already a centered flex column even outside fullscreen, so — unlike the sibling games — no separate `html:fullscreen body` override is needed here. */ html:fullscreen { overflow-y: auto; overflow-x: hidden; } html:fullscreen::backdrop { background: #0F1729; } /* Soft dot texture behind everything */ body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0); background-size: 22px 22px; pointer-events: none; z-index: 0; } button { font: inherit; cursor: pointer; } /* ─── Game card ─── */ .game-container { position: relative; z-index: 1; max-width: 1200px; width: 100%; background: radial-gradient(ellipse 110% 70% at 50% 0%, #C3E2FF 0%, #8AC8FF 22%, #5DA6E8 55%, #2F73B8 100%); border-radius: var(--r-xl); box-shadow: var(--sh-card); overflow: hidden; padding: 0; } /* Tier accent stripe (was rainbow border) — softened to a subtle highlight */ .decorative-border { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--tier-c) 0%, var(--tier-c) 30%, transparent 80%); opacity: 0.7; transition: background 0.4s ease; z-index: 10; } /* ════════════════════════════════════════════════════════════ WELCOME SCREEN (full-page overlay) ════════════════════════════════════════════════════════════ */ .welcome-screen { position: fixed; inset: 0; background: var(--navy); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn 0.5s ease; padding: 20px; } .welcome-screen::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0); background-size: 22px 22px; pointer-events: none; } .welcome-screen.hidden { animation: fadeOut 0.5s ease forwards; pointer-events: none; } .welcome-content { position: relative; background: var(--cream); padding: 56px 48px 48px; border-radius: var(--r-xl); box-shadow: var(--sh-card); max-width: 560px; width: 100%; text-align: center; animation: scaleIn 0.6s ease; overflow: hidden; } .welcome-content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--tier-1) 0%, var(--tier-1) 45%, transparent 100%); } .start-here-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--tier-1); color: var(--cream); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; padding: 6px 14px 6px 10px; border-radius: var(--r-pill); box-shadow: 0 3px 0 rgba(125, 30, 30, 0.4); margin-bottom: 20px; transform: rotate(-2deg); } .start-here-badge svg { width: 14px; height: 14px; } .game-family { display: inline-flex; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; } .game-family b { color: var(--ink); font-weight: 700; } .welcome-content h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; } .welcome-content h1 .accent { font-style: italic; color: var(--row-1); } .welcome-content .tagline { font-size: 17px; color: var(--ink-soft); max-width: 420px; margin: 0 auto 28px; text-wrap: pretty; } .welcome-mascot { position: relative; width: 180px; height: 180px; margin: 0 auto 28px; } .welcome-mascot::before { content: ""; position: absolute; bottom: 6px; left: 50%; width: 160px; height: 14px; background: radial-gradient(ellipse at center, rgba(10,18,40,0.18), transparent 70%); transform: translateX(-50%); border-radius: 50%; } .welcome-mascot .floaters { position: absolute; inset: -10px -30px; pointer-events: none; } .welcome-mascot .f { position: absolute; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--cream); box-shadow: var(--sh-circle); border: 3px solid var(--cream); } .welcome-mascot .f.a { top: 12%; left: -4%; background: var(--row-3); transform: rotate(-8deg); } .welcome-mascot .f.b { top: 0%; right: 0%; background: var(--row-5); width: 46px; height: 46px; transform: rotate(6deg); } .welcome-mascot .f.c { bottom: 16%; left: 0%; background: var(--row-4); width: 32px; height: 32px; font-size: 14px; transform: rotate(10deg); } .welcome-mascot .f.d { bottom: 4%; right: -4%; background: var(--row-7); width: 36px; height: 36px; font-size: 16px; transform: rotate(-6deg); } .welcome-mascot .sun-mascot { position: relative; width: 100%; height: 100%; z-index: 1; } /* CTA */ .welcome-btn, .cta-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(180deg, var(--cta-from), var(--cta-to)); color: var(--cta-ink); font-weight: 700; font-size: 20px; letter-spacing: 0.01em; padding: 16px 32px; border: none; border-radius: var(--r-pill); box-shadow: var(--sh-button); transition: transform 0.15s ease; } .welcome-btn:hover, .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--cta-ink), 0 14px 26px -8px rgba(240, 138, 30, 0.65); } /* Press-down squash — the house gold-CTA spec (design-system/assets/buttons/ gel-buttons.css .gold-cta:active): shelf compresses, button sinks onto it. */ .welcome-btn:active, .cta-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cta-ink), 0 6px 14px -8px rgba(240, 138, 30, 0.6); } .welcome-btn .arrow, .cta-btn .arrow { width: 26px; height: 26px; background: var(--cta-ink); color: var(--cta-from); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .siblings { display: flex; gap: 8px; justify-content: center; margin-top: 24px; flex-wrap: wrap; } .sibling { display: inline-flex; align-items: center; gap: 8px; background: var(--cream-soft); border: 1.5px solid var(--cream-edge); padding: 7px 12px 7px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: transform 0.15s ease, background 0.2s ease; } a.sibling:hover { transform: translateY(-1px); background: var(--cream); } .sibling.active { background: var(--ink); color: var(--cream); border-color: var(--ink); } .sibling .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tier-1); } .sibling.active .dot { background: var(--cta-from); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes scaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ════════════════════════════════════════════════════════════ IN-GAME LAYOUT ════════════════════════════════════════════════════════════ */ .game-inner { padding: 16px; position: relative; z-index: 1; } /* HUD */ .game-info { display: flex; gap: 8px; align-items: stretch; margin-bottom: 14px; flex-wrap: wrap; } .info-item { flex: 1 1 140px; min-width: 140px; background: var(--cream); border: 2px solid #1F2747; border-radius: var(--r-md); padding: 7px 10px; display: flex; flex-direction: row; align-items: center; gap: 8px; text-align: left; box-shadow: 0 3px 0 rgba(31, 39, 71, 0.18); } .info-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid #1F2747; box-shadow: 0 2px 0 rgba(31, 39, 71, 0.22); } .info-icon svg { width: 16px; height: 16px; display: block; } .info-icon.icon-tier { background: #FFC93C; color: #1F2747; } .info-icon.icon-level { background: #4FA85A; color: #FFFFFF; } .info-icon.icon-range { background: #2E8AC9; color: #FFFFFF; } .info-icon.icon-target { background: #E04848; color: #FFFFFF; } .info-icon.icon-highest { background: #9148BF; color: #FFFFFF; } .info-icon.icon-score { background: #FFE066; color: #1F2747; } .info-icon.icon-speed { background: #EC7A2C; color: #FFFFFF; } .info-icon.icon-hearts { background: #E04848; color: #FFFFFF; } .info-icon.icon-streak { background: #E8B324; color: #1F2747; } .hearts-value { color: #E04848; letter-spacing: 3px; } .hearts-value .lost { color: rgba(250, 246, 233, 0.22); } .new-best-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #FFC93C; margin-top: 2px; } .info-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.1; } .info-item.tier-chip { background: var(--ink); border-color: var(--ink); flex: 0 0 auto; min-width: 158px; } .info-item.tier-chip .info-label { color: rgba(250, 246, 233, 0.55); } .info-item.tier-chip .info-value { color: var(--cream); } .info-item.tier-chip .info-value::before { display: none; } /* Speed chip doubles as a button — tapping it opens Settings ▸ Speed, reachable from normal ladder play as well as Free Play. */ .info-item.speed-chip { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .info-item.speed-chip:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(31, 39, 71, 0.18); } .info-item.speed-chip:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; } .info-label { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } .info-value { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.05; white-space: nowrap; } .info-value .sub { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-mute); margin-left: 4px; } .speed-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; vertical-align: middle; } .speed-bars i { display: inline-block; width: 5px; border-radius: 2px; background: var(--cream-edge); } .speed-bars i.on { background: var(--ink); } .speed-bars i:nth-child(1) { height: 8px; } .speed-bars i:nth-child(2) { height: 13px; } .speed-bars i:nth-child(3) { height: 18px; } /* Pattern hint */ .pattern-display { display: none; align-items: center; gap: 16px; background: var(--cream); border: 2px solid #1F2747; border-radius: var(--r-md); border-left: 8px solid var(--tier-c); padding: 14px 20px; margin-bottom: 14px; transition: border-color 0.4s ease; box-shadow: 0 3px 0 rgba(31, 39, 71, 0.18); } .pattern-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--tier-c); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; flex-shrink: 0; transition: background 0.4s ease; } .pattern-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .pattern-title { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } .pattern-hint { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); } .pattern-hint em { font-style: italic; color: var(--tier-c); filter: brightness(0.85); transition: color 0.4s ease; } .pattern-progress { display: flex; gap: 6px; flex-wrap: wrap; max-width: 50%; justify-content: flex-end; } .pattern-progress span { width: 20px; height: 8px; border-radius: var(--r-pill); background: var(--cream-edge); } .pattern-progress span.done { background: var(--tier-c); } .pattern-progress span.now { background: var(--ink); box-shadow: 0 0 0 3px rgba(26, 30, 46, 0.12); } /* Garland / play panel */ /* Play track — transparent now; whole-card scenery shows through */ .garland-container { background: transparent; box-shadow: none; padding: 32px 16px; margin-bottom: 14px; min-height: 400px; position: relative; } .garland-container::before { display: none; } .scenery { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; border-radius: var(--r-xl); } .scenery .sky-sun, .scenery-front .sky-sun { position: absolute; top: 92px; left: 36px; width: 130px; height: 130px; } .scenery .sun-halo, .scenery-front .sun-halo { position: absolute; top: 70px; left: 16px; width: 170px; height: 170px; background: radial-gradient(circle, rgba(255, 232, 154, 0.36) 0%, rgba(255, 232, 154, 0.12) 40%, transparent 65%); pointer-events: none; animation: haloPulse 6s ease-in-out infinite; } .scenery .god-rays, .scenery-front .god-rays { position: absolute; top: 140px; left: 80px; width: 360px; height: 320px; background: conic-gradient( from 100deg at 20% 20%, transparent 0deg, rgba(255, 240, 180, 0.16) 14deg, transparent 28deg, transparent 36deg, rgba(255, 240, 180, 0.12) 50deg, transparent 64deg, transparent 70deg, rgba(255, 240, 180, 0.14) 82deg, transparent 96deg, transparent 360deg ); filter: blur(4px); pointer-events: none; mix-blend-mode: screen; } /* Foreground scenery layer — sits ABOVE balls so they pass behind */ .scenery-front { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; border-radius: var(--r-xl); } @keyframes haloPulse { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.06); } } .scenery .bird { position: absolute; width: 24px; height: 14px; pointer-events: none; } .scenery .bird svg { display: block; width: 100%; height: 100%; } .scenery .bird.b1 { top: 130px; left: 40%; animation: birdFly 14s ease-in-out infinite; } .scenery .bird.b2 { top: 112px; left: 60%; animation: birdFly 18s ease-in-out infinite -4s; } .scenery .bird.b3 { top: 150px; left: 78%; animation: birdFly 16s ease-in-out infinite -8s; } .scenery .bird.b4 { top: 96px; left: 50%; animation: birdFly 20s ease-in-out infinite -12s; } @keyframes birdFly { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-34px, -12px); } } .scenery .butterfly { position: absolute; width: 22px; height: 22px; pointer-events: none; bottom: 92px; } .scenery .butterfly.bf1 { left: 18%; animation: bfFlutter 5s ease-in-out infinite; } .scenery .butterfly.bf2 { left: 62%; animation: bfFlutter 6s ease-in-out infinite -2s; } @keyframes bfFlutter { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(14px, -10px) rotate(8deg); } 50% { transform: translate(8px, -18px) rotate(-4deg); } 75% { transform: translate(-8px, -12px) rotate(6deg); } 100% { transform: translate(0, 0) rotate(0); } } .scenery .cloud { position: absolute; pointer-events: none; } .scenery .cloud svg { display: block; } .scenery .cloud.c1 { top: 110px; left: 38%; width: 140px; opacity: 0.95; } .scenery .cloud.c2 { top: 92px; right: 8%; width: 96px; opacity: 0.92; } .scenery .cloud.c3 { top: 170px; left: 70%; width: 88px; opacity: 0.88; } .scenery .hills { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 230px; display: block; } @keyframes sunFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .scenery .sky-sun { animation: sunFloat 6s ease-in-out infinite; } @keyframes cloudDrift { from { transform: translateX(0); } to { transform: translateX(40px); } } .scenery .cloud { animation: cloudDrift 18s ease-in-out infinite alternate; } .scenery .cloud.c2 { animation-duration: 22s; animation-delay: -6s; } .scenery .cloud.c3 { animation-duration: 26s; animation-delay: -12s; } .garland-title { display: none; } .garland-title { display: none; } .garland-track { position: relative; height: 260px; width: 100%; overflow: hidden; } /* Dashed track line hidden — horizon is implied by hills */ .garland-string { display: none; } /* Horizontal travel lives on transform (GPU-composited), not left/top — animating `left` requires layout on every frame and can visibly fall behind its declared duration under main-thread load, which is how balls used to drift into each other. Movement is no longer a CSS animation — the whole "train" of balls is laid out once per round at fixed spacing and marched by a single JS requestAnimationFrame loop (see layOutTrain()/trainTick() below, mirroring games/bow-shooter-v14-source.dc.html's trainSpacing/ trainSpeed model), so overlap is impossible by construction and a live speed-picker change can be applied on the very next frame. */ /* Positioning wrapper. The visible ball (.number-circle) nests inside and only handles its own vertical bob, so the two motions never fight over the `transform` property — the mover's own transform (translateX, set per-frame by JS) is the ball's horizontal position. */ .number-circle-mover { position: absolute; top: 50%; left: 0; z-index: 2; will-change: transform; } /* Number circles */ .number-circle { --c: var(--row-1); position: relative; width: 112px; height: 112px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 100%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 50%), var(--c); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 46px; color: var(--cream); cursor: pointer; transition: filter 0.2s ease; box-shadow: 0 5px 0 rgba(31, 39, 71, 0.35), 0 10px 22px -4px rgba(31, 39, 71, 0.5), inset 0 -5px 0 rgba(0,0,0,0.18), inset 0 3px 0 rgba(255,255,255,0.28); border: 4px solid #1F2747; animation: ballBob 2.4s ease-in-out infinite; user-select: none; text-shadow: 0 2px 0 rgba(0,0,0,0.22); } @keyframes ballBob { 0%, 100% { transform: translateY(-50%) translateY(0); } 50% { transform: translateY(-50%) translateY(-10px); } } /* Hints rule (founder 2026-07-17): ONLY Tier 1 (levels 1-4) marks targets with the golden halo — training wheels while the kid learns what catching means, one hinted pass per skip pattern on slow gel balls. From Level 5 onward, and in Free Play, targets are visually IDENTICAL to distractors — no halo, no ring, no desaturation; the number on the ball is the only signal. layOutTrain() toggles .hints-on on the track per round. Never add per-ball styling that differs by target-ness outside the .hints-on scope. */ .garland-track.hints-on .number-circle.target::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255,199,59,0.45) 0%, rgba(255,199,59,0.12) 55%, transparent 75%); z-index: -1; pointer-events: none; } .garland-track.hints-on .number-circle.target::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 199, 59, 0.85); box-shadow: 0 0 12px rgba(255, 199, 59, 0.35); pointer-events: none; } /* ── Ball-skin progression ────────────────────────────────────────── A reward for climbing the tier ladder: tier 1 (levels 1-4) owns the plain CSS gel ball above; tiers 2-5 own a richer glossy/jelly/ crystal image skin (assigned per-ball in layOutTrain(), see applyLook()), each an upgrade over the last. Later levels also sprinkle in earlier levels' looks, and Free Play draws from all of them. The image already bakes in its own gloss + rim, so the inset highlight shadows are dropped here (they'd fight the art) and a plain drop shadow + colour glow takes their place. Numerals get a dark outline instead of a flat shadow so they stay readable against both dark and very bright/gold skins. */ .number-circle.skin { background-image: var(--skin-url); background-size: 100% 100%; background-position: center; background-color: transparent; box-shadow: 0 6px 14px -3px rgba(15, 23, 42, 0.55), 0 12px 26px -8px var(--skin-glow, rgba(15, 23, 42, 0.4)); color: #FFFFFF; text-shadow: 0 2px 4px rgba(0,0,0,0.6); -webkit-text-stroke: 2px rgba(20, 12, 45, 0.55); paint-order: stroke fill; } .number-circle.skin:hover { box-shadow: 0 8px 18px -3px rgba(15, 23, 42, 0.6), 0 16px 32px -8px var(--skin-glow, rgba(15, 23, 42, 0.45)); } .number-circle:hover { filter: brightness(1.12) saturate(1.15); box-shadow: 0 6px 0 rgba(31, 39, 71, 0.45), 0 14px 28px -4px rgba(31, 39, 71, 0.6), inset 0 -5px 0 rgba(0,0,0,0.18), inset 0 3px 0 rgba(255,255,255,0.32); } /* Tree sway — wind feel */ .scenery .hills .tree-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: treeSway 5.5s ease-in-out infinite; } .scenery .hills .tree-sway-mid { animation-duration: 6.5s; animation-delay: -2s; } @keyframes treeSway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } } /* Sun blink */ .scenery .sky-sun ellipse[fill="#FFFFFF"], .scenery .sky-sun circle[fill="#0A1226"] { transform-box: fill-box; transform-origin: center; animation: sunBlink 5.5s ease-in-out infinite; } @keyframes sunBlink { 0%, 92%, 100% { transform: scaleY(1); } 95%, 97% { transform: scaleY(0.05); } } /* Score chip bump */ .info-icon.icon-score.bump { animation: chipBump 0.5s ease-out; } @keyframes chipBump { 0% { transform: scale(1); } 40% { transform: scale(1.32) rotate(-8deg); } 70% { transform: scale(0.94) rotate(4deg); } 100% { transform: scale(1) rotate(0); } } /* Confetti pop particles */ .pop-particle { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 9999; border: 1.5px solid #1F2747; animation: popOut 0.7s ease-out forwards; } @keyframes popOut { 0% { transform: translate(0, 0) scale(0.6); opacity: 1; } 30% { transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } } .number-circle.correct { background: var(--correct) !important; border-color: var(--cream); animation: correctPop 0.5s ease forwards; } .number-circle.correct::before, .number-circle.correct::after { display: none; } .number-circle.wrong { background: var(--wrong) !important; animation: shake 0.4s ease; } .number-circle.missed { background: #555 !important; opacity: 0.5; filter: saturate(0); } @keyframes correctPop { 0% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.35); } 100% { transform: translateY(-50%) scale(0); opacity: 0; } } @keyframes shake { 0%, 100% { transform: translateY(-50%) translateX(0); } 25% { transform: translateY(-50%) translateX(-8px); } 75% { transform: translateY(-50%) translateX(8px); } } /* Mascot peeking from bottom-right */ .mascot-peek { position: absolute; right: -10px; bottom: -22px; width: 120px; height: 120px; transform: rotate(-6deg); pointer-events: none; z-index: 3; } .mascot-peek .sun-mascot { width: 100%; height: 100%; } /* Controls */ .controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding-top: 4px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 15px; font-weight: 600; border: 2px solid var(--cream-edge); background: var(--cream); color: var(--ink); border-radius: var(--r-pill); box-shadow: 0 3px 0 var(--cream-edge); transition: transform 0.15s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: linear-gradient(180deg, var(--cta-from), var(--cta-to)); color: var(--cta-ink); border: none; box-shadow: var(--sh-button); } .btn-primary:hover { box-shadow: 0 6px 0 var(--cta-ink), 0 14px 26px -8px rgba(240, 138, 30, 0.65); } .btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cta-ink), 0 6px 14px -8px rgba(240, 138, 30, 0.6); } .btn-primary .arrow { width: 22px; height: 22px; background: var(--cta-ink); color: var(--cta-from); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } /* ════════════════════════════════════════════════════════════ GEL BUTTON FAMILY — house selection/action buttons, copied from design-system/assets/buttons/gel-buttons.css (STYLE 1 "Gel", the same treatment already shipping as the addition-page number keypad, see static/css/operation-shell.css .gel-keypad .gel). Gold stays the single primary CTA (.btn-primary/.welcome-btn above, untouched here) — gel handles pickers and secondary actions around it. Each colour is five custom properties set inline per button: --c-top/--c-mid/ --c-bot (face gradient), --c-rim (unused by this style, kept for parity with the reference), --c-ink (text) and --c-glow (shadow tint). ════════════════════════════════════════════════════════════ */ .gel { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-ui); font-weight: 700; line-height: 1; white-space: nowrap; border: none; border-radius: var(--r-pill); cursor: pointer; color: var(--c-ink); background: linear-gradient(180deg, var(--c-top) 0%, var(--c-mid) 52%, var(--c-bot) 100%); -webkit-tap-highlight-color: transparent; transition: transform .12s cubic-bezier(.34,1.4,.6,1), box-shadow .12s ease, filter .16s ease; box-shadow: 0 2px 3px rgba(0,0,0,0.18), 0 12px 24px -8px var(--c-glow), inset 0 2px 2px rgba(255,255,255,0.6), inset 0 -6px 10px -5px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(0,0,0,0.12); } .gel::before { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 4%; left: 7%; right: 7%; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.74) 28%, rgba(255,255,255,0.2) 74%, rgba(255,255,255,0) 100%); border-radius: inherit; } .gel::after { content: ""; position: absolute; z-index: 0; pointer-events: none; left: 20%; right: 20%; bottom: 9%; height: 22%; background: linear-gradient(0deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100%); border-radius: inherit; opacity: 0.85; } .gel.ink-light { text-shadow: 0 1px 0 rgba(0,0,0,0.28); } .gel.ink-dark { text-shadow: 0 1px 0 rgba(255,255,255,0.45); } .gel.sz-sm { padding: 10px 20px; font-size: 14px; min-width: 56px; } .gel.sz-md { padding: 14px 28px; font-size: 17px; } .gel:hover:not(:disabled) { filter: brightness(1.07) saturate(1.05); transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.20), 0 18px 32px -8px var(--c-glow), inset 0 2px 2px rgba(255,255,255,0.6), inset 0 -8px 14px -4px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(0,0,0,0.10); } .gel:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.95); box-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 6px 12px -8px var(--c-glow), inset 0 2px 3px rgba(0,0,0,0.28), inset 0 8px 14px -6px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(0,0,0,0.12); } /* "Sits pressed" — the selected pill in a single-select group (skip-count / speed pickers below). Matches the reference's Difficulty-select demo: the chosen option sinks onto its shelf and dims slightly; unselected options stay raised in their own colour. */ .gel.selected, .gel.active { transform: translateY(4px); filter: brightness(0.97); } .gel:focus-visible { outline: 3px solid var(--cta-from); outline-offset: 3px; } /* ════════════════════════════════════════════════════════════ OVERLAYS (game over / feedback / tier banner / mastery) ════════════════════════════════════════════════════════════ */ .game-over-screen { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); background: var(--cream); padding: 22px 24px 22px; border-radius: var(--r-lg); box-shadow: var(--sh-overlay); text-align: center; z-index: 9700; transition: transform 0.3s ease; max-width: 360px; width: calc(100% - 32px); overflow: hidden; } .game-over-screen::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 95px; background: linear-gradient(180deg, #C3E2FF 0%, #9ACBF6 60%, transparent 100%); z-index: 0; } .game-over-screen > * { position: relative; z-index: 1; } .game-over-screen.show { transform: translate(-50%, -50%) scale(1); } .go-illust { width: 92px; height: 92px; margin: 0 auto 4px; display: block; } .game-over-screen h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em; } .game-over-screen p { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; text-wrap: pretty; } .go-stats { display: flex; gap: 8px; margin: 0 auto 12px; justify-content: center; } .go-stat { flex: 1; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--cream); border: 2px solid #1F2747; border-radius: var(--r-md); box-shadow: 0 3px 0 rgba(31, 39, 71, 0.18); text-align: left; } .go-stat .info-icon { width: 26px; height: 26px; } .go-stat .info-icon svg { width: 14px; height: 14px; } .go-stat-l { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .go-stat-v { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1; } .go-tip { display: flex; align-items: center; gap: 8px; justify-content: flex-start; background: rgba(255, 199, 59, 0.14); border: 1.5px solid rgba(231, 152, 24, 0.45); color: var(--ink-soft); padding: 8px 12px; border-radius: var(--r-md); font-size: 12px; font-weight: 500; margin-bottom: 16px; text-align: left; text-wrap: pretty; line-height: 1.35; } .go-tip svg { flex-shrink: 0; width: 16px; height: 16px; color: #E69518; } .game-over-screen .icon-mark { display: none; } .game-over-screen .btn { padding: 10px 22px; font-size: 14px; } .game-over-screen .btn .arrow { width: 20px; height: 20px; } /* Feedback toast (small, top-center) */ .feedback { position: fixed; top: 32px; left: 50%; transform: translateX(-50%) translateY(-20px); background: var(--cream); padding: 12px 22px; border-radius: var(--r-pill); box-shadow: var(--sh-overlay); z-index: 9500; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; display: inline-flex; align-items: center; gap: 10px; max-width: 90vw; border: 1px solid var(--cream-edge); } .feedback.show { opacity: 1; transform: translateX(-50%) translateY(0); } .feedback .feedback-mark { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--cream); flex-shrink: 0; } .feedback.ok .feedback-mark { background: var(--correct); } .feedback.bad .feedback-mark { background: var(--wrong); } .feedback .message { font-weight: 600; font-size: 15px; color: var(--ink); } /* Celebration confetti container */ .celebration { position: fixed; inset: 0; pointer-events: none; z-index: 9400; overflow: hidden; } .confetti { position: absolute; width: 10px; height: 10px; border-radius: 2px; animation: fall linear forwards; } @keyframes fall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(540deg); opacity: 0; } } /* Tier banner */ .tier-banner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); background: var(--cream); color: var(--ink); padding: 36px 56px; border-radius: var(--r-xl); min-width: 420px; max-width: 90vw; text-align: center; box-shadow: var(--sh-overlay); border-top: 8px solid var(--tier-c); opacity: 0; pointer-events: none; z-index: 9600; transition: opacity 0.4s ease, transform 0.4s ease; } .tier-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .tier-banner .tier-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tier-c); filter: brightness(0.7); margin-bottom: 10px; } .tier-banner .tier-tag .pill { background: var(--tier-c); color: var(--ink); padding: 3px 10px; border-radius: var(--r-pill); filter: brightness(1.42); } .tier-banner h2 { font-family: var(--font-display); font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; } .tier-banner h2 em { font-style: italic; color: var(--tier-c); filter: brightness(0.85); } .tier-banner .lvl { font-size: 14px; color: var(--ink-soft); margin-bottom: 22px; } .tier-banner .lvl b { color: var(--ink); font-weight: 600; } .tier-banner .skip-row { display: inline-flex; gap: 8px; padding: 8px; background: var(--cream-soft); border-radius: var(--r-pill); } .tier-banner .skip-row .skip { width: 44px; height: 44px; border-radius: 50%; background: var(--cream); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink-mute); border: 2px solid var(--cream-edge); } .tier-banner .skip-row .skip.now { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: scale(1.1); box-shadow: 0 4px 0 rgba(0,0,0,0.2); } /* Mastery / Free Play unlock */ .level-complete-screen { position: fixed; inset: 0; background: rgba(10, 18, 40, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9800; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; padding: 20px; } .level-complete-screen.show { opacity: 1; pointer-events: auto; } .level-complete-content { position: relative; background: var(--cream); padding: 48px 40px; border-radius: var(--r-xl); max-width: 560px; width: 100%; box-shadow: var(--sh-overlay); text-align: center; overflow: hidden; } .level-complete-content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--tier-free); } .level-complete-content .mastery-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tier-free); font-weight: 700; padding: 6px 14px; background: rgba(92, 91, 203, 0.10); border-radius: var(--r-pill); margin-bottom: 14px; } .level-complete-content .mascot-cele { width: 130px; height: 130px; margin: 0 auto 14px; } .level-complete-content h2 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; } .level-complete-content h2 em { font-style: italic; color: var(--tier-free); } .level-complete-content p { font-size: 16px; color: var(--ink-soft); margin-bottom: 24px; } .level-complete-content p b { color: var(--ink); font-weight: 600; } .level-complete-content .actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ════════════════════════════════════════════════════════════ GEAR PANEL (re-skinned) ════════════════════════════════════════════════════════════ */ .gear-panel { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } .gear-button { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--cream); border: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px -6px rgba(0,0,0,0.5); transition: transform 0.3s ease; } .gear-button:hover { transform: rotate(60deg); } .gear-button svg { width: 24px; height: 24px; } .gear-content { position: absolute; bottom: 70px; right: 0; width: 340px; max-width: calc(100vw - 40px); max-height: 70vh; background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--sh-overlay); overflow: hidden; transform: translateY(20px) scale(0.95); opacity: 0; pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease; border: 1px solid var(--cream-edge); display: flex; flex-direction: column; } .gear-content.active { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .gear-header { background: var(--ink); color: var(--cream); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; } .gear-header h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; } .gear-close { background: rgba(255, 255, 255, 0.12); border: none; color: var(--cream); width: 32px; height: 32px; border-radius: 50%; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .gear-close:hover { background: rgba(255, 255, 255, 0.22); } .gear-tabs { display: flex; background: var(--cream-soft); border-bottom: 1px solid var(--cream-edge); } .gear-tab { flex: 1; padding: 10px 6px; border: none; background: transparent; font-size: 12px; font-weight: 600; color: var(--ink-mute); border-bottom: 2px solid transparent; transition: all 0.2s ease; } .gear-tab.active { background: var(--cream); color: var(--ink); border-bottom-color: var(--tier-c); } .gear-tab:hover { color: var(--ink); } .gear-pages { overflow-y: auto; padding: 16px; flex: 1; } .gear-page { display: none; } .gear-page.active { display: block; } .gear-page h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 12px; color: var(--ink); } .gear-page ol, .gear-page p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 10px; } .gear-page ol { padding-left: 18px; } .gear-page li { margin-bottom: 6px; } .gear-page p b, .gear-page p strong { color: var(--ink); font-weight: 600; } .stat-box { background: var(--cream-soft); border: 1px solid var(--cream-edge); padding: 12px 14px; border-radius: var(--r-md); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } .stat-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); } .stat-value { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); } .setting-item { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--cream-edge); } .setting-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .setting-item label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; } .setting-item strong { display: block; margin-bottom: 8px; color: var(--ink); font-weight: 600; font-size: 14px; } .setting-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); } /* Skip-count / speed pickers — single-select gel pills (.gel.sz-sm, see the GEL BUTTON FAMILY block above), each option its own house hue; the chosen one sits pressed via .gel.active (JS already toggles this exact class in selectSkipCount()/selectSpeed()). font-family override keeps the numeral-heavy skip labels ("2s"/"10s") on the display face instead of the gel family's default UI face. */ .skip-btn, .speed-btn { font-family: var(--font-display); } /* Skip-count picker: hidden during levelled play (the ladder controls skip order there); revealed in Free Play only. */ .skip-btn { display: none; } body.free-play-mode .skip-btn { display: inline-flex; } .skip-picker-row { display: none; } body.free-play-mode .skip-picker-row { display: flex !important; } /* Speed picker: available in BOTH normal ladder play and Free Play — it's a march-speed multiplier layered on top of the level's own pace (see SPEED_PREF_MULTIPLIER in the script) and persists for the session. */ .speed-btn { display: inline-flex; } .speed-picker-row { display: flex; } /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body { padding: 12px; } .game-inner { padding: 12px; } .game-info { gap: 6px; } .info-item { flex: 1 1 calc(50% - 4px); padding: 8px 12px; } .info-item.tier-chip { flex: 1 1 100%; } .info-value { font-size: 19px; } .pattern-display { padding: 12px 14px; gap: 12px; } .pattern-hint { font-size: 19px; } .pattern-progress { max-width: 100%; margin-top: 4px; } .garland-container { padding: 28px 8px; min-height: 220px; } .number-circle { width: 92px; height: 92px; font-size: 36px; border-width: 3.5px; } .mascot-peek { width: 90px; height: 90px; right: -8px; bottom: -14px; } /* The HUD chips wrap to multiple rows at this width, growing much taller than on desktop — reposition Sunny so the sky-sun instance (the live in-game mascot) sits below the HUD instead of under it. */ .scenery .sky-sun, .scenery-front .sky-sun { top: 236px; left: 16px; width: 100px; height: 100px; } .scenery .sun-halo, .scenery-front .sun-halo { top: 216px; left: -4px; width: 140px; height: 140px; } .welcome-content { padding: 40px 24px 32px; } .welcome-content h1 { font-size: 36px; } .welcome-mascot { width: 150px; height: 150px; } .game-over-screen { padding: 32px 24px; } .game-over-screen h2 { font-size: 28px; } .tier-banner { min-width: 0; width: calc(100% - 32px); padding: 28px 24px; } .tier-banner h2 { font-size: 30px; } .level-complete-content { padding: 36px 24px; } .gear-button { width: 50px; height: 50px; } .gear-content { width: calc(100vw - 40px); } } @media (max-width: 420px) { .number-circle { width: 80px; height: 80px; font-size: 30px; } .info-value { font-size: 17px; } .info-label { font-size: 10px; } .pattern-icon { width: 36px; height: 36px; font-size: 15px; } /* The base rule's min-width:140px (still in effect from the unconditional .info-item rule) is a hair wider than 50% of the row at ~320-360px viewports, which silently forces every chip to wrap to its own full- width row (7 rows instead of a 4-row 2-column grid) — a big, easy-to- miss chunk of extra page height. Drop the floor so the 50% basis set at 768px can actually apply down here. */ .info-item { min-width: 0; } } /* ════════════════════════════════════════════════════════════ SHORT VIEWPORTS (height, not width) — a phone in portrait with the browser's address bar showing, or a small laptop window, can have far less visible height than its width would suggest. Independent of the max-width rules above (a 360px-wide phone can be 600px tall or 800px tall), so this is gated on max-height instead — only compresses vertical rhythm when there's genuinely little of it to spare, and leaves the normal (taller) mobile layout alone. Goal: the welcome card and the in-game HUD+track both fit without scrolling down to ~568px tall (the project's smallest documented QA breakpoint, 320×568) — overflow-y:auto on body (see top of file) is the fallback safety net if an even shorter device still doesn't quite fit. ════════════════════════════════════════════════════════════ */ @media (max-height: 640px) { .welcome-content { padding: 22px 24px 18px; } .start-here-badge { margin-bottom: 8px; } .game-family { margin-bottom: 8px; } .welcome-content h1 { font-size: 28px; margin-bottom: 6px; } .welcome-content .tagline { font-size: 14.5px; margin-bottom: 12px; } .welcome-mascot { width: 84px; height: 84px; margin: 0 auto 10px; } .welcome-mascot .f { display: none; } /* floating number bubbles — decorative only */ .welcome-btn { padding: 11px 24px; font-size: 17px; } .welcome-about-link { margin: 4px auto 8px; } .siblings { margin-top: 10px; } .game-inner { padding: 8px; } .game-info { margin-bottom: 6px; gap: 4px; } .info-item { padding: 4px 8px; } .info-value { font-size: 15px; } .pattern-display { padding: 6px 12px; margin-bottom: 6px; } .garland-container { padding: 8px 8px; min-height: 130px; } /* The scenery (clouds/birds/butterflies/hills/halo) is absolute- positioned with pixel offsets tuned for the taller ~220-400px garland-container — at this compressed 130px height they'd collide with the HUD above or spill into the controls below. Hide the purely decorative pieces and the duplicate front layer; keep #mascot (Sunny — the actual game mascot, not decoration, see MASCOT-SYSTEM.md) visible but small and pinned safely inside the shrunk container. The ball track (the actual game) is unaffected either way. */ .scenery-front { display: none; } .scenery .cloud, .scenery .bird, .scenery .butterfly, .scenery .god-rays, .scenery .hills, .scenery .sun-halo { display: none; } .scenery .sky-sun { top: 6px; left: 6px; width: 50px; height: 50px; animation: none; } .controls { padding-top: 0; } } /* ────────────────────────────────────────────────────────── Universal MathGuru Sun mascot CSS (per MASCOT-SYSTEM.md) ────────────────────────────────────────────────────────── */ .hero-sun { overflow: visible; filter: drop-shadow(0 6px 10px rgba(245, 180, 0, 0.32)); animation: sun-breathe 5.5s ease-in-out infinite; transform-origin: center; } @keyframes sun-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } .hero-sun .sun-rays { transform-origin: 100px 100px; animation: sun-rays-spin 28s linear infinite; } @keyframes sun-rays-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hero-sun .sun-eyes { transform-origin: 100px 100px; animation: sun-blink 4.5s ease-in-out infinite; } @keyframes sun-blink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 96% { transform: scaleY(0.08); } } .hero-sun .sun-mouth { transform-origin: 100px 134px; animation: sun-mouth-pulse 5.5s ease-in-out infinite; } @keyframes sun-mouth-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .hero-sun .sun-eyebrows { animation: sun-brow-lift 5.5s ease-in-out infinite; transform-origin: 100px 80px; } @keyframes sun-brow-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.8px); } } .hero-sun:not(.expr-cheer):not(.expr-sad) .sun-iris-left, .hero-sun:not(.expr-cheer):not(.expr-sad) .sun-iris-right { animation: sun-ambient-gaze 9s ease-in-out infinite; transform-origin: center; } @keyframes sun-ambient-gaze { 0%, 100% { transform: translate(0, 0); } 22% { transform: translate(-1.5px, -0.4px); } 44% { transform: translate(0.6px, 0.4px); } 66% { transform: translate(1.5px, -0.4px); } 88% { transform: translate(-0.5px, 0.4px); } } /* Hidden state overlays — shown only by the matching expr-* class below */ .hero-sun .sun-eyes-happy, .hero-sun .sun-mouth-o, .hero-sun .sun-mouth-sad, .hero-sun .sun-eyebrows-sad { display: none; } /* CHEER — single correct catch */ .hero-sun.expr-cheer { animation: sun-cheer-bounce 0.6s ease-out, sun-breathe 5.5s ease-in-out infinite 0.6s; } @keyframes sun-cheer-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.15) translateY(-6px); } 70% { transform: scale(0.95) translateY(2px); } 100% { transform: scale(1.035) translateY(0); } } .hero-sun.expr-cheer .sun-eyes { animation: none; transform-origin: 100px 100px; transform: scaleY(0); } .hero-sun.expr-cheer .sun-eyes-happy { display: block; } .hero-sun.expr-cheer .sun-mouth { animation: none; transform-origin: 100px 134px; transform: scale(1.18); } /* SURPRISED — held while a catch is "almost there" */ .hero-sun.expr-surprised .sun-eyes { animation: sun-surprised-blink 4.5s ease-in-out infinite; transform-origin: 100px 100px; } @keyframes sun-surprised-blink { 0%, 92%, 100% { transform: scale(1.25); } 94%, 96%, 98% { transform: scaleX(1.25) scaleY(0.06); } } .hero-sun.expr-surprised .sun-mouth { animation: none; display: none; } .hero-sun.expr-surprised .sun-mouth-o { display: block; } .hero-sun.expr-surprised .sun-eyebrows { animation: none; transform: translateY(-4px); } /* SAD — wrong tap */ .hero-sun.expr-sad .sun-mouth { animation: none; display: none; } .hero-sun.expr-sad .sun-mouth-sad { display: block; } .hero-sun.expr-sad .sun-eyebrows { display: none; } .hero-sun.expr-sad .sun-eyebrows-sad { display: block; } .hero-sun.expr-sad .sun-iris-left, .hero-sun.expr-sad .sun-iris-right { animation: none; transform: translateY(3px); } /* THINK — idle too long */ .hero-sun.expr-think .sun-iris-left, .hero-sun.expr-think .sun-iris-right { animation: none; transform: translateY(-3px); } .hero-sun.expr-think .sun-eyebrows { animation: none; transform: translateY(-3px); } /* Excited (winStreak >= 2 / Free Play unlocked screen): a touch bigger smile + extra bounce */ .hero-sun.expr-excited { animation: sun-excited-bounce 1.2s ease-in-out infinite; } @keyframes sun-excited-bounce { 0%, 100% { transform: translateY(0) scale(1.02); } 50% { transform: translateY(-6px) scale(1.06); } } .hero-sun.expr-excited .sun-mouth { animation: sun-mouth-excited 0.9s ease-in-out infinite; } @keyframes sun-mouth-excited { 0%, 100% { transform: scale(1.08); } 50% { transform: scale(1.18); } } /* WINK — left eye blinks alone, personality flourish */ .hero-sun.expr-wink .sun-eyes { animation: none; } .hero-sun.expr-wink .sun-eye-left { animation: sun-wink-left 6s ease-in-out infinite; transform-origin: 82px 100px; } @keyframes sun-wink-left { 0%, 94%, 100% { transform: scaleY(1); } 96%, 98% { transform: scaleY(0.08); } } .sibling.disabled { cursor: not-allowed; opacity: 0.55; } .sibling.disabled:hover { transform: none; background: inherit; } /* ────────────────────────────────────────────────────────── About this game modal (4-tab SEO pedagogy panel) ────────────────────────────────────────────────────────── */ .welcome-about-link { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; color: var(--ink-soft); font-family: var(--font-body, 'Fredoka', sans-serif); font-size: 13px; font-weight: 600; cursor: pointer; margin: 6px auto 14px; padding: 4px 8px; border-radius: 8px; transition: color 0.15s, background 0.15s; } .welcome-about-link:hover { color: var(--ink); background: rgba(31, 39, 71, 0.06); } .welcome-about-link span { font-size: 15px; } .about-overlay { position: fixed; inset: 0; background: rgba(15, 23, 41, 0.78); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 20px; /* above .welcome-screen (9999) — the About button lives ON the welcome screen */ font-family: 'Fredoka', sans-serif; } .about-overlay.active { display: flex; } .about-modal { background: var(--cream, #FFF6E6); border: 3px solid var(--ink, #1F2747); border-radius: 20px; max-width: 700px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); position: relative; } .about-close { position: absolute; top: 20px; right: 24px; background: var(--ink, #1F2747); color: #FFFFFF; border: 2px solid #FFFFFF; border-radius: 999px; width: 32px; height: 32px; font-size: 14px; cursor: pointer; z-index: 2; display: inline-flex; align-items: center; justify-content: center; } .about-tabs { display: flex; background: var(--ink, #1F2747); padding: 12px 16px 0; gap: 4px; flex-wrap: wrap; } .about-tab { background: transparent; color: rgba(255, 255, 255, 0.65); border: 0; padding: 8px 14px; font-size: 13px; font-weight: 700; font-family: 'Fredoka', sans-serif; cursor: pointer; border-radius: 10px 10px 0 0; letter-spacing: 0.02em; transition: background 0.15s, color 0.15s; } .about-tab:hover { color: #FFFFFF; } .about-tab.active { background: var(--cream, #FFF6E6); color: var(--ink, #1F2747); } .about-body { padding: 24px 32px 28px; overflow-y: auto; color: var(--ink, #1F2747); line-height: 1.55; } .about-pane { display: none; } .about-pane.active { display: block; } .about-pane h2 { font-family: var(--font-display, 'Fraunces', serif); font-size: 24px; margin: 0 0 14px; color: var(--ink, #1F2747); font-weight: 700; } .about-pane h3 { font-size: 16px; margin: 18px 0 6px; color: var(--ink, #1F2747); font-weight: 700; } .about-pane p, .about-pane li { font-size: 14.5px; margin-bottom: 10px; } .about-pane ul { padding-left: 22px; margin: 8px 0 12px; } .about-pane strong { color: var(--ink, #1F2747); } .about-pane a { color: #db2777; font-weight: 600; } @media (max-width: 540px) { .about-tabs { padding: 8px 10px 0; } .about-tab { padding: 7px 10px; font-size: 12px; } .about-body { padding: 20px 22px 24px; } .about-pane h2 { font-size: 20px; } .about-pane p, .about-pane li { font-size: 14px; } }