:root { --ink:#1d2a49; --muted:#687693; --cream:#fff8ed; --white:#fff; --purple:#6b57ff; --blue:#62a2ff; --coral:#ff676d; --yellow:#ffc957; --mint:#20cfad; --navy:#1c294d; --shadow:0 22px 50px rgba(39,49,84,.11); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { margin:0; font-family:Nunito,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--cream); line-height:1.5; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.page { min-height:100vh; overflow:hidden; }
.container { position:relative; z-index:2; width:min(1120px,calc(100% - 56px)); margin:0 auto; }
.site-header { position:fixed; inset:0 0 auto; z-index:1000; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px; padding:0 max(28px,calc((100% - 1200px)/2 + 28px)); background:var(--white); box-shadow:0 15px 35px rgba(39,49,84,.08); }
.brand { flex:0 0 280px; max-width:280px; font-size:.82rem; font-weight:900; line-height:1.15; letter-spacing:.02em; text-transform:uppercase; }
.header-actions { display:flex; justify-content:flex-end; flex:1 1 auto; min-width:0; }
.nav { display:flex; align-items:center; gap:24px; color:var(--muted); font-size:.78rem; font-weight:800; }
.nav a { transition:color 160ms ease,transform 160ms ease; }
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"] { color:var(--purple); }
.nav a:hover { transform:translateY(-1px); }
.nav-cta { min-height:42px; display:inline-flex; align-items:center; padding:0 22px; border-radius:999px; color:white!important; background:var(--purple); box-shadow:0 12px 25px rgba(107,87,255,.23); }
.menu-toggle { display:none; width:44px; height:44px; padding:11px; border:0; border-radius:12px; background:#f4f1ff; }
.menu-toggle span { display:block; width:100%; height:2px; margin:4px 0; border-radius:2px; background:var(--purple); }
.game-hero { position:relative; min-height:650px; padding:146px 0 86px; background:linear-gradient(135deg,#eeeaff 0%,#f9f7ff 48%,#e2fbf5 100%); }
.hero-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(50px,7vw,88px); align-items:center; }
.eyebrow { display:inline-block; color:var(--purple); font-size:.76rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.hero-copy h1 { max-width:570px; margin:14px 0 22px; font-size:clamp(3.4rem,6.2vw,5.4rem); line-height:.94; letter-spacing:-.055em; }
.hero-copy p { max-width:560px; margin:0 0 30px; color:var(--muted); font-size:1.05rem; font-weight:700; }
.hero-button { display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:0 25px; border-radius:999px; color:white; background:var(--purple); font-size:.86rem; font-weight:900; box-shadow:0 15px 30px rgba(107,87,255,.25); }
.hero-button span { font-size:1.1rem; }
.hero-board { position:relative; padding:28px; border:8px solid rgba(255,255,255,.85); border-radius:36px; background:var(--white); box-shadow:0 30px 70px rgba(74,65,145,.18); transform:rotate(2deg); }
.hero-board::after { content:""; position:absolute; right:58px; bottom:-32px; width:100px; height:38px; border-radius:0 0 48px 48px; background:var(--yellow); transform:rotate(-8deg); z-index:-1; }
.board-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; font-size:1.05rem; font-weight:900; }
.smiley { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--yellow); font-size:1.55rem; transform-origin:center; animation:smiley-bounce 2.6s ease-in-out 1s infinite; }
.learning-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; perspective:700px; }
.tile { position:relative; display:grid; place-items:center; aspect-ratio:1; overflow:hidden; border-radius:22px; color:white; font-size:clamp(2rem,4vw,3.5rem); font-weight:900; box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 12px 22px rgba(39,49,84,.1); transform-origin:center bottom; will-change:transform; animation:tile-intro 680ms cubic-bezier(.2,.85,.28,1.25) both,tile-bob 3.4s ease-in-out 900ms infinite; transition:filter 180ms ease,box-shadow 180ms ease; }
.tile::after { content:""; position:absolute; inset:-35%; pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%); transform:translateX(-145%) rotate(12deg); animation:tile-shine 3.8s ease-in-out 1.5s infinite; }
.tile:nth-child(1) { animation-delay:80ms,900ms; }.tile:nth-child(2) { animation-delay:160ms,1.05s; }.tile:nth-child(3) { animation-delay:240ms,1.2s; }.tile:nth-child(4) { animation-delay:320ms,1.35s; }
.tile:nth-child(1)::after { animation-delay:1.5s; }.tile:nth-child(2)::after { animation-delay:1.75s; }.tile:nth-child(3)::after { animation-delay:2s; }.tile:nth-child(4)::after { animation-delay:2.25s; }
.tile-purple { background:var(--purple); }.tile-yellow { color:var(--ink); background:var(--yellow); }.tile-coral { background:var(--coral); }.tile-mint { background:var(--mint); }
.board-message { margin-top:22px; padding:15px 18px; border-radius:16px; color:var(--purple); background:linear-gradient(100deg,#f2efff,#e8e3ff,#f2efff); background-size:220% 100%; text-align:center; font-size:.9rem; font-weight:900; animation:message-glow 4s ease-in-out infinite; }
@media (hover:hover) and (pointer:fine) { .tile:hover { filter:saturate(1.12) brightness(1.04); box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 18px 30px rgba(39,49,84,.2); animation-play-state:paused; } }
@keyframes tile-intro { 0% { opacity:0; transform:translateY(28px) rotate(-8deg) scale(.7); } 68% { opacity:1; transform:translateY(-7px) rotate(3deg) scale(1.06); } 100% { opacity:1; transform:translateY(0) rotate(0) scale(1); } }
@keyframes tile-bob { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-8px) rotate(2deg); } }
@keyframes tile-shine { 0%,58% { transform:translateX(-145%) rotate(12deg); } 78%,100% { transform:translateX(145%) rotate(12deg); } }
@keyframes smiley-bounce { 0%,100% { transform:translateY(0) rotate(0); box-shadow:0 0 0 0 rgba(255,201,87,.35); } 50% { transform:translateY(-5px) rotate(8deg); box-shadow:0 0 0 9px rgba(255,201,87,0); } }
@keyframes message-glow { 0%,100% { background-position:0 50%; } 50% { background-position:100% 50%; } }
.hero-bubble { position:absolute; border-radius:50%; opacity:.8; }.bubble-one { width:180px; height:180px; left:-70px; bottom:-55px; background:#ffd5d7; }.bubble-two { width:130px; height:130px; right:-30px; top:120px; background:#ffe6a8; }
.hero-star { position:absolute; color:var(--yellow); font-size:2rem; transform:rotate(16deg); }.star-one { left:46%; top:126px; }.star-two { right:5%; bottom:72px; color:var(--coral); font-size:1.5rem; }
.game-library { padding:100px 0 112px; background:#fffdfa; }
.section-heading { display:grid; grid-template-columns:1fr minmax(290px,430px); gap:40px; align-items:end; margin-bottom:48px; }
.section-heading h2,.grownups-card h2 { margin:10px 0 0; font-size:clamp(2.25rem,4vw,3.4rem); line-height:1.05; letter-spacing:-.035em; }
.section-heading p { margin:0; color:var(--muted); font-size:.94rem; font-weight:700; }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.game-card { overflow:hidden; border:1px solid #edf0f6; border-radius:28px; background:var(--white); box-shadow:0 15px 40px rgba(39,49,84,.07); transition:transform 180ms ease,box-shadow 180ms ease; }
.game-card:hover { transform:translateY(-7px) rotate(-.4deg); box-shadow:var(--shadow); }
.game-preview { min-height:190px; display:flex; align-items:center; justify-content:center; gap:12px; padding:28px; }
.game-content { padding:25px 26px 28px; }.game-tag { display:inline-block; margin-bottom:10px; color:var(--purple); font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.game-content h3 { margin:0 0 9px; font-size:1.35rem; }.game-content p { min-height:66px; margin:0 0 20px; color:var(--muted); font-size:.84rem; font-weight:700; }
.coming-soon { display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:999px; background:#f3f5fa; font-size:.7rem; font-weight:900; }
.game-loading,.game-empty { grid-column:1/-1; padding:54px 28px; border:2px dashed #ded9ff; border-radius:28px; color:var(--muted); background:#faf9ff; text-align:center; font-weight:800; }
.game-empty h3 { margin:10px 0 6px; color:var(--ink); font-size:1.45rem; }.game-empty p { max-width:520px; margin:0 auto; }.empty-symbol { display:grid; place-items:center; width:58px; height:58px; margin:0 auto; border-radius:18px; color:var(--ink); background:var(--yellow); font-size:1.5rem; transform:rotate(-5deg); }
.dynamic-preview { position:relative; overflow:hidden; background:linear-gradient(135deg,#ece8ff,#e4faf5); }.game-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.category-symbol { position:relative; z-index:1; display:grid; place-items:center; min-width:118px; height:94px; padding:0 18px; border-radius:25px; color:white; background:var(--purple); font-size:2.55rem; font-weight:900; letter-spacing:-.05em; box-shadow:inset 0 -8px 0 rgba(0,0,0,.08); transform:rotate(-5deg); }.category-decoration { position:absolute; right:22%; top:25px; color:var(--yellow); font-size:1.7rem; transform:rotate(14deg); }
.type-numbers .dynamic-preview { background:#eeeaff; }.type-numbers .category-symbol { background:var(--purple); }.type-alphabet .dynamic-preview { background:#e9f5ff; }.type-alphabet .category-symbol { background:var(--blue); }.type-colours .dynamic-preview { background:#fff0f1; }.type-colours .category-symbol { background:var(--coral); }.type-shapes .dynamic-preview { background:#e9fbf6; }.type-shapes .category-symbol { background:var(--mint); }.type-general .dynamic-preview { background:#fff8df; }.type-general .category-symbol { color:var(--ink); background:var(--yellow); }
.game-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }.question-count { color:var(--muted); font-size:.72rem; font-weight:900; }.play-game { min-height:38px; padding:0 16px; border:0; border-radius:999px; color:white; background:var(--purple); font:inherit; font-size:.74rem; font-weight:900; cursor:pointer; box-shadow:0 10px 20px rgba(107,87,255,.18); }.play-game:hover:not(:disabled) { transform:translateY(-1px); }.play-game:disabled { color:var(--muted); background:#edf0f5; box-shadow:none; cursor:not-allowed; }
.game-dialog[hidden] { display:none; }.game-dialog { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:24px; }.game-dialog-backdrop { position:absolute; inset:0; background:rgba(18,27,55,.76); backdrop-filter:blur(8px); }.game-player { position:relative; z-index:1; width:min(720px,100%); max-height:calc(100vh - 48px); overflow-y:auto; padding:38px; border:7px solid rgba(255,255,255,.62); border-radius:32px; background:white; box-shadow:0 35px 90px rgba(15,22,48,.35); }.game-open { overflow:hidden; }.player-close { position:absolute; top:18px; right:18px; z-index:2; display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:50%; color:var(--ink); background:#f1efff; font-size:1.65rem; line-height:1; cursor:pointer; }.player-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-right:44px; }.player-kicker { margin:0 0 8px; color:var(--purple); font-size:.7rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.player-header h2,.game-result h2 { margin:0; font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.08; }.score-pill { flex:0 0 auto; display:inline-flex; align-items:center; min-height:34px; padding:0 13px; border-radius:999px; color:var(--ink); background:var(--yellow); font-size:.72rem; font-weight:900; }.game-progress { height:8px; margin:22px 0 26px; overflow:hidden; border-radius:999px; background:#eceff5; }.game-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--purple),var(--mint)); transition:width 220ms ease; }.question-image { display:block; width:100%; max-height:280px; margin:0 0 24px; object-fit:contain; border-radius:20px; background:#f6f7fb; }.answer-grid { display:grid; gap:12px; }.answer-choice { min-height:56px; padding:12px 18px; border:2px solid #e8ebf4; border-radius:16px; color:var(--ink); background:white; font:inherit; font-size:1rem; font-weight:900; text-align:left; cursor:pointer; transition:border-color 150ms ease,background 150ms ease,transform 150ms ease; }.answer-choice:hover:not(:disabled),.answer-choice:focus-visible:not(:disabled) { border-color:var(--purple); background:#f8f7ff; transform:translateY(-1px); }.answer-choice.is-correct { border-color:var(--mint); color:#0b745d; background:#e8fbf6; }.answer-choice.is-wrong { border-color:var(--coral); color:#a82f35; background:#fff0f1; }.answer-feedback { min-height:26px; margin:16px 0 0; font-weight:900; }.answer-feedback.is-correct { color:#0b8065; }.answer-feedback.is-wrong { color:#b13a40; }.player-button { min-height:44px; padding:0 20px; border:1px solid #e3e7f0; border-radius:999px; color:var(--ink); background:white; font:inherit; font-size:.8rem; font-weight:900; cursor:pointer; }.player-button.primary { border-color:var(--purple); color:white; background:var(--purple); }.next-question { margin-top:12px; }.game-result { padding:24px 0 8px; text-align:center; }.result-star { display:grid; place-items:center; width:84px; height:84px; margin:0 auto 20px; border-radius:27px; color:var(--ink); background:var(--yellow); font-size:2.5rem; transform:rotate(-6deg); }.final-score { display:grid; justify-items:center; width:min(280px,100%); margin:22px auto 12px; padding:18px 24px; border:2px solid #ddd7ff; border-radius:22px; background:#f5f2ff; box-shadow:0 12px 28px rgba(107,87,255,.12); }.result-score-label { color:var(--purple); font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }.result-score-value { margin:3px 0; color:var(--ink); font-size:clamp(2.6rem,8vw,4rem); line-height:1; }.result-score-caption { color:var(--muted); font-size:.78rem; font-weight:800; }.result-note { margin:0; color:var(--muted); font-weight:700; }.result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.footer-brand { display:inline-flex; width:max-content; }
.score-pill { display:none!important; }
.game-result { position:relative; }
.result-star,.result-actions { position:relative; z-index:1; }
.whatsapp-share { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-color:#1ea952; color:white; background:#25d366; text-decoration:none; }
.whatsapp-share:hover,.whatsapp-share:focus-visible { background:#1ead53; }
.whatsapp-share svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.share-action-row { flex:0 0 100%; display:flex; justify-content:center; }
.result-actions > * { opacity:0; animation:result-button-slide-in .55s cubic-bezier(.2,.8,.3,1) both; }
.result-actions > :nth-child(1) { animation-delay:.12s; }
.result-actions > :nth-child(2) { animation-delay:.24s; }
.result-actions > :nth-child(3) { animation-delay:.36s; }
@keyframes result-button-slide-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.perfect-score-celebration { position:absolute; inset:-20px; overflow:hidden; border-radius:24px; pointer-events:none; }
.celebration-piece { position:absolute; font-size:clamp(1.15rem,4vw,1.8rem); opacity:0; animation:celebration-corner-burst 1.8s cubic-bezier(.2,.7,.35,1) var(--piece-delay) both; }
.celebration-piece.from-top-left { top:0; left:0; }
.celebration-piece.from-top-right { top:0; right:0; }
.celebration-piece.from-bottom-left { bottom:0; left:0; }
.celebration-piece.from-bottom-right { right:0; bottom:0; }
.celebration-piece:nth-child(2n) { animation-duration:2.1s; }
.celebration-piece:nth-child(3n) { animation-duration:1.55s; }
@keyframes celebration-corner-burst { 0% { opacity:0; transform:translate3d(0,0,0) rotate(0) scale(.45); } 14% { opacity:1; } 72% { opacity:1; } 100% { opacity:0; transform:translate3d(var(--piece-travel-x),var(--piece-travel-y),0) rotate(420deg) scale(1.08); } }
.footer-logo { display:block; width:54px; height:auto; }
.number-preview { background:#eeeaff; }.number-preview span,.alphabet-preview span,.word-preview span { display:grid; place-items:center; width:66px; height:78px; border-radius:18px; color:white; background:var(--purple); font-size:2.3rem; font-weight:900; box-shadow:inset 0 -6px 0 rgba(0,0,0,.08); transform:rotate(-6deg); }
.number-preview span:nth-child(2) { color:var(--ink); background:var(--yellow); transform:translateY(-13px) rotate(3deg); }.number-preview span:nth-child(3) { background:var(--coral); transform:rotate(7deg); }
.alphabet-preview { background:#e9f5ff; }.alphabet-preview span { background:var(--blue); }.alphabet-preview span:nth-child(2) { background:var(--coral); transform:translateY(10px) rotate(4deg); }.alphabet-preview span:nth-child(3) { color:var(--ink); background:var(--yellow); transform:rotate(7deg); }
.shape-preview { background:#e9fbf6; }.shape { width:68px; height:68px; filter:drop-shadow(0 7px 0 rgba(0,0,0,.08)); }.shape.circle { border-radius:50%; background:var(--coral); }.shape.square { border-radius:14px; background:var(--purple); transform:rotate(10deg); }.shape.triangle { height:0; border-left:38px solid transparent; border-right:38px solid transparent; border-bottom:68px solid var(--yellow); }
.colour-preview { background:#fff0f1; }.colour-preview span { width:54px; height:76px; border-radius:28px; background:var(--coral); transform:rotate(12deg); }.colour-preview span:nth-child(2) { background:var(--blue); transform:translateY(-12px) rotate(-6deg); }.colour-preview span:nth-child(3) { background:var(--yellow); transform:translateY(8px) rotate(7deg); }.colour-preview span:nth-child(4) { background:var(--mint); transform:rotate(-10deg); }
.memory-preview { display:grid; grid-template-columns:repeat(2,68px); background:#fff8df; }.memory-preview span { display:grid; place-items:center; width:68px; height:68px; border-radius:15px; color:white; background:var(--purple); font-size:1.5rem; font-weight:900; box-shadow:inset 0 -5px 0 rgba(0,0,0,.08); }.memory-preview span:nth-child(2),.memory-preview span:nth-child(3) { background:var(--coral); }
.word-preview { background:#edf9f6; }.word-preview span { width:62px; height:70px; background:var(--mint); transform:rotate(-4deg); }.word-preview span:nth-child(2) { background:var(--purple); transform:translateY(-10px); }.word-preview span:nth-child(3) { background:var(--coral); transform:rotate(5deg); }
.grownups-section { padding:0 0 110px; background:#fffdfa; }.grownups-card { display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; padding:45px 48px; border-radius:32px; color:white; background:var(--navy); box-shadow:var(--shadow); }
.grownups-card .eyebrow { color:#aaa1ff; }.grownups-card h2 { font-size:2.4rem; }.grownups-card p { max-width:610px; margin:14px 0 0; color:rgba(255,255,255,.72); font-size:.9rem; font-weight:700; }
.grownups-icon { display:grid; place-items:center; width:74px; height:74px; border-radius:24px; color:white; background:var(--coral); font-size:2rem; transform:rotate(-5deg); }.tips { display:grid; gap:10px; min-width:160px; }.tips span { display:flex; align-items:center; gap:9px; font-size:.76rem; font-weight:900; }.tips b { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:var(--navy); background:var(--yellow); font-size:.7rem; }
.footer { padding:36px 0 40px; color:rgba(255,255,255,.7); background:var(--navy); }.footer-inner { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }.footer-brand { color:white; font-size:1rem; font-weight:900; line-height:1.15; text-transform:uppercase; }.footer-links { display:grid; gap:10px; justify-items:end; font-size:.75rem; font-weight:800; }.footer-links nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px; }.footer-links a:hover { color:white; }.footer-credit { color:rgba(255,255,255,.48); }
@media (max-width:920px) { .nav { gap:15px; font-size:.72rem; }.brand { flex-basis:230px; }.hero-grid { grid-template-columns:1fr; }.hero-copy { text-align:center; }.hero-copy h1,.hero-copy p { margin-left:auto; margin-right:auto; }.hero-board { max-width:650px; margin:0 auto; }.star-one { left:12%; top:52%; }.game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.grownups-card { grid-template-columns:auto 1fr; }.tips { grid-column:2; grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px) { .container { width:min(100% - 32px,1120px); }.site-header { display:grid; grid-template-columns:minmax(0,1fr) auto; min-height:68px; padding:14px 16px; }.brand { max-width:none; flex-basis:auto; font-size:.7rem; }.menu-toggle { display:block; }.header-actions { display:block; grid-column:1/-1; width:100%; }.nav { display:none; grid-template-columns:1fr; gap:8px; padding:8px 0 0; }.site-header.nav-open .nav { display:grid; }.nav a { padding:10px 13px; border-radius:11px; background:#faf9ff; }.nav-cta { border-radius:11px!important; }.game-hero { min-height:0; padding:120px 0 72px; }.hero-grid { gap:46px; }.hero-copy h1 { font-size:clamp(3rem,13vw,4.2rem); }.hero-board { padding:20px; border-width:6px; border-radius:26px; transform:none; }.learning-tiles { gap:8px; }.tile { border-radius:14px; }.section-heading { grid-template-columns:1fr; gap:18px; }.game-library { padding:78px 0 84px; }.game-grid { grid-template-columns:1fr; }.game-preview { min-height:175px; }.game-content p { min-height:0; }.grownups-section { padding-bottom:82px; }.grownups-card { grid-template-columns:1fr; padding:34px 28px; }.grownups-card h2 { font-size:2rem; }.tips { grid-column:1; grid-template-columns:1fr; }.footer-inner { grid-template-columns:1fr; }.footer-links { justify-items:start; }.footer-links nav { justify-content:flex-start; } }
@media (max-width:560px) { .game-dialog { padding:0; align-items:end; }.game-player { width:100%; max-height:92vh; padding:30px 20px 24px; border-width:0; border-radius:28px 28px 0 0; }.player-header { display:grid; gap:12px; padding-right:44px; }.score-pill { width:max-content; }.game-card-footer { align-items:flex-end; }.answer-choice { min-height:52px; }.result-actions { display:grid; }.player-button { width:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.game-card,.nav a,.tile { transition:none; }.tile,.tile::after,.smiley,.board-message { animation:none!important; }.tile { transform:none; } }
@media (prefers-reduced-motion:reduce) { .celebration-piece { opacity:.85; animation:none!important; } }
@media (prefers-reduced-motion:reduce) { .result-actions > * { opacity:1; animation:none!important; } }
@media (max-width:680px) { .footer-logo { width:92px; } }

/* Kids-game copy and responsive pagination. */
.game-hero .hero-copy { display:flex; flex-direction:column; align-items:flex-start; }
.hero-copy .hero-tagline { display:block; margin:0 0 18px; color:var(--purple); font-size:1.08rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.game-hero .hero-button { display:flex; width:max-content; margin:0; }
.game-library .section-heading { grid-template-columns:1fr; }
.game-pagination { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:center; gap:9px; padding-top:20px; }
.pagination-button { display:grid; place-items:center; min-width:42px; height:42px; padding:0 12px; border:1px solid #dddff0; border-radius:50%; color:var(--ink); background:white; font:inherit; font-size:.82rem; font-weight:900; cursor:pointer; transition:transform 160ms ease,border-color 160ms ease,background 160ms ease; }
.pagination-button:hover:not(:disabled),.pagination-button:focus-visible { border-color:var(--purple); transform:translateY(-2px); }
.pagination-button[aria-current="page"] { border-color:var(--purple); color:white; background:var(--purple); box-shadow:0 9px 20px rgba(107,87,255,.22); }
.pagination-button:disabled { opacity:.38; cursor:not-allowed; }

@media (max-width:680px) {
  .game-hero .hero-copy { align-items:center; }
  .grownups-description { display:none; }
  .game-pagination { padding-top:12px; }
}

/* Hero video */
.video-badge { display:none!important; }

.hero-video {
  position:relative;
  width:min(640px,100%);
  aspect-ratio:4/3;
  min-width:0;
  justify-self:center;
  padding:9px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:28px;
  background:linear-gradient(145deg,#ffffff 0%,#f1f3fb 100%);
  box-shadow:0 28px 70px rgba(27,37,78,.2),0 8px 22px rgba(27,37,78,.1);
  isolation:isolate;
}
.hero-video::before {
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:28px;
  background:linear-gradient(145deg,rgba(107,87,255,.22),rgba(32,207,173,.14));
  box-shadow:0 0 0 7px rgba(255,255,255,.4);
}
.hero-video video {
  display:block;
  width:100%;
  height:100%;
  border-radius:20px;
  background:radial-gradient(circle at 50% 35%,#354361 0%,#111a32 72%);
  object-fit:contain;
}
@media (max-width:920px) and (min-width:681px) {
  .hero-video {
    width:min(700px,100%);
    margin:0 auto;
  }
}

@media (max-width:680px) {
  #kids-game-page > .game-hero {
    display:block;
    height:auto;
    min-height:100vh;
    padding:72px 0 0;
    background:var(--navy);
    isolation:isolate;
  }
  #kids-game-page > .game-hero::after {
    display:none;
  }
  .game-hero .hero-bubble,
  .game-hero .hero-star {
    display:none;
  }
  #kids-game-page > .game-hero .hero-grid {
    position:relative;
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
  }
  .game-hero .hero-copy {
    position:absolute;
    right:16px;
    bottom:78px;
    left:16px;
    z-index:3;
    align-items:flex-start;
    max-width:520px;
    padding:0 4px 8px;
    color:white;
    text-align:left;
    text-shadow:0 3px 24px rgba(7,14,34,.45);
  }
  #kids-game-page .game-hero .hero-copy h1 {
    max-width:9ch;
    margin:0 0 16px;
    color:white;
    font-size:clamp(3.1rem,14vw,4.7rem);
    line-height:.92;
  }
  .hero-copy .hero-tagline {
    order:-1;
    margin:0 0 14px;
    color:#ffe199;
    font-size:.83rem;
    letter-spacing:.14em;
  }
  .game-hero .hero-button {
    min-height:48px;
    color:var(--navy);
    background:var(--yellow);
    box-shadow:0 15px 34px rgba(8,15,36,.3);
    text-shadow:none;
  }
  .hero-video {
    position:relative;
    inset:auto;
    z-index:0;
    width:100%;
    aspect-ratio:auto;
    height:auto;
    padding:0;
    border-radius:0;
    background:var(--navy);
    box-shadow:none;
    transform:none;
  }
  .hero-video::before {
    display:none;
  }
  .hero-video::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(13,22,49,.05) 0%,rgba(13,22,49,.12) 30%,rgba(13,22,49,.48) 62%,rgba(13,22,49,.86) 100%);
  }
  .hero-video video {
    width:100%;
    height:auto;
    border-radius:0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-video {
    transform:none;
  }
}