:root {
  --ink: #26374a;
  --muted: #6c7a88;
  --paper: #fffaf2;
  --cream: #f8f0df;
  --line: #e9dfcf;
  --white: #ffffff;
  --navy: #243c54;
  --coral: #f27f6b;
  --mint: #7bc8ac;
  --yellow: #f5c45a;
  --lavender: #a999df;
  --shadow: 0 20px 55px rgba(45, 61, 81, .10);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: "Baloo Bhaijaan 2", "Noto Kufi Arabic", sans-serif; line-height: 1.55; }
button, a { font: inherit; }
button { cursor: pointer; border: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid #2c8dce; outline-offset: 3px; }
.ambient { position: fixed; z-index: -1; width: 360px; height: 360px; border-radius: 50%; filter: blur(2px); opacity: .24; pointer-events: none; }
.ambient-one { top: 70px; right: -150px; background: #f6d7c7; }
.ambient-two { bottom: 120px; left: -180px; background: #d6ebdc; }
.site-header { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 25px 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(233, 223, 207, .72); }
.brand { color: var(--ink); display: inline-flex; gap: 11px; align-items: center; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--navy); color: #fff; border-radius: 13px 13px 13px 3px; font-size: 26px; font-weight: 700; transform: rotate(-4deg); box-shadow: 7px 7px 0 var(--yellow); }
.brand strong { display: block; font-size: 23px; line-height: 1; letter-spacing: -.5px; }
.brand small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.text-button { color: var(--ink); background: transparent; font-size: 15px; padding: 9px 12px; }
.privacy-pill { color: #4b725f; background: #e9f6ec; border-radius: 999px; padding: 7px 13px; font-size: 13px; }
.theme-toggle { color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 13px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #59ae7f; margin-left: 4px; }
.page-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 54px 0 70px; }
.view { display: none; animation: enter .32s var(--ease) both; }
.active-view { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; gap: 44px; align-items: center; padding: 24px 0 62px; }
.hero-copy { padding-right: 28px; }
.eyebrow { color: #b17e36; letter-spacing: .3px; font-size: 14px; font-weight: 600; }
.spark { color: var(--coral); font-size: 19px; vertical-align: -1px; }
h1, h2, p { margin-top: 0; }
.hero-copy h1 { color: var(--navy); font-size: clamp(38px, 4.5vw, 58px); line-height: 1.12; letter-spacing: -1.2px; margin: 18px 0 23px; font-weight: 700; }
.hero-copy h1 em { color: var(--coral); font-style: normal; }
.hero-copy > p { max-width: 600px; color: var(--muted); font-size: 17px; line-height: 1.85; margin-bottom: 25px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 14px; }
.hero-proof span { background: var(--white); border: 1px solid var(--line); padding: 9px 15px; border-radius: 999px; }
.hero-proof b { color: var(--navy); font-size: 18px; margin-left: 4px; }
.hero-art { min-height: 405px; position: relative; border-radius: 38px; background: linear-gradient(145deg, #eef5ed, #fff0df); overflow: hidden; display: grid; place-items: center; box-shadow: var(--shadow); }
.orbit { border: 1px solid rgba(243, 127, 107, .28); border-radius: 50%; position: absolute; transform: rotate(-20deg); }
.orbit-a { width: 390px; height: 230px; }
.orbit-b { width: 250px; height: 365px; border-color: rgba(122, 200, 172, .35); }
.hero-sun { position: absolute; top: 48px; right: 58px; font-size: 43px; color: var(--yellow); transform: rotate(12deg); }
.hero-card { position: absolute; display: flex; flex-direction: column; justify-content: center; box-shadow: 12px 16px 0 rgba(36, 60, 84, .12); }
.card-back { width: 174px; height: 218px; border-radius: 20px; background: var(--coral); color: white; font-size: 86px; text-align: center; transform: rotate(13deg) translate(65px, 6px); padding-bottom: 10px; }
.card-front { width: 205px; height: 244px; border-radius: 22px; background: #fffdf8; border: 2px solid #fff; color: var(--navy); align-items: center; transform: rotate(-8deg) translate(-35px, -4px); }
.card-front span { color: #b17e36; font-size: 14px; }
.card-front strong { font-size: 28px; margin: 17px 0 7px; }
.card-front small { color: var(--muted); }
.hero-blob { position: absolute; bottom: 31px; left: 56px; width: 74px; height: 74px; border-radius: 50% 50% 42% 58%; display: grid; place-items: center; background: var(--mint); color: #fff; font-size: 39px; transform: rotate(-13deg); box-shadow: 8px 8px 0 rgba(36, 60, 84, .1); }
.hero-star { position: absolute; color: #fff; font-size: 24px; }
.star-one { top: 98px; left: 70px; }
.star-two { bottom: 72px; right: 80px; color: var(--coral); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.section-heading h2 { color: var(--navy); margin: 5px 0 0; font-size: 30px; }
.section-note { color: var(--muted); font-size: 14px; padding-bottom: 5px; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.category-card { min-height: 250px; border-radius: var(--radius-lg); text-align: right; padding: 23px; color: var(--ink); background: var(--white); border: 1px solid var(--line); transition: transform .18s var(--ease), box-shadow .18s var(--ease); position: relative; overflow: hidden; isolation: isolate; }
.category-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7; pointer-events: none; }
.category-card::after { position: absolute; top: -18px; left: 18px; z-index: -1; font-size: 92px; line-height: 1; opacity: .13; pointer-events: none; transform: rotate(-12deg); }
.category-card > * { position: relative; z-index: 1; }
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.category-card:active, .primary-button:active, .outline-button:active, .soft-button:active { transform: scale(.97); }
.category-card .card-icon { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; font-size: 29px; margin-bottom: 24px; }
.category-card h3 { margin: 0 0 5px; font-size: 23px; color: var(--navy); }
.category-card p { color: var(--muted); font-size: 14px; min-height: 47px; margin-bottom: 16px; }
.card-footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.card-arrow { font-size: 24px; color: var(--ink); transition: transform .18s ease; }
.category-card:hover .card-arrow { transform: translateX(-5px); }
.cat-cyber { background: #e8f7f5; } .cat-cyber::before { background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(42, 137, 128, .12) 27px 28px), repeating-linear-gradient(0deg, transparent 0 26px, rgba(42, 137, 128, .12) 27px 28px), radial-gradient(circle at 70% 20%, rgba(70, 175, 153, .34), transparent 34%); } .cat-cyber::after { content: "⌁"; color: #227f7a; } .cat-cyber .card-icon { background: #bfe8df; }
.cat-islam { background: #fff7dc; } .cat-islam::before { background: radial-gradient(circle at 25% 28%, rgba(224, 166, 65, .28) 0 2px, transparent 3px), radial-gradient(circle at 75% 68%, rgba(224, 166, 65, .22) 0 2px, transparent 3px), linear-gradient(135deg, transparent 42%, rgba(211, 165, 79, .16) 43% 44%, transparent 45%); background-size: 34px 34px, 42px 42px, auto; } .cat-islam::after { content: "☾ ✦"; color: #b8832e; } .cat-islam .card-icon { background: #f5d994; }
.cat-general { background: #f1edff; } .cat-general::before { background: radial-gradient(circle at 82% 20%, rgba(143, 124, 202, .28), transparent 30%), linear-gradient(135deg, transparent 0 47%, rgba(143, 124, 202, .13) 48% 49%, transparent 50% 100%); } .cat-general::after { content: "✦"; color: #7662b6; } .cat-general .card-icon { background: #d8cff4; }
.cat-kids { background: #fff0eb; } .cat-kids::before { background: radial-gradient(circle at 20% 75%, rgba(247, 164, 87, .25) 0 5px, transparent 6px), radial-gradient(circle at 82% 35%, rgba(122, 200, 172, .28) 0 6px, transparent 7px), linear-gradient(145deg, transparent 0 45%, rgba(243, 127, 107, .13) 46% 54%, transparent 55%); background-size: 52px 52px, 70px 70px, auto; } .cat-kids::after { content: "☀ ✦"; color: #ec806e; } .cat-kids .card-icon { background: #ffc5b8; }
.cat-space { background: #f0edff; } .cat-space::before { background: radial-gradient(circle at 18% 25%, #8b78cb 0 2px, transparent 3px), radial-gradient(circle at 76% 64%, #b8ace9 0 3px, transparent 4px), linear-gradient(145deg, rgba(87, 71, 151, .14), transparent 55%); background-size: 42px 42px, 58px 58px, auto; } .cat-space::after { content: "✦ ◌"; color: #6653a3; } .cat-space .card-icon { background: #d5ccf4; }
.cat-language { background: #fff5df; } .cat-language::before { background: repeating-linear-gradient(-12deg, transparent 0 19px, rgba(201, 152, 56, .14) 20px 21px), radial-gradient(circle at 75% 25%, rgba(229, 180, 79, .28), transparent 32%); } .cat-language::after { content: "أ ب"; color: #b47d27; font-weight: 700; } .cat-language .card-icon { background: #f4d58f; }
.cat-nature { background: #eaf7ed; } .cat-nature::before { background: radial-gradient(circle at 20% 80%, rgba(89, 174, 127, .22) 0 7px, transparent 8px), linear-gradient(35deg, transparent 0 45%, rgba(89, 174, 127, .14) 46% 48%, transparent 49%), linear-gradient(-35deg, transparent 0 55%, rgba(122, 200, 172, .18) 56% 58%, transparent 59%); } .cat-nature::after { content: "❧"; color: #4c9a6d; } .cat-nature .card-icon { background: #bde5c7; }
.home-note { max-width: 580px; margin: 25px 0 0 auto; display: flex; gap: 13px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 22px; }
.note-icon { color: var(--coral); font-size: 28px; line-height: 1; }
.home-note strong { color: var(--navy); }
.home-note p { color: var(--muted); margin: 3px 0 0; font-size: 14px; }
.game-panel { margin: 38px 0 8px; padding: 24px; border-radius: 24px; background: linear-gradient(135deg, #253f59, #334f63); color: #fff; box-shadow: 8px 9px 0 rgba(36,60,84,.12); }
.game-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.game-panel .eyebrow { color: #f6d58e; } .game-panel h2 { margin: 4px 0 0; font-size: 27px; }
.game-local-note { color: #c8d8df; font-size: 13px; }
.game-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.game-stats span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 12px 14px; }
.game-stats b { display: block; color: #fff; font-size: 25px; line-height: 1.1; } .game-stats small { color: #c8d8df; font-size: 12px; }
.game-actions { display: flex; gap: 10px; flex-wrap: wrap; } .game-actions .primary-button { background: #f27f6b; box-shadow: 4px 4px 0 #f6d58e; } .game-actions .soft-button { background: #e9f1ed; }
.achievements-panel { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.achievement { border-radius: 13px; padding: 10px; background: rgba(255,255,255,.1); color: #eaf3f4; font-size: 13px; } .achievement.unlocked { background: #f6d58e; color: #253f59; } .achievement b { display: block; font-size: 20px; margin-bottom: 3px; }
.modes-section { margin-top: 42px; } .modes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.audience-note { color: var(--muted); margin: -7px 0 15px; font-size: 15px; } .difficulty-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; color: var(--navy); font-size: 14px; font-weight: 700; } .difficulty-button { border: 1px solid var(--line); background: var(--white); color: var(--muted); border-radius: 999px; padding: 7px 15px; } .difficulty-button.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.mode-card { min-height: 165px; position: relative; text-align: right; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; color: var(--navy); box-shadow: 4px 5px 0 rgba(36,60,84,.08); transition: transform .16s var(--ease), box-shadow .16s ease; }
.mode-card:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 rgba(36,60,84,.12); } .mode-card strong { font-size: 19px; margin-top: 12px; } .mode-card small { color: var(--muted); margin-top: 3px; } .mode-card b { margin-top: auto; font-size: 13px; } .mode-icon { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 14px; font-weight: 800; font-size: 18px; background: rgba(255,255,255,.65); }
.mode-letters { background: #e8f6f1; } .mode-riddles { background: #fff3d8; } .mode-truefalse { background: #ffe9e4; } .mode-memory { background: #eeeafd; } .mode-order { background: #e5f0fb; } .mode-odd { background: #eef5df; }
.mode-error { background: #fce8ed; } .mode-proverbs { background: #f4eadb; } .mode-math { background: #e3f3f5; } .mode-who { background: #f0e8fb; }
.mini-game-view { border-radius: 34px; padding: 26px clamp(10px, 3vw, 34px) 45px; background: linear-gradient(135deg, #f1edff, #fffaf1); } .mini-score { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--navy); font-weight: 700; } .mini-card { max-width: 850px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(23px, 4vw, 46px); box-shadow: var(--shadow); } .mini-card h2 { color: var(--navy); font-size: clamp(27px, 4vw, 42px); margin: 16px 0 25px; } .mini-card > .primary-button { margin-top: 20px; width: 100%; }
.quiz-topbar, .result-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.quiz-hud { display: flex; gap: 7px; margin-inline-start: auto; margin-inline-end: 10px; } .quiz-hud span { background: rgba(255,255,255,.78); color: var(--navy); border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; font-size: 13px; font-weight: 700; }
.quiz-view { border-radius: 34px; padding: 26px clamp(10px, 3vw, 34px) 34px; transition: background .25s ease; }
.quiz-view.theme-cyber { background: radial-gradient(circle at 12% 10%, rgba(104, 202, 180, .25), transparent 28%), linear-gradient(135deg, #e9f7f4, #f7fbf8 48%, #e6f0f6); }
.quiz-view.theme-islam { background: radial-gradient(circle at 84% 8%, rgba(246, 193, 88, .28), transparent 28%), linear-gradient(135deg, #fff7dc, #fffaf1 52%, #f8edcf); }
.quiz-view.theme-general { background: radial-gradient(circle at 15% 12%, rgba(169, 153, 223, .28), transparent 28%), linear-gradient(135deg, #f1edff, #fbf9ff 54%, #e9eefb); }
.quiz-view.theme-kids { background: radial-gradient(circle at 85% 10%, rgba(242, 127, 107, .28), transparent 28%), linear-gradient(135deg, #fff0e7, #fffaf0 48%, #e5f6ef); }
.back-button, .list-button { background: transparent; color: var(--muted); padding: 8px 0; font-size: 15px; }
.back-button { color: var(--navy); font-weight: 600; }
.back-button:first-letter { font-size: 28px; vertical-align: -2px; }
.quiz-category { color: var(--navy); font-weight: 700; font-size: 20px; }
.list-button { border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; background: var(--white); }
.quiz-progress-wrap { max-width: 850px; margin: 0 auto 22px; }
.progress-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.progress-track { height: 10px; border-radius: 999px; background: #eee6da; overflow: hidden; }
.progress-fill { height: 100%; width: 3%; border-radius: inherit; background: var(--coral); transition: width .25s var(--ease), background .2s ease; }
.theme-cyber .progress-fill { background: #4aa98f; } .theme-islam .progress-fill { background: #d69e3e; } .theme-general .progress-fill { background: #8b78cb; } .theme-kids .progress-fill { background: #ee796a; }
.quiz-card { max-width: 850px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(23px, 4vw, 46px); box-shadow: var(--shadow); }
.question-kicker { color: #b17e36; font-size: 14px; font-weight: 600; display: flex; gap: 7px; align-items: center; }
#questionText { font-size: clamp(25px, 4vw, 40px); line-height: 1.35; color: var(--navy); margin: 11px 0 29px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.choice { text-align: right; border: 1px solid var(--line); background: #fffdf9; color: var(--ink); border-radius: 16px; min-height: 64px; padding: 13px 17px; display: flex; align-items: center; gap: 11px; transition: border .15s ease, background .15s ease, transform .15s ease; }
.choice:hover:not(:disabled) { border-color: var(--coral); transform: translateY(-2px); }
.choice:disabled { cursor: default; }
.choice-letter { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; background: var(--cream); color: #a87e47; display: grid; place-items: center; font-weight: 700; }
.choice.correct { border: 2px solid #50ad7b; background: #effaf3; color: #276b48; }
.choice.correct .choice-letter { background: #50ad7b; color: #fff; }
.choice.wrong { border: 2px solid #e97d71; background: #fff1ef; color: #a2433d; }
.choice.wrong .choice-letter { background: #e97d71; color: #fff; }
.feedback { border-radius: 16px; padding: 15px 17px; margin-top: 20px; border-right: 4px solid var(--mint); background: #edf9f2; color: #336549; }
.feedback.wrong-feedback { border-color: var(--coral); background: #fff3ef; color: #864b43; }
.feedback strong { display: block; margin-bottom: 3px; color: var(--navy); }
.quiz-controls { display: flex; gap: 11px; justify-content: space-between; align-items: center; margin-top: 28px; }
.primary-button, .outline-button, .soft-button { border-radius: 13px; min-height: 49px; padding: 10px 19px; transition: transform .16s var(--ease), box-shadow .16s ease, background .16s ease; }
.primary-button { color: #fff; background: var(--navy); box-shadow: 5px 5px 0 var(--yellow); }
.primary-button:disabled { opacity: .43; cursor: not-allowed; box-shadow: none; }
.outline-button { background: var(--white); color: var(--navy); border: 1px solid #cfc3b2; }
.outline-button:disabled { opacity: .45; cursor: not-allowed; }
.soft-button { background: var(--cream); color: var(--navy); }
.quiz-privacy { text-align: center; color: var(--muted); font-size: 13px; margin: 19px auto 0; }
.question-list { max-width: 850px; margin: 0 auto 18px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 13px; }
.question-list button { height: 37px; border-radius: 10px; background: #f7f0e5; color: var(--muted); }
.question-list button.current { background: var(--navy); color: #fff; }
.question-list button.done { box-shadow: inset 0 0 0 2px #75c49c; }
.hidden { display: none !important; }
.child-art { height: 185px; border-radius: 20px; margin-bottom: 23px; display: grid; place-items: center; background: linear-gradient(135deg, #fff3c9, #d9f3eb); font-size: 72px; letter-spacing: 18px; overflow: hidden; position: relative; }
.child-art::after { content: "✦  ✿  ☁  ✦"; position: absolute; inset: auto 18px 9px; color: rgba(36,60,84,.22); font-size: 16px; letter-spacing: 16px; }
.result-hero { max-width: 680px; margin: 0 auto; text-align: center; padding: 26px 20px 36px; }
.result-medal { width: 70px; height: 70px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--coral); font-size: 35px; box-shadow: 7px 7px 0 var(--yellow); }
.result-hero h1 { color: var(--navy); font-size: clamp(34px, 6vw, 55px); margin: 8px 0 5px; }
.result-hero p { color: var(--muted); font-size: 18px; margin-bottom: 21px; }
.score-ring { width: 150px; height: 150px; margin: 0 auto 25px; border: 12px solid #f4dfba; border-top-color: var(--coral); border-right-color: var(--mint); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.score-ring strong { font-size: 48px; line-height: 1; color: var(--navy); }
.score-ring span { color: var(--muted); }
.result-stats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.result-stats > span { min-width: 120px; background: var(--white); border: 1px solid var(--line); border-radius: 15px; padding: 11px 14px; }
.result-stats b { display: block; color: var(--navy); font-size: 24px; line-height: 1.15; }
.result-stats small { color: var(--muted); font-size: 12px; }
.result-actions { max-width: 680px; margin: 0 auto 22px; display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.review-list { max-width: 850px; margin: 0 auto; display: grid; gap: 10px; }
.review-item { border: 1px solid var(--line); background: var(--white); border-radius: 16px; padding: 17px; }
.review-item.correct-review { border-right: 4px solid #50ad7b; } .review-item.wrong-review { border-right: 4px solid var(--coral); }
.review-item h3 { margin: 0 0 5px; color: var(--navy); font-size: 17px; }
.review-item p { color: var(--muted); margin: 3px 0; font-size: 14px; }
.review-item a { color: #2c76a8; font-size: 13px; }
.site-footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 35px; } .hero-copy { padding: 0; max-width: 680px; } .hero-art { min-height: 330px; } .category-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 590px) { .site-header, .page-shell, .site-footer { width: min(100% - 28px, 1180px); } .site-header { padding-top: 18px; } .header-actions { gap: 3px; } .text-button { display: none; } .privacy-pill { font-size: 12px; padding: 6px 9px; } .brand strong { font-size: 20px; } .brand small { font-size: 11px; } .page-shell { padding-top: 30px; } .hero-grid { padding-top: 9px; padding-bottom: 45px; } .hero-copy h1 { font-size: clamp(36px, 11vw, 49px); letter-spacing: -.6px; } .hero-copy > p { font-size: 16px; line-height: 1.8; } .hero-proof { gap: 6px; } .hero-proof span { padding: 7px 10px; font-size: 12px; } .hero-proof b { font-size: 16px; } .hero-art { min-height: 280px; border-radius: 25px; } .card-back { width: 133px; height: 168px; font-size: 64px; transform: rotate(13deg) translate(48px, 3px); } .card-front { width: 160px; height: 190px; transform: rotate(-8deg) translate(-30px, -4px); } .card-front strong { font-size: 22px; margin: 11px 0 5px; } .hero-sun { top: 28px; right: 31px; font-size: 31px; } .hero-blob { bottom: 21px; left: 30px; width: 56px; height: 56px; font-size: 29px; } .section-heading { display: block; } .section-heading h2 { font-size: 26px; } .section-note { display: block; margin-top: 4px; } .category-grid { grid-template-columns: 1fr; gap: 11px; } .category-card { min-height: 0; padding: 18px; display: grid; grid-template-columns: 58px 1fr auto; column-gap: 13px; align-items: center; } .category-card .card-icon { grid-row: span 2; margin: 0; } .category-card h3 { font-size: 21px; } .category-card p { min-height: 0; margin: 1px 0 4px; } .card-footer { grid-column: 2 / 4; } .game-panel { padding: 19px 16px; } .game-panel h2 { font-size: 23px; } .game-panel-heading { display: block; } .game-local-note { display: block; margin-top: 5px; } .game-stats { gap: 6px; } .game-stats span { padding: 10px 8px; } .game-stats b { font-size: 21px; } .game-actions button { width: 100%; } .achievements-panel { grid-template-columns: 1fr 1fr; } .modes-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .mode-card { min-height: 145px; padding: 13px; } .mode-card strong { font-size: 16px; } .mode-card small { font-size: 12px; } .mini-game-view { padding-inline: 7px; border-radius: 24px; } .mini-card { border-radius: 22px; padding: 21px 16px; } .mini-card h2 { font-size: 27px; } .quiz-view { padding-inline: 7px; border-radius: 24px; } .quiz-topbar { gap: 8px; flex-wrap: wrap; } .quiz-category { font-size: 17px; } .quiz-hud { order: 3; width: 100%; margin: 0; } .list-button { padding: 7px 10px; font-size: 13px; } .list-button span { display: none; } .quiz-card { border-radius: 22px; padding: 21px 16px; } #questionText { font-size: 26px; } .choices { grid-template-columns: 1fr; gap: 9px; } .choice { min-height: 57px; } .quiz-controls { gap: 8px; } .quiz-controls button { flex: 1; padding: 9px 8px; font-size: 14px; } .question-list { grid-template-columns: repeat(5, 1fr); } .child-art { height: 143px; font-size: 58px; } .result-stats { gap: 6px; } .result-stats > span { min-width: 0; flex: 1; padding: 9px 5px; } .result-stats b { font-size: 20px; } .result-actions button { width: 100%; } .site-footer { gap: 10px; align-items: center; } }

html[data-theme="dark"] { --ink: #edf3f6; --muted: #aab9c4; --paper: #17222d; --cream: #22313d; --line: #344653; --white: #22313d; --navy: #0d1721; --shadow: 0 20px 55px rgba(0,0,0,.24); }
html[data-theme="dark"] body { background: var(--paper); } html[data-theme="dark"] .site-header { border-color: rgba(89,113,128,.4); } html[data-theme="dark"] .hero-copy h1, html[data-theme="dark"] h2, html[data-theme="dark"] .category-card h3, html[data-theme="dark"] .mode-card strong { color: var(--ink); } html[data-theme="dark"] .hero-copy > p, html[data-theme="dark"] .category-card p, html[data-theme="dark"] .audience-note { color: var(--muted); } html[data-theme="dark"] .game-panel, html[data-theme="dark"] .quiz-card, html[data-theme="dark"] .mini-card, html[data-theme="dark"] .result-hero { background: #22313d; border-color: #3a4d59; } html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .choice, html[data-theme="dark"] .soft-button { background: #22313d; color: var(--ink); border-color: #405462; } html[data-theme="dark"] .mode-card { filter: saturate(.82) brightness(.78); } html[data-theme="dark"] .site-footer { border-color: #344653; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Dark-mode readability override for game cards */
html[data-theme="dark"] .mode-card { filter: none; color: #243c54; }
html[data-theme="dark"] .mode-card small { color: #526775; }

.category-level { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(36,60,84,.10); color: #536b7d; font-size: 11px; font-weight: 700; }
html[data-theme="dark"] .category-level { background: rgba(255,255,255,.12); color: #d9e6ed; }

.cat-math { background: linear-gradient(135deg, #e8f0ff, #f1e8ff); }

.timer-danger { background: #f6d1cf !important; color: #9b2d2a !important; animation: timerPulse .65s ease-in-out infinite alternate; }
@keyframes timerPulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.mode-expert { background: linear-gradient(135deg, #f3e5c8, #ead8ff); }

.mode-trick { background: linear-gradient(135deg, #fff0c7, #ffd8df); }
.mini-actions { display: flex; gap: 10px; align-items: stretch; margin-top: 14px; }
.mini-actions button { flex: 1; }
.hint-box { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: #fff5d9; color: #7b5515; border: 1px solid #e5c674; line-height: 1.7; }
@media (max-width: 560px) { .mini-actions { flex-direction: column; } }
[data-theme="dark"] .hint-box { background: #3c321d; color: #ffe9a5; border-color: #80652a; }

.home-tabs { display: flex; gap: 8px; margin: 26px 0 22px; padding: 6px; background: rgba(255,255,255,.72); border: 1px solid rgba(80,70,55,.12); border-radius: 18px; max-width: 560px; }
.home-tab { flex: 1; border: 0; background: transparent; color: #766b60; padding: 12px 16px; border-radius: 13px; font: inherit; font-weight: 700; cursor: pointer; transition: .2s ease; }
.home-tab.active { background: #293f63; color: #fff; box-shadow: 0 7px 18px rgba(41,63,99,.2); }
.home-tab-panel.hidden { display: none !important; }
.progress-only-panel { margin-top: 0; }
[data-theme="dark"] .home-tabs { background: rgba(24,35,51,.86); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .home-tab { color: #b7c0cc; }
[data-theme="dark"] .home-tab.active { color: #fff; }
@media (max-width: 560px) { .home-tabs { max-width: none; margin-top: 18px; } .home-tab { padding: 10px 8px; font-size: .9rem; } }

.settings-separator { margin-inline-start: 8px; color: var(--muted); }
.settings-panel { margin-top: 0; }
.settings-panel > p { color: #dce7eb; }
.settings-summary { display: inline-block; margin: 8px 0 16px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; }
.mode-difference { background: linear-gradient(135deg,#e5f5f1,#d8edf7); }
.mode-arrange { background: linear-gradient(135deg,#fff1d7,#f7dfb7); }
.mode-pairs { background: linear-gradient(135deg,#eee8ff,#ded8f7); }
.mode-pattern { background: linear-gradient(135deg,#e5f1ff,#d1e3fb); }
.mode-hidden { background: linear-gradient(135deg,#e9f7e7,#d1ead0); }
.mode-correct { background: linear-gradient(135deg,#ffe6e2,#f7d3ce); }
.mode-picture { background: linear-gradient(135deg,#fff0cf,#f5dca7); }
.mode-decision { background: linear-gradient(135deg,#e9e5ff,#dbd4fb); }
.mode-pressure { background: linear-gradient(135deg,#dff3f5,#c5e6ea); }
.cat-gulf { background: linear-gradient(135deg,#fff1d3,#f9e1b7); }
.cat-science { background: linear-gradient(135deg,#e4f0ff,#d7e5fa); }
.cat-logic { background: linear-gradient(135deg,#eee8ff,#dfd4fb); }
.cat-life { background: linear-gradient(135deg,#ffe8e3,#f8d5cd); }
@media (max-width: 700px) { .difficulty-picker { align-items: stretch; } .settings-separator { width: 100%; margin: 5px 0 -2px; } .difficulty-button { flex: 1; } }

.local-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:15px 0; }
.local-stats span { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:10px; text-align:center; }
.local-stats b { display:block; color:#fff; font-size:21px; } .local-stats small { color:#c8d8df; font-size:11px; }
.social-notice { margin-top:20px; padding:15px; border-radius:16px; background:rgba(255,255,255,.08); color:#eaf3f4; } .social-notice p { margin:5px 0 12px; color:#c8d8df; }
@media(max-width:560px){.local-stats{grid-template-columns:repeat(2,1fr);}}
html[data-theme="dark"] .social-notice{background:rgba(255,255,255,.06);}

.memory-card { min-height: 88px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg,#243c54,#42647c); color: transparent; font-size: 32px; transition: transform .16s ease, background .16s ease; }
.memory-card.revealed { background: #fff4d4; color: var(--navy); transform: rotateY(180deg); }
#miniChoices:has(.memory-card) { grid-template-columns: repeat(4,1fr); gap:10px; }
@media(max-width:560px){#miniChoices:has(.memory-card){grid-template-columns:repeat(3,1fr);}.memory-card{min-height:72px;}}

.drag-list{display:grid;gap:10px;text-align:right}.drag-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid #d9d4ca;border-radius:14px;cursor:grab;box-shadow:0 4px 10px rgba(30,45,60,.06)}.drag-item:active{cursor:grabbing}.drag-handle{color:#9a8e80;font-size:20px}.drag-item b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#293f63;color:#fff}.difference-images{display:grid;grid-template-columns:1fr 1fr;gap:10px}.difference-images figure{margin:0;background:#fff;border-radius:14px;padding:6px;overflow:hidden}.difference-images img{display:block;width:100%;border-radius:10px}.difference-images figcaption{text-align:center;font-size:12px;color:#7b6f64;padding:5px}.difference-hotspots{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.difference-chip{border:1px solid #d4c6b4;background:#fff8ec;color:#4b3d32;border-radius:999px;padding:9px 12px;cursor:pointer}.difference-chip.found{background:#d5efdf;border-color:#69b785;color:#185d36;text-decoration:line-through}@media(max-width:560px){.difference-images{gap:5px}.difference-images figure{padding:3px}.drag-item{padding:12px 10px;font-size:.92rem}}

.account-box{margin-top:18px;padding:18px;border:1px solid rgba(41,63,99,.18);border-radius:18px;background:rgba(255,255,255,.5)}.account-form{display:grid;gap:10px;margin:12px 0}.account-form input{width:100%;border:1px solid #d6cec2;border-radius:12px;padding:12px 14px;font:inherit;background:#fff}.account-form button{margin-inline-end:8px}.account-box h3{margin:0}.leaderboard{margin-top:12px;display:grid;gap:6px}.leader-row{display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;background:#fff}.leader-row.me{background:#fff0c9;font-weight:700}.outline-button{border:1px solid #8295ae;background:transparent;color:#293f63;border-radius:10px;padding:9px 13px;font:inherit;cursor:pointer}.account-box .hidden{display:none!important}