.activity-page,.quiz-page,.join-page,.progress-page { min-height: 80vh; padding: 80px 20px; background: linear-gradient(145deg,#f5f3ff,#effcff); }.activity-heading { max-width: 800px; margin: 0 auto 35px; text-align: center; }.activity-heading h1 { font-size: clamp(2.7rem,5vw,4.8rem); }.play-card,.quiz-form,.quiz-result { width: min(900px,100%); margin: auto; padding: 35px; background: #fff; border-radius: 30px; box-shadow: var(--shadow); }
.match-game { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }.match-items,.match-targets { display: grid; gap: 13px; }.match-items button,.command-bank button { border: 2px solid #ddd8ff; padding: 16px; border-radius: 16px; background: #f5f3ff; cursor: grab; font-weight: 900; }.match-targets>div { min-height: 75px; padding: 14px; border: 2px dashed #b7b0e8; border-radius: 17px; display: flex; align-items: center; justify-content: space-between; }.match-targets>div.correct { background: #e7faef; border-color: var(--green); }.match-targets span { color: #8c91a4; }.match-targets b { color: var(--purple); }
.flashcard-deck { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; perspective: 900px; }.flashcard { position: relative; height: 230px; border: 0; background: transparent; transform-style: preserve-3d; transition: transform .6s; cursor: pointer; }.flashcard.flipped { transform: rotateY(180deg); }.flash-front,.flash-back { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; border-radius: 22px; backface-visibility: hidden; font: 700 1.5rem Fredoka; box-shadow: 0 12px 30px rgba(71,64,135,.12); }.flash-front { background: linear-gradient(145deg,#6757f5,#8e74f5); color: #fff; }.flash-front small { position: absolute; top: 18px; font: 800 .7rem Nunito; text-transform: uppercase; }.flash-back { background: #e8fbf4; transform: rotateY(180deg); font-size: 1.05rem; }
.robot-map { height: 170px; display: flex; align-items: center; justify-content: center; gap: 18px; background: #ecfbff; border-radius: 22px; font-size: 3rem; }.robot-map i { width: 80px; border-top: 5px dotted #81b9c7; }.mini-robo.run { animation: roboRun 1.6s forwards; }.command-bank,.code-sequence { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }.code-sequence { min-height: 90px; border: 2px dashed #b8b2df; border-radius: 18px; padding: 12px; }.code-sequence button { border: 0; border-radius: 12px; padding: 10px; background: #e8e4ff; font-weight: 900; }
.activity-success { display: none; position: fixed; inset: 0; z-index: 200; padding: 20px; background: rgba(23,26,60,.75); place-items: center; }.activity-success.show { display: grid; }.activity-success>div { width: min(480px,100%); padding: 40px; border-radius: 30px; background: #fff; text-align: center; animation: rewardPop .5s; }.reward-badge { display: block; font-size: 6rem; animation: badgeBounce 1.5s infinite; }.activity-success .kids-btn { margin: 7px; }
.quiz-result { margin-bottom: 25px; text-align: center; }.quiz-result>span { font-size: 4rem; }.quiz-result strong { font: 900 3rem Fredoka; color: var(--purple); display: block; }.quiz-result.passed { border: 3px solid var(--green); }.quiz-card { border: 0; padding: 0 0 30px; margin: 0 0 30px; border-bottom: 1px solid var(--line); }.quiz-card legend { display: flex; align-items: center; gap: 12px; font: 700 1.4rem Fredoka; }.quiz-card legend>span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--purple); }.quiz-card label { display: block; margin: 10px 0; cursor: pointer; }.quiz-card label>span { display: block; padding: 13px 15px; border: 2px solid var(--line); border-radius: 14px; font-weight: 800; }.quiz-card input { position: absolute; opacity: 0; }.quiz-card input:checked+span { border-color: var(--purple); background: #f3f1ff; }.answer-hint { padding: 12px; border-radius: 12px; }.answer-hint.correct { background: #e8faef; color: #187552; }.answer-hint.wrong { background: #fff5dc; color: #765900; }
.join-card { width: min(580px,100%); margin: auto; padding: 40px; background: #fff; border-radius: 30px; box-shadow: var(--shadow); text-align: center; }.join-mascot { display: block; font-size: 5rem; }.join-card h1 { font-size: 2.7rem; }.join-card label { display: block; text-align: left; font-weight: 900; margin: 14px 0; }.join-card input,.join-card select { display: block; width: 100%; margin-top: 6px; padding: 13px; border: 2px solid var(--line); border-radius: 13px; }.join-card .consent { display: flex; gap: 10px; }.join-card .consent input { width: auto; }.form-errors { padding: 12px; border-radius: 12px; background: #ffe9ea; color: #a72833; }
.progress-welcome { display: flex; align-items: center; justify-content: space-between; }.progress-welcome h1 { font-size: 3.5rem; }.star-count { padding: 13px 18px; border-radius: 99px; background: #fff4c1; font-weight: 900; }.progress-layout { display: grid; grid-template-columns: 1fr 360px; gap: 35px; }.progress-courses { display: grid; gap: 13px; }.progress-courses>a { display: grid; grid-template-columns: 60px 1fr auto; gap: 16px; align-items: center; padding: 18px; background: #fff; border-radius: 18px; }.progress-courses>a>span { font-size: 2.5rem; }.progress-courses h3 { margin: 0 0 8px; }.badge-shelf { padding: 25px; border-radius: 25px; background: #fff; }.badges-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.badges-grid>div { text-align: center; padding: 15px; border-radius: 17px; background: #f7f6fb; }.badges-grid span { display: block; font-size: 2.5rem; }.badges-grid small { display: block; color: var(--muted); }
.reveal { opacity: 0; transform: translateY(18px); }.reveal.visible { opacity: 1; transform: none; transition: .65s ease; }.kids-toast { position: fixed; left: 50%; bottom: 25px; transform: translate(-50%,100px); z-index: 300; padding: 12px 18px; color: #fff; background: #202551; border-radius: 14px; font-weight: 900; transition: .3s; }.kids-toast.show { transform: translate(-50%,0); }
@keyframes roboRun { to { transform: translateX(200px) rotate(8deg); } } @keyframes rewardPop { from { transform: scale(.7); opacity: 0; } } @keyframes badgeBounce { 50% { transform: translateY(-10px) rotate(5deg); } }