/* Subject illustrations and the two Qrayti characters share the site's tokens.
   Keep this after styles.css so the older emoji thumbnail dimensions yield. */
.subject-thumb.subject-art{width:116px;min-width:116px;height:84px;display:block;overflow:hidden;border:3px solid var(--surface);border-radius:21px;background:var(--surface-2);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 15%,transparent);isolation:isolate}
.subject-art .subject-art-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.subject-thumb.subject-art small{position:absolute;inset:auto 5px 5px auto;max-width:calc(100% - 10px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 6px;border:1px solid #ffffff4d;border-radius:7px;background:#111d38d9;color:#fff;font:800 9px/1.45 system-ui,sans-serif;letter-spacing:.025em;opacity:1;box-shadow:0 2px 7px #09152d1a}
.subject-card:has(.subject-art){min-height:202px;padding-top:77px}
.subject-card:is(:hover,:focus-visible) .subject-art-image{transform:scale(1.055)}
.subject-card:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.context-head .subject-thumb.subject-art{position:relative;inset:auto;width:144px;height:101px;min-width:144px;margin-bottom:17px}
.chapter-hero .subject-thumb.subject-art{width:116px;height:84px;min-width:116px}
.average-subject .subject-thumb.subject-art{border-width:1px!important}
.average-subject .subject-art small{display:none}

/* Badis keeps his original book, cap and name; his gestures respond to students. */
.faq-mascot{touch-action:manipulation;min-width:58px;min-height:58px;border-radius:22px}
.faq-mascot:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.faq-character{animation:none;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.faq-character .mascot-arm,.faq-character .mascot-tassel,.faq-character .mascot-question{transform-box:fill-box;transition:transform .24s ease}
.faq-character .arm-right{transform-origin:0 35%}
.faq-character .arm-left{transform-origin:100% 35%}
.faq-character .mascot-eye{transform-box:fill-box;transform-origin:center}
.faq-mascot:is(:hover,:focus-visible) .faq-character{transform:translateY(-3px) rotate(-3deg)}
.faq-mascot:is(:hover,:focus-visible) .arm-right{transform-origin:0 35%;animation:badis-wave .65s ease-in-out 2}
.faq-mascot:is(:hover,:focus-visible) .arm-left{transform:rotate(9deg)}
.faq-mascot:is(:hover,:focus-visible) .mascot-question{transform:translateY(-3px) rotate(10deg)}
.faq-mascot:is(:hover,:focus-visible) .mascot-eye{animation:character-blink 2.8s ease-in-out 2}
.faq-mascot:active .faq-character{transform:translateY(1px) rotate(2deg) scale(.96)}
.faq-mascot .faq-bubble{padding:11px 14px;background:var(--surface);border-color:color-mix(in srgb,var(--accent) 25%,var(--line));box-shadow:0 8px 28px color-mix(in srgb,var(--accent) 10%,transparent)}
.faq-mascot .faq-bubble b{font-size:12px}.faq-mascot .faq-bubble small{font-size:10px}
.faq-panel{background:var(--surface);border-radius:28px;padding:24px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#faqModal{z-index:1300}
.faq-head{position:relative;padding:15px 12px 20px;border-bottom:1px solid var(--line);margin-bottom:18px;gap:18px;align-items:center}
.faq-head>div{min-width:0}.faq-head h2{line-height:1.45;text-wrap:balance}.faq-head p{line-height:1.8}
.faq-head .faq-character-large{width:90px;height:90px;animation:none;filter:drop-shadow(0 9px 12px color-mix(in srgb,var(--accent) 16%,transparent))}
#faqModal.show .arm-right{animation:badis-wave .65s ease-in-out 2}
#faqModal.show .mascot-question{transform:translateY(-2px) rotate(8deg)}
.faq-list{display:grid;gap:10px}
.faq-list details{padding:0;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);overflow:hidden;transition:border-color .18s ease,background .18s ease}
.faq-list details[open]{background:color-mix(in srgb,var(--accent) 5%,var(--surface));border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.faq-list summary{min-height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;list-style:none;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';display:grid;place-items:center;flex:0 0 25px;height:25px;border:1px solid var(--line);border-radius:50%;background:var(--surface);font:500 18px/1 system-ui,sans-serif;color:var(--accent)}
.faq-list details[open] summary::after{content:'−'}
.faq-list summary:focus-visible{outline:3px solid var(--accent);outline-offset:-4px;border-radius:14px}
.faq-list details p{margin:0;padding:0 16px 16px;font-size:12px;line-height:1.9;color:var(--text);overflow-wrap:anywhere}
.faq-close{min-width:44px;min-height:44px;z-index:2}

/* Hama's crow silhouette is drawn in SVG, with a mischievous glance and wing. */
.study-owl{max-width:min(360px,calc(100vw - 24px));align-items:flex-start}
.study-owl .owl-body{width:84px;height:94px;animation:none;margin-top:8px;filter:drop-shadow(0 8px 10px #10213c26)}
.hama-crow{display:block;width:100%;height:100%;overflow:visible}
.crow-shadow{fill:#15233b20}.crow-body{fill:#27334b;stroke:#152039;stroke-width:2}.crow-bib{fill:#354963}
.crow-tail,.crow-wing{fill:#34425c;stroke:#16223b;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.crow-wing{transform-box:fill-box;transform-origin:15% 15%;transition:transform .24s ease}
.crow-wing-back{fill:#25344e;transform-origin:90% 10%}
.crow-eyes{fill:#fff9e9;transform-box:fill-box;transform-origin:center}
.crow-pupils{fill:#142138;transition:transform .25s ease}
.crow-glint{fill:#fff}.crow-beak{fill:#f5bb55;stroke:#b77c29;stroke-width:1.5;stroke-linejoin:round}
.crow-feet{fill:none;stroke:#d29c50;stroke-width:3;stroke-linecap:round}.crow-brow,.crow-smirk{fill:none;stroke:#152039;stroke-width:2.6;stroke-linecap:round}
.crow-cheek{fill:none;stroke:#9db4cd;stroke-width:2;stroke-linecap:round;opacity:.65}
.owl-arrive .crow-wing-front{animation:crow-wave .75s ease-in-out 2}
.study-owl:is(:hover,:focus-within) .crow-pupils{transform:translateX(-2px)}
.study-owl:is(:hover,:focus-within) .crow-wing-front{transform:rotate(-12deg)}
.study-owl.owl-answered .crow-eyes{transform:scaleY(.82)}
.study-owl.owl-answered .crow-wing-front{transform:rotate(-16deg)}
.study-owl .owl-talk,.study-owl.owl-right .owl-talk{flex:1;min-width:0;width:238px;padding:14px 15px;border-radius:21px 21px 7px 21px;background:var(--surface);border-color:color-mix(in srgb,var(--accent) 27%,var(--line));box-shadow:0 12px 36px #1421381f}
.study-owl.owl-right .owl-talk{border-radius:21px 21px 21px 7px}
.study-owl .owl-name{font-size:10px;line-height:1.5;margin-bottom:6px}.study-owl .owl-talk>b{font-size:12px;line-height:1.8;overflow-wrap:anywhere}
.study-owl .owl-choice-row{gap:8px;margin-top:10px}
.study-owl .owl-talk button{min-height:44px;margin-top:10px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:12px;font-size:11px;line-height:1.5;cursor:pointer;transition:background .18s ease}
.study-owl .owl-choice-row button{flex:1 1 90px;margin-top:0}
.study-owl .owl-talk button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@keyframes badis-wave{0%,100%{transform:rotate(0)}35%{transform:rotate(-29deg)}70%{transform:rotate(-10deg)}}
@keyframes character-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes crow-wave{0%,100%{transform:rotate(0)}35%{transform:rotate(-24deg)}70%{transform:rotate(-7deg)}}

@media(max-width:820px){
  html.qrayti-mobile .subject-card:has(.subject-art){padding-top:76px!important;min-height:178px!important}
  html.qrayti-mobile .subject-card .subject-thumb.subject-art{width:102px!important;min-width:102px!important;height:76px!important;border-radius:19px!important;top:-18px!important}
  .context-head .subject-thumb.subject-art{width:128px;height:91px;min-width:128px}
  .chapter-hero .subject-thumb.subject-art{width:90px;height:68px;min-width:90px}
  .faq-panel{padding:18px 14px;border-radius:23px;max-height:calc(100dvh - 24px)}
  .faq-head{padding:24px 0 17px;gap:10px;align-items:flex-start}
  html.qrayti-mobile .faq-head .faq-character-large{width:68px!important;height:68px!important}
  .faq-list summary{padding:12px;font-size:12px}.faq-list details p{padding:0 12px 14px}
  .study-owl .owl-body{width:68px;height:80px}
  .study-owl .owl-talk,.study-owl.owl-right .owl-talk{width:auto;padding:12px}
}
@media(prefers-reduced-motion:reduce){
  .subject-thumb.subject-art,.subject-art-image,.faq-character,.faq-character *,.faq-bubble,.faq-list details,.hama-crow *,.study-owl,.study-owl .owl-body{animation:none!important;transition:none!important}
  .subject-card:is(:hover,:focus-visible) .subject-art,.subject-card:is(:hover,:focus-visible) .subject-art-image,.faq-mascot:is(:hover,:focus-visible,:active) .faq-character,.faq-character .mascot-arm,.faq-character .mascot-eye,.faq-character .mascot-question,.hama-crow .crow-wing,.hama-crow .crow-pupils,.hama-crow .crow-eyes{transform:none!important}
}