/* Reading-sized challenge cards keep story problems in the existing arena. */
.challenge-task #problem{border-color:#ffd568;background:radial-gradient(ellipse at 50% 0,#dca73530,transparent 65%),linear-gradient(145deg,#192b38,#10202d);box-shadow:0 6px 0 #051120,0 0 0 3px #ffd56818,0 15px 40px #0005,inset 0 2px #ffecad24}
.challenge-task .arena-top .subject{color:#ffe69c;border-color:#ffd56866;background:#493c20}
.challenge-banner{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;min-height:42px;margin:0 auto;padding:6px 12px;border:2px solid #fff0b2;border-radius:9px;background:linear-gradient(135deg,#ffe694,#f4b93e);color:#31230a;box-shadow:0 3px 0 #77531f,0 0 24px #ffc95520;animation:challenge-reveal .4s ease-out}
.challenge-banner strong{font-size:15px;line-height:1.25;text-align:left}
.challenge-star{display:flex;flex-shrink:0}
.challenge-star .icon{width:26px;height:26px;fill:currentColor;stroke-width:1.5}
.challenge-task .task-content{padding:0}
.challenge-task .combo:empty{display:none}
@keyframes challenge-reveal{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.calm .challenge-banner{animation:none}
@media(prefers-reduced-motion:reduce){.challenge-banner{animation:none}}
.challenge-task #question{font-size:clamp(21px,2vw,28px);line-height:1.4;white-space:normal;max-width:680px;margin:12px auto 18px;letter-spacing:0;font-weight:600;text-wrap:pretty}
.challenge-task.large-text #question{font-size:clamp(23px,2.2vw,30px)}
.challenge-task #message{max-width:630px;margin-left:auto;margin-right:auto;line-height:1.4}
.arena-top{gap:10px}
.challenge-review{margin-left:auto;background:#f5d68c0d;border:1px solid #f5d68c30;color:#f5d68c;padding:7px 10px;border-radius:9px;font-size:11px;white-space:nowrap}
.challenge-review:focus-visible,.challenge-review:hover{background:#f5d68c22}
.challenge-modal #challengeQuestion{font-size:15px;line-height:1.55;color:#d3dee6;margin:15px 0}
#challengeSteps{counter-reset:solution;list-style:none;padding:0;display:grid;gap:10px;margin:20px 0}
#challengeSteps li{counter-increment:solution;display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.5;color:#c5d6e1}
#challengeSteps li::before{content:counter(solution);display:grid;place-items:center;background:#f5d68c12;color:#f5d68c;min-width:24px;height:24px;border-radius:7px;font-size:11px}
#challengeAnswer{color:#e5edb3;font-weight:700;font-size:20px}
@media(min-width:821px) and (max-height:750px){.challenge-task #question{font-size:23px;margin:8px auto 12px}.challenge-task.large-text #question{font-size:25px}.challenge-task.boss #question{font-size:22px;line-height:1.3}}
@media(max-width:560px){.challenge-task #question{font-size:20px;line-height:1.4;margin:10px auto 16px}.challenge-task.large-text #question{font-size:22px}.challenge-task .subject{font-size:10px}.challenge-banner{gap:8px;padding:6px 9px}.challenge-banner strong{font-size:14px}.challenge-star .icon{width:24px;height:24px}.challenge-review{font-size:10px;padding:6px 7px}.challenge-task .arena-top{gap:6px}.challenge-modal>.eyebrow{font-size:8px;letter-spacing:1px}.challenge-modal #challengeQuestion{font-size:13px}#challengeSteps{margin:14px 0}#challengeSteps li{font-size:12px}}