/* Quests: the comic maths game */
.qh-grade{margin:22px 0 10px}
.qh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.qh-card{display:grid;gap:4px;padding:16px;border:4px solid #1b1340;border-radius:18px;background:#fff;box-shadow:5px 5px 0 #1b1340;color:#1b1340;text-decoration:none;transition:transform .12s}
.qh-card:hover,.qh-card:focus-visible{transform:translate(-2px,-2px) rotate(-.6deg);background:#fffbe6}
.qh-card b{font-size:18px}.qh-card small{color:#5b5277;font-weight:600}.qh-icon{font-size:34px;line-height:1}.qh-stars{min-height:20px}
.qh-empty{display:flex;gap:14px;align-items:center;padding:20px;border:4px solid #1b1340;border-radius:18px;background:#fffbe6;font-weight:700}.qh-empty span{font-size:36px}.qh-empty p{margin:0}
.qh-more{font-weight:700}

.qg{position:relative;display:grid;gap:12px;max-width:760px;margin:0 auto;padding:18px;border:5px solid #1b1340;border-radius:26px;background:#fffbe6;background-image:radial-gradient(rgba(27,19,64,.08) 2px,transparent 2px);background-size:18px 18px;box-shadow:8px 8px 0 #1b1340;overflow:hidden;min-width:0}
.qg-menu{display:grid;justify-items:center;gap:10px;padding:14px 4px;text-align:center}.qg-menu h2,.qg-menu p{margin:0}
.qg-bigicon{font-size:78px;line-height:1.1}
.qg-modes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.qg-best{font-weight:800;color:#6c4de6}
.qg-stars{font:400 44px Impact,"Arial Black",sans-serif;letter-spacing:2px}
.qg-mute{justify-self:end;min-height:44px;padding:6px 12px;border:0;background:none;color:#5b5277;font:700 14px inherit;cursor:pointer}
.qg-menu .qg-mute{justify-self:center}

.qg-stage{position:relative;display:flex;justify-content:center;min-height:128px;padding:8px;border:4px solid #1b1340;border-radius:18px;background:linear-gradient(#b9e8ff,#ffc2d6)}
.qg-stage.slim{min-height:48px;padding:4px}
.qg-boss{display:grid;justify-items:center;gap:4px;width:min(100%,340px)}
.qg-face{font-size:60px;line-height:1.1}.qg-boss b{font-size:17px}
.qg-hp{width:100%;height:18px;border:3px solid #1b1340;border-radius:10px;background:#fff;overflow:hidden}.qg-hp i{display:block;height:100%;background:#ff5d8f;transition:width .3s}
.qg-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-weight:800;min-height:26px}
.qg-clock{font:400 26px Impact,"Arial Black",sans-serif}.qg-clock.low{color:#d6204f}.qg-score{font:400 26px Impact,"Arial Black",sans-serif}.qg-streak{color:#d6204f}
.qg-box{display:grid;gap:10px;min-width:0}
.qg-q{margin:0;font-size:clamp(18px,3vw,23px);font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.qg-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qg-choice{display:flex;gap:10px;align-items:center;min-height:56px;padding:10px 12px;border:4px solid #1b1340;border-radius:14px;background:#fff;box-shadow:4px 4px 0 #1b1340;color:#1b1340;font:800 19px inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere;min-width:0}
.qg-choice:hover:not(:disabled){background:#ffd23f}.qg-choice:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 #1b1340}
.qg-choice:focus-visible,.qg .btn:focus-visible{outline:4px solid #6c4de6;outline-offset:2px}
.qg-choice kbd{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#ece8ff;font:800 14px inherit}
.qg-choice:disabled{cursor:default;opacity:.65}
.qg-choice.right{background:#38d9a9;opacity:1}.qg-choice.wrong{background:#ff9db8;opacity:1}
.qg-say{margin:0;min-height:26px;font-weight:700}.qg-say.good{color:#0b7a5b}.qg-say.bad{color:#b0173f}
.qg-next{justify-self:start}

.qg-pop{position:absolute;left:50%;top:32%;z-index:2;padding:4px 16px;border:4px solid #1b1340;background:#ffd23f;font:400 34px Impact,"Arial Black",sans-serif;pointer-events:none;animation:qg-pop .8s ease-out forwards}
.qg-pop.bad{background:#ff5d8f;color:#fff}
@keyframes qg-pop{0%{transform:translate(-50%,0) scale(.3) rotate(-12deg);opacity:0}25%{transform:translate(-50%,0) scale(1.25) rotate(6deg);opacity:1}70%{transform:translate(-50%,-8px) scale(1) rotate(-3deg);opacity:1}100%{transform:translate(-50%,-26px) scale(.9);opacity:0}}
.shake{animation:qg-shake .35s}
@keyframes qg-shake{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.qg-bit{position:absolute;top:-14px;width:10px;height:16px;pointer-events:none;animation:qg-fall 2s ease-in forwards}
@keyframes qg-fall{to{transform:translateY(620px) rotate(var(--spin));opacity:.2}}
@media (max-width:560px){.qg{padding:12px;border-width:4px;box-shadow:5px 5px 0 #1b1340}.qg-choices{grid-template-columns:minmax(0,1fr)}.qg-modes .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.qg *{animation:none!important;transition:none!important}}
/* Pictures from the art engine */
.qh-art{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:3px solid #1b1340;border-radius:12px;margin-bottom:4px}
.qg-pic.qg-bigicon{width:150px;height:150px;font-size:0;object-fit:cover;border:4px solid #1b1340;border-radius:20px;box-shadow:4px 4px 0 #1b1340}
.qg-pic.qg-face{width:84px;height:84px;font-size:0;object-fit:cover;border:3px solid #1b1340;border-radius:50%;background:#fff}