/* The quiz (quiz.js): a moving picture and three words; and the quiz badge on a finished lesson's tile */
#quiz { position: relative; height: calc(var(--dvh) * 100); overflow: hidden; touch-action: manipulation; background: #bfe6ff; color: #1c1165; }
#quiz .qnum { font-size: max(16px, calc(var(--dvh) * 5)); }
.qstage { position: absolute; left: 0; right: 0; top: calc(var(--dvh) * 16); bottom: calc(var(--dvh) * 4); display: flex; align-items: center; gap: calc(var(--dvw) * 3); padding: 0 calc(var(--dvw) * 4); }
.qhero { position: relative; bottom: auto; flex: none; }
.qpic { flex: 1.1; min-width: 0; height: 100%; display: grid; place-items: center; background: rgba(255, 255, 255, .85); border: calc(var(--dvh) * 1) solid #fff; border-radius: calc(var(--dvh) * 6); box-shadow: 0 calc(var(--dvh) * 1.6) 0 rgba(28, 17, 101, .18); }
.qpic .item { display: grid; place-items: center; }
.qpic .item .art { cursor: pointer; }
.qpic.listen { align-content: center; gap: calc(var(--dvh) * 2); }
.qpic.listen p { margin: 0; font-size: calc(var(--dvh) * 5); font-weight: 800; color: #7a7390; }
.qspeak { width: calc(var(--dvh) * 26); height: calc(var(--dvh) * 26); border: 0; border-radius: 50%; background: var(--grad); display: grid; place-items: center; box-shadow: 0 calc(var(--dvh) * 1) 0 #1c1165; cursor: pointer; }
.qspeak svg { width: 55%; height: 55%; } .qspeak:active { transform: translateY(calc(var(--dvh) * .6)); }
.qopts { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--dvh) * 3); }
.qopt { --fs: 1; padding: calc(var(--dvh) * 2.4) calc(var(--dvw) * 1.5); border: calc(var(--dvh) * .8) solid #fff; border-radius: calc(var(--dvh) * 4); background: var(--grad); color: #fff; font: inherit; font-weight: 900; font-size: calc(var(--dvh) * 9 * var(--fs)); line-height: 1.1; box-shadow: 0 calc(var(--dvh) * 1.2) 0 rgba(28, 17, 101, .35); cursor: pointer; transition: transform .1s, opacity .3s, background .3s; }
.qopt:active { transform: translateY(calc(var(--dvh) * .6)); }
.qopt.miss { background: #c9c3dc; color: #7a7390; opacity: .6; animation: shake .35s; box-shadow: none; }
.qopt.right { background: linear-gradient(135deg, #3fc79a, #1f9a6e); }
#quiz .gift { position: absolute; z-index: 6; margin: -.5em 0 0 -.5em; line-height: 1; pointer-events: none; }
/* the badge on a lesson tile that opens its quiz (shown once the lesson has been finished) */
.lesson .qz { position: absolute; z-index: 2; top: 5%; right: 5%; width: calc(var(--dvh) * 8); height: calc(var(--dvh) * 8); min-width: 26px; min-height: 26px; display: grid; place-items: center; border-radius: 50%; background: #ffd34d; border: 2px solid #fff; color: #6b4a00; font-weight: 900; font-size: max(14px, calc(var(--dvh) * 4.6)); box-shadow: 0 2px 0 #c98a00; cursor: pointer; text-shadow: none; }
.lesson .qz:active { transform: translateY(2px); box-shadow: none; }