.playing #quiz.character-quiz .stage{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.5fr);align-items:center;gap:16px;padding:16px;border:2px solid #fff;background:linear-gradient(140deg,#e0f7f2,#fbfce8);overflow:hidden;border-radius:22px}.quiz-character{position:relative;min-width:0;min-height:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px}.character-art{display:block;aspect-ratio:1;width:min(100%,280px);max-height:100%;background-image:url('/assets/worlds-3d-v1.webp');background-size:300% 200%;background-repeat:no-repeat;border-radius:30px;border:4px solid #fff;box-shadow:0 6px 0 #99bfbd;animation:friend-idle 3.7s ease-in-out infinite;transform-origin:center bottom}.theme-2 .character-art{background-position:100% 0}.theme-3 .character-art{background-position:0 100%}.theme-4 .character-art{background-position:50% 100%}.theme-5 .character-art{background-position:100% 100%}.character-speech{display:block;position:relative;text-align:center;padding:9px 12px;border-radius:17px;background:#fff;color:#5c4d8b;font-size:clamp(12px,1.5vw,17px);font-weight:800;box-shadow:0 3px 0 #bad6d5;line-height:1.25}.quiz-board{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.playing .character-quiz .emoji-big{font-size:clamp(42px,9dvh,85px);animation:float 3s ease-in-out infinite}.playing .character-quiz #question{font-size:clamp(18px,2.5vw,30px);line-height:1.35;color:#4d4277}.playing #quiz.theme-2 .stage{background:linear-gradient(140deg,#eee2ff,#fff0e4)}.playing #quiz.theme-3 .stage{background:linear-gradient(140deg,#d9f4d3,#fff4c7)}.playing #quiz.theme-4 .stage{background:linear-gradient(140deg,#fff2b0,#d9f2ff)}.playing #quiz.theme-5 .stage{background:linear-gradient(140deg,#d6dcff,#eee6ff)}
.theme-1 .character-art{background-image:url('/assets/rabbit-math-v1.webp');background-size:200% 200%;background-position:100% 0;border:0;border-radius:0;box-shadow:none;width:min(100%,285px);filter:drop-shadow(0 8px 2px #5d887325)}.theme-1 .pose-think .character-art{background-position:0 100%}.theme-1 .pose-happy .character-art{background-position:100% 100%}.theme-1 #quizEmoji{display:none}.playing .theme-1 #question{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.4vw,18px);width:100%;margin:0;padding:8px 2px;color:#574b8d;font-weight:900;font-size:clamp(30px,5.5vw,66px)}.math-term,.math-answer{min-width:1.2em;line-height:1.3;padding:0 .1em;text-align:center;border-radius:17px;background:#fff;box-shadow:0 4px 0 #cbd8c7}.term-a{color:#268f8b}.term-b{color:#e28a38}.math-answer{color:#8b5dc7;background:#f0e6ff;border:2px dashed #ba99e3}.math-sign{position:relative;color:#e47968;line-height:1.3;padding-bottom:12px}.math-sign small{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:10px;line-height:1;letter-spacing:1px}.math-equals{color:#758e8c}.math-counters{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px;background:#ffffffa8;border:2px solid #fff;border-radius:18px}.counter-group{min-width:0;flex:1}.dot-label{display:block;text-align:center;font-size:12px;color:#497879;font-weight:800;margin-bottom:7px}.dot-line{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;min-height:20px}.count-dot{position:relative;width:clamp(12px,1.8vw,22px);height:clamp(12px,1.8vw,22px);background:linear-gradient(135deg,#61cbb5,#289e95);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 0 #a6c6bd;flex:none;animation:dot-arrive .4s both;animation-delay:var(--dot-delay)}.second-group .count-dot{background:linear-gradient(135deg,#ffd464,#eea840)}.counter-sign{font-size:24px;color:#809c8a}.count-dot.removed{opacity:.28;background:#b6bbc3;animation:none}.count-dot.removed:after{content:'';position:absolute;left:-3px;top:40%;width:calc(100% + 6px);height:3px;background:#a84362;transform:rotate(-45deg);border-radius:3px}.math-tip{font-size:14px;line-height:1.25;font-weight:700;color:#627e83;margin:0;text-align:center}.playing .theme-1 .choices{grid-auto-rows:minmax(64px,auto)}.playing .theme-1 .choice{font-size:clamp(25px,4dvh,38px);font-weight:900;min-height:60px;padding:5px;border-radius:18px}.pose-happy .character-art{animation:friend-cheer .55s ease-in-out 3}.pose-think .character-art{animation:friend-think 1.3s ease-in-out 2}.theme-1 .pose-happy .character-speech{background:#fff0ac;color:#8a5a23}
@keyframes friend-idle{50%{transform:translateY(-5px) rotate(-1deg)}}@keyframes friend-cheer{50%{transform:translateY(-12px) rotate(5deg) scale(1.035)}}@keyframes friend-think{50%{transform:rotate(-4deg)}}@keyframes dot-arrive{from{transform:scale(.3)}to{transform:scale(1)}}
@media(max-width:700px) and (orientation:portrait){.playing #quiz.character-quiz .stage{grid-template-columns:minmax(85px,.65fr) minmax(0,1.4fr);padding:8px;gap:7px}.character-art{border-width:2px;border-radius:20px;width:100%;max-width:180px}.character-speech{padding:6px;font-size:11px;border-radius:12px}.quiz-board{gap:8px}.playing .character-quiz #question{font-size:18px}.playing .character-quiz .emoji-big{font-size:44px}.playing .theme-1 #question{font-size:clamp(24px,7vw,37px);gap:5px;padding:4px 0}.math-term,.math-answer{border-radius:10px;box-shadow:0 2px 0 #cbd8c7;min-width:1.05em}.math-sign{padding-bottom:10px}.math-sign small{font-size:8px;letter-spacing:.2px}.math-counters{padding:7px;gap:5px;border-radius:12px}.dot-label{font-size:10px;margin-bottom:5px}.dot-line{gap:3px;min-height:14px}.count-dot{width:13px;height:13px;border-width:1px}.math-tip{font-size:11px}.playing .theme-1 .choices{grid-auto-rows:minmax(56px,auto)}.playing .theme-1 .choice{min-height:54px;font-size:29px}.playing #quizRead #repeat{min-height:44px}}
@media(orientation:portrait) and (max-height:620px){.character-speech{font-size:10px}.playing #quiz.character-quiz .stage{padding:6px;gap:5px}.math-counters{padding:5px}.math-tip{font-size:10px}.playing .theme-1 .choices{grid-auto-rows:48px}.playing .theme-1 .choice{min-height:46px;font-size:25px}.playing .theme-1 #question{font-size:25px}.quiz-board{gap:5px}.count-dot{width:11px;height:11px}.character-art{max-width:115px}.playing .character-quiz .emoji-big{font-size:32px}.playing .character-quiz #question{font-size:15px}}
@media(orientation:landscape) and (max-height:520px){.playing #quiz.character-quiz{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(155px,.75fr);grid-template-rows:minmax(0,1fr) 40px;gap:6px}.playing #quiz.character-quiz .stage{grid-column:1;grid-row:1/3;grid-template-columns:minmax(70px,.65fr) minmax(0,1.3fr);padding:5px;gap:5px}.playing .character-quiz #quizRead{grid-column:2;grid-row:2;width:100%;align-self:stretch}.playing .character-quiz #quizRead #repeat{max-width:none;width:100%;min-height:38px;font-size:12px}.playing .character-quiz .choices{grid-column:2;grid-row:1;grid-auto-rows:minmax(44px,1fr);gap:5px}.playing .theme-1 .choice{font-size:23px;min-height:44px;padding:3px}.character-art{max-width:150px}.character-speech{font-size:10px;padding:4px}.playing .theme-1 #question{font-size:29px;gap:5px}.math-counters{padding:5px;gap:5px}.math-tip,.dot-label{font-size:9px}.dot-label{margin-bottom:4px}.count-dot{width:12px;height:12px}.dot-line{gap:3px}.quiz-board{gap:4px}.playing .character-quiz #question{font-size:16px}.playing .character-quiz .emoji-big{font-size:34px}}
@media(prefers-reduced-motion:reduce){.character-art,.count-dot{animation:none!important}}