/* ============================================================
   STUDY AI — quiz player styles (landing demo, student exercises, duel)
   ============================================================ */
.qz { max-width: 760px; margin: 0 auto; }
.qz-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .qz-top .bar { flex: 1; height: 16px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .08); }
.qz-n { font: 800 1rem var(--head); color: var(--ink2); min-width: 46px; text-align: right; }
.qz-card { position: relative; background: #fff; border-radius: 28px; padding: 28px 24px 24px; box-shadow: var(--shadow-lg); border: 3px solid #fff; text-align: center; }
.qz-card.shake { animation: shake .45s; }
.qz-mascot { position: absolute; left: 12px; top: -34px; width: 78px; height: 78px; filter: drop-shadow(0 6px 8px rgba(30, 40, 100, .25)); transition: transform .2s; } .qz-mascot svg { width: 100%; height: 100%; } .qz-mascot.bounce { animation: bounceIn .45s; }
.qz-big { font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1.25; margin: 14px 0 6px; word-break: break-word; letter-spacing: 2px; }
.qz-q { font: 800 clamp(1.3rem, 4.4vw, 1.9rem)/1.3 var(--head); margin: 18px 0 22px; color: var(--ink); text-wrap: balance; }
.qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qz-opt { display: flex; align-items: center; gap: 12px; text-align: left; background: #f5f7ff; border: 3px solid #e3e8fb; border-radius: 20px; padding: 14px 16px; cursor: pointer; font: 800 1.15rem var(--font); color: var(--ink); min-height: 64px; transition: transform .12s, border-color .12s, background .12s; }
.qz-opt b { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--g-main); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 800 1.05rem var(--head); }
.qz-opt:nth-child(2) b { background: var(--g-pink); } .qz-opt:nth-child(3) b { background: var(--g-sun); color: #4a2a00; } .qz-opt:nth-child(4) b { background: var(--g-grass); color: #053a22; }
.qz-opt:hover:not([disabled]) { transform: translateY(-3px) scale(1.01); border-color: var(--purple); background: #f0ecff; } .qz-opt:active:not([disabled]) { transform: scale(.98); }
.qz-opt[disabled] { cursor: default; } .qz-opt.right { background: #dcf8ec; border-color: var(--green); animation: bounceIn .4s; } .qz-opt.wrong { background: #ffe3e7; border-color: var(--red); animation: shake .4s; }
.qz-tf .qz-opt { justify-content: center; font-size: 1.35rem; min-height: 84px; flex-direction: column; gap: 4px; } .qz-ico { font-size: 1.9rem; }
.qz-input { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; } .qz-input input { font: 800 1.6rem var(--head); text-align: center; border-width: 3px; min-height: 60px; } .qz-input input.right { border-color: var(--green); background: #dcf8ec; } .qz-input input.wrong { border-color: var(--red); background: #ffe3e7; }
.qz-fb { margin-top: 16px; text-align: left; border-radius: 16px; padding: 0; font-weight: 700; } .qz-fb.ok, .qz-fb.bad { padding: 13px 16px; animation: popIn .25s; } .qz-fb.ok { background: #e6faf1; color: #0c6b47; } .qz-fb.bad { background: #fff0f2; color: #a8283a; }
.qz-why { margin-top: 6px; color: var(--ink2); font-weight: 700; font-size: .95rem; } .qz-ailine { margin-top: 8px; padding-top: 8px; border-top: 2px dashed rgba(0, 0, 0, .1); color: var(--ink2); font-weight: 700; }
.qz-actions { margin-top: 18px; display: flex; justify-content: center; }
.qz-duel { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 26px; }
.qz-side { background: #fff; border-radius: 18px; padding: 8px 22px; text-align: center; box-shadow: var(--shadow); min-width: 110px; } .qz-side b { display: block; font-size: .8rem; color: var(--mut); text-transform: uppercase; letter-spacing: .6px; } .qz-side span { font: 800 2rem var(--head); } .qz-side.you span { color: var(--green); } .qz-side.ai span { color: var(--pink); }
.qz-vs { font: 800 1.3rem var(--head); color: #fff; background: var(--g-pink); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 #c93d78; }
.qz-end { text-align: center; max-width: 560px; margin: 0 auto; background: #fff; border-radius: 28px; padding: 30px 22px; box-shadow: var(--shadow-lg); animation: popIn .5s; } .qz-end .stars { display: flex; justify-content: center; gap: 6px; margin: 6px 0 12px; } .qz-end .stars svg { animation: bounceIn .6s both; } .qz-end .stars svg:nth-child(2) { animation-delay: .15s; } .qz-end .stars svg:nth-child(3) { animation-delay: .3s; }
.qz-end .mas { width: 120px; margin: -70px auto 4px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .2)); } .qz-end .big { font: 800 3rem var(--head); color: var(--purple); } .qz-end .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 640px) { .qz-opts { grid-template-columns: 1fr; } .qz-tf { grid-template-columns: 1fr 1fr; } .qz-card { padding: 30px 16px 20px; border-radius: 24px; } .qz-mascot { width: 64px; height: 64px; top: -28px; } .qz-opt { font-size: 1.05rem; } }
@media (min-width: 641px) and (max-width: 1023px) { .qz { max-width: 640px; } .qz-opt { min-height: 72px; font-size: 1.25rem; } }