/* ===== Math Adventure — kid-friendly styles (ages 6–9) ===== */ :root { --bg1: #7c4dff; --bg2: #18c8ff; --card: #ffffff; --ink: #3a2e6e; --pink: #ff6bcb; --yellow: #ffd23f; --green: #2ecc71; --red: #ff5a5f; --blue: #4d9dff; --orange: #ff9f43; --purple: #9b5de5; --shadow: 0 8px 0 rgba(0, 0, 0, 0.12); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; min-height: 100%; overflow: hidden; font-family: "Baloo 2", "Comic Sans MS", "Chalkboard SE", "Segoe UI Rounded", system-ui, -apple-system, sans-serif; color: var(--ink); user-select: none; /* No pinch or double-tap zoom anywhere — rapid taps on the same key (e.g. entering "11") must never trigger iOS double-tap zoom. */ touch-action: manipulation; } /* Gradient painted on , fixed to the viewport, with a solid fallback colour so it always covers the full screen — no white gaps on overscroll, rotation, or when content is shorter/taller than the viewport. */ html { background-color: var(--bg1); background-image: linear-gradient(160deg, var(--bg1), var(--bg2)); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } body { background: transparent; } /* Each screen (keuzescherm, spellen, feest) is a full-height layer. */ .screen { position: relative; height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } /* !important: must also beat `.screen.game { display: grid }` in landscape. */ .screen[hidden] { display: none !important; } .push-right { margin-left: auto; } /* ===== Top bar ===== */ .topbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px 4px; } .score, .streak { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 20px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1); } .score-star { filter: drop-shadow(0 0 4px var(--yellow)); } .streak { margin-left: 2px; } .streak.dim { opacity: 0.45; filter: grayscale(0.8); } .icon-btn { border: none; background: rgba(255, 255, 255, 0.9); width: 46px; height: 46px; border-radius: 50%; font-size: 24px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1); transition: transform 0.1s; } .icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } /* ===== Play area ===== */ .play { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 6px 16px; min-height: 0; } .mascot { font-size: clamp(48px, 14vw, 80px); line-height: 1; transition: transform 0.25s; } .mascot.happy { animation: mascot-jump 0.6s ease; } .mascot.sad { animation: mascot-shake 0.5s ease; } @keyframes mascot-jump { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-24px) scale(1.15) rotate(-8deg); } 60% { transform: translateY(0) scale(1.05) rotate(6deg); } } @keyframes mascot-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } } .equation { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; /* keep "a op b = ?" on a single line */ white-space: nowrap; gap: clamp(4px, 2vw, 12px); background: var(--card); border-radius: 28px; padding: clamp(18px, 5vw, 32px) clamp(14px, 4vw, 26px); box-shadow: var(--shadow); font-weight: 800; font-size: clamp(30px, 10.5vw, 58px); width: 100%; max-width: 560px; } .operand, .operator, .equals { line-height: 1; } .operator { color: var(--pink); } .equals { color: var(--ink); opacity: 0.55; } .operand { color: var(--purple); min-width: 1em; text-align: center; } #opA { color: var(--blue); } .answer-box { min-width: 1.4em; text-align: center; color: var(--orange); border-bottom: 6px dashed rgba(155, 93, 229, 0.35); padding: 0 8px 2px; } .answer-box.filled { color: var(--ink); border-bottom-color: var(--purple); } .answer-box.correct { color: var(--green); animation: pop 0.4s ease; } .answer-box.wrong { color: var(--red); animation: wrongshake 0.45s ease; } @keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } } @keyframes wrongshake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(8px); } } /* Flying answer that becomes next first operand */ .fly-answer { position: fixed; font-weight: 800; color: var(--green); z-index: 60; pointer-events: none; transition: transform 0.55s cubic-bezier(0.5, -0.4, 0.3, 1.4), opacity 0.55s; } .feedback { min-height: 34px; font-size: clamp(18px, 5vw, 26px); font-weight: 800; text-align: center; } .feedback.good { color: #eaffea; text-shadow: 0 2px 6px rgba(0,0,0,0.2); } .feedback.bad { color: #fff0f0; text-shadow: 0 2px 6px rgba(0,0,0,0.2); } /* ===== Numpad ===== */ .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); } .key { border: none; border-radius: 22px; font-size: clamp(26px, 8vw, 38px); font-weight: 800; font-family: inherit; padding: clamp(12px, 3.5vw, 20px) 0; cursor: pointer; color: var(--ink); background: var(--card); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14); transition: transform 0.08s, box-shadow 0.08s, background 0.1s; } .key:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14); } .key.num:active { background: #fff5cc; } .key.action { color: #fff; } .key.clear { background: var(--orange); } .key.check { background: var(--green); } /* ===== Settings modal ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(40, 20, 80, 0.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 80; } .modal-overlay[hidden] { display: none; } .modal { background: var(--card); border-radius: 30px; padding: 24px 22px 22px; width: 100%; max-width: 420px; max-height: calc(100dvh - 40px); overflow-y: auto; box-shadow: 0 12px 0 rgba(0, 0, 0, 0.15); animation: pop-in 0.3s ease; } @keyframes pop-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal h2 { margin: 0 0 18px; text-align: center; font-size: 30px; } .setting-block { margin-bottom: 22px; } .setting-label { display: block; font-size: 20px; font-weight: 800; margin-bottom: 10px; } .slider-row { display: flex; align-items: center; gap: 14px; } .max-value { font-size: 30px; font-weight: 800; color: var(--purple); min-width: 2.2em; text-align: center; background: #f3eeff; border-radius: 14px; padding: 2px 8px; } input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--blue)); outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 5px solid var(--purple); cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,0.2); } input[type="range"]::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 5px solid var(--purple); cursor: pointer; } .op-toggles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .op-toggle { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 4px solid #e7e0ff; background: #faf8ff; border-radius: 20px; padding: 12px 6px; font-size: 18px; font-weight: 800; font-family: inherit; color: var(--ink); cursor: pointer; transition: transform 0.1s; opacity: 0.55; } .op-toggle .op-emoji { font-size: 30px; } .op-toggle.on { opacity: 1; border-color: var(--green); background: #eafff2; box-shadow: 0 5px 0 rgba(46, 204, 113, 0.35); } .op-toggle:active { transform: scale(0.95); } .hint { min-height: 18px; margin: 10px 2px 0; font-size: 15px; font-weight: 700; color: var(--red); text-align: center; } .big-btn { display: block; width: 100%; border: none; border-radius: 22px; background: var(--purple); color: #fff; font-size: 24px; font-weight: 800; font-family: inherit; padding: 16px; cursor: pointer; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2); transition: transform 0.1s, box-shadow 0.1s; } .big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); } /* ===== Confetti ===== */ #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; } /* ===== Responsive: tablets / iPad (bigger, roomier) ===== */ @media (min-width: 700px) { .screen { max-width: 780px; } .play { gap: 16px; } .equation { font-size: clamp(46px, 7vw, 74px); border-radius: 36px; padding: 34px 34px; max-width: 640px; } .mascot { font-size: clamp(72px, 11vw, 116px); } /* Cap + centre the numpad so keys are comfortable, not gigantic. */ .numpad { max-width: 620px; margin: 0 auto; width: 100%; gap: 16px; padding: 14px 24px calc(20px + env(safe-area-inset-bottom)); } .key { border-radius: 28px; font-size: clamp(34px, 5vw, 46px); padding: 24px 0; } .score, .streak { font-size: 24px; } .icon-btn { width: 54px; height: 54px; font-size: 28px; } } /* ===== Responsive: landscape (any height) ===== */ /* Exercise on the left, numpad centred on the right — side by side so the child never has to scroll, on phones and tablets alike. Sizes scale with viewport height (the limiting axis in landscape) and cap on big screens. */ @media (orientation: landscape) { .screen.game { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top top" "play pad"; column-gap: clamp(12px, 4vw, 48px); max-width: 1100px; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .topbar { grid-area: top; } .play { grid-area: play; padding: 4px 8px 4px 16px; gap: clamp(6px, 2vh, 18px); } .numpad { grid-area: pad; align-self: center; width: min(44vw, 440px); max-width: none; margin: 0; gap: clamp(6px, 1.6vh, 16px); padding: 4px 16px; } .mascot { font-size: clamp(30px, 9vh, 92px); } .equation { font-size: clamp(28px, 8.5vh, 72px); padding: clamp(12px, 3vh, 30px) clamp(14px, 3vw, 28px); border-radius: clamp(18px, 3vh, 30px); max-width: min(56vw, 600px); } .feedback { min-height: 20px; font-size: clamp(15px, 3.4vh, 24px); } .key { font-size: clamp(20px, 6vh, 54px); padding: clamp(8px, 2vh, 22px) 0; border-radius: clamp(14px, 2.4vh, 26px); } } /* Respect users who prefer less motion. */ @media (prefers-reduced-motion: reduce) { .mascot.happy, .mascot.sad, .answer-box.correct, .answer-box.wrong, .modal { animation: none !important; } .fly-answer { transition: opacity 0.2s linear !important; } } /* ===================================================================== */ /* ===== Keuzescherm, Splitsen & feest ================================= */ /* ===================================================================== */ .menu-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.6vh, 16px); padding: 10px 22px calc(18px + env(safe-area-inset-bottom)); min-height: 0; } .home-title { text-align: center; color: #fff; font-size: clamp(30px, 8vw, 44px); font-weight: 800; text-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); line-height: 1.1; margin: 0; } .home-sub { text-align: center; color: #fff; opacity: 0.9; font-size: clamp(16px, 4vw, 21px); font-weight: 700; margin: 0; } /* --- game cards --- */ .gamecards { display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 22px); width: 100%; max-width: 420px; margin: 6px auto 0; } .gamecard { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--card); border: none; border-radius: 24px; padding: clamp(14px, 2.6vh, 24px) 16px; font-family: inherit; color: var(--ink); cursor: pointer; box-shadow: 0 7px 0 rgba(0, 0, 0, 0.16); transition: transform 0.1s, box-shadow 0.1s; } .gamecard:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16); } .gc-icon { font-size: clamp(34px, 6vh, 48px); line-height: 1; } .gc-name { font-size: clamp(22px, 4.4vh, 30px); font-weight: 800; } .gc-desc { font-size: clamp(13px, 2.4vh, 16px); font-weight: 700; opacity: 0.6; line-height: 1.3; } /* mini split-diagram on the Splitsen card */ .gc-diagram { position: relative; width: 116px; height: clamp(48px, 8vh, 62px); } .gc-diagram svg { position: absolute; inset: 0; width: 100%; height: 100%; } .gc-diagram line { stroke: #c9b8f5; stroke-width: 3.5; stroke-linecap: round; } .gd { position: absolute; width: 36px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; background: #f3eeff; } .gd.top { left: 40px; top: 0; color: var(--purple); background: #ece4ff; } .gd.left { left: 4px; bottom: 0; color: var(--blue); } .gd.right { right: 4px; bottom: 0; color: var(--orange); } /* --- splits-setup & feest --- */ .bigq { text-align: center; color: #fff; font-size: clamp(22px, 5.4vw, 32px); font-weight: 800; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); margin: 0; padding: 0 12px; } .numchoices { display: flex; flex-direction: column; gap: clamp(12px, 2.2vh, 20px); width: 100%; max-width: 320px; margin: 8px auto 0; } .numchoice { background: var(--card); border: none; border-radius: 22px; padding: clamp(12px, 2.2vh, 20px); text-align: center; font-family: inherit; font-size: clamp(30px, 6vh, 42px); font-weight: 800; color: var(--ink); cursor: pointer; box-shadow: 0 7px 0 rgba(0, 0, 0, 0.16); transition: transform 0.1s, box-shadow 0.1s; } .numchoice:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16); } .numchoice.c5 { color: var(--blue); } .numchoice.c10 { color: var(--purple); } .numchoice.rnd { color: var(--pink); } .numchoice small { display: block; font-size: clamp(13px, 2vh, 16px); font-weight: 700; opacity: 0.6; } .numchoice.again { font-size: clamp(20px, 3.6vh, 27px); color: var(--green); } .numchoice.other { font-size: clamp(20px, 3.6vh, 27px); color: var(--purple); } .mascot.festive { font-size: clamp(64px, 12vh, 110px); } /* --- splitsen spel --- */ .splitwrap { position: relative; width: min(82vw, 320px); margin: 0 auto; } .sbox { width: 31%; min-width: 66px; height: clamp(48px, 7.5vh, 88px); background: var(--card); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: clamp(26px, 5vh, 44px); font-weight: 800; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.14); } .sbox.top { margin: 0 auto; color: var(--purple); border: 4px solid var(--purple); } .sbox.given { color: var(--blue); } .sbox.answer { color: var(--orange); border: 4px dashed var(--orange); } .sbox.answer.filled { color: var(--ink); } .sbox.answer.ok { color: var(--green); border: 4px solid var(--green); animation: pop 0.4s ease; } .sbox.answer.wrong { color: var(--red); border-color: var(--red); animation: wrongshake 0.45s ease; } .legs { display: block; width: 100%; height: clamp(28px, 5vh, 56px); } .legs line { stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: 0.92; } .sbot { display: flex; justify-content: space-between; } /* Keep the splits stack comfortably clear of the topbar and the numpad: a slightly smaller mascot, and guaranteed breathing room at the bottom (on real iPhones the safe-areas eat into the play area). */ #scrSplits .play { gap: clamp(6px, 1.4vh, 14px); padding-bottom: clamp(12px, 2.4vh, 26px); } #splitsMascot { font-size: clamp(34px, 6.5vh, 84px); } #scrSplits .feedback { min-height: clamp(22px, 4vh, 34px); } /* Splitsen in landscape: diagram stays compact next to the numpad. */ @media (orientation: landscape) { .splitwrap { width: min(38vw, 340px); } } /* Tablets portrait: roomier diagram. */ @media (min-width: 700px) and (orientation: portrait) { .splitwrap { width: 400px; } .gamecards, .numchoices { max-width: 460px; } } /* ===== Taalkeuze in instellingen ===== */ .lang-toggles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .lang-toggle { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 4px solid #e7e0ff; background: #faf8ff; border-radius: 16px; padding: 8px 4px; font-size: 14px; font-weight: 800; font-family: inherit; color: var(--ink); cursor: pointer; transition: transform 0.1s; opacity: 0.55; } .lang-flag { font-size: 24px; line-height: 1; } .lang-toggle.on { opacity: 1; border-color: var(--green); background: #eafff2; box-shadow: 0 4px 0 rgba(46, 204, 113, 0.35); } .lang-toggle:active { transform: scale(0.95); }