/* Test me: the pop quiz. */
.pq { width: min(760px, calc(100vw - 20px)); max-width: none; max-height: calc(100vh - 20px); padding: 0; border: 0; border-radius: 28px; background: var(--bg, #F3FAF6); color: var(--ink, #10211C); box-shadow: 0 30px 80px rgb(0 0 0 / .35); overflow: auto; }
.pq::backdrop { background: rgb(7 30 24 / .65); backdrop-filter: blur(3px); }
.pq-card { position: relative; padding: 0 0 22px; }
.pq-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 16px 20px; color: #FFFFFF; background: radial-gradient(circle at 90% -10%, rgb(244 200 66 / .4), transparent 45%), linear-gradient(120deg, #0B2A22, #0E4D3E 60%, #137A5E); box-shadow: 0 4px 0 #F4C842; border-radius: 28px 28px 0 0; }
.pq-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; }
.pq-head p { margin: 2px 0 0; opacity: .9; }
.pq-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pq-score, .pq-streak { padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / .16); font-weight: 800; }
.pq-streak { background: #F4C842; color: #2B2200; }
.pq-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .45); background: transparent; color: #FFFFFF; font-size: 1.1rem; cursor: pointer; }
.pq-bar { height: 10px; margin: 16px 20px 0; border-radius: 999px; background: var(--line, #D4E4DD); overflow: hidden; }
.pq-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2DBE8F, #F4C842); transition: width .3s; }
.pq-count { margin: 8px 20px 0; font-weight: 700; color: var(--muted, #4E625C); }
.pq-q { margin: 8px 20px 14px; font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; color: var(--deep, #0E4D3E); }
.pq-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 20px; }
.pq-opt { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px; border-radius: 18px; border: 3px solid transparent; text-align: left; font-size: 1.08rem; font-weight: 700; cursor: pointer; transition: transform .12s; }
.pq-opt:hover:not(:disabled) { transform: translateY(-2px); }
.pq-opt:focus-visible, .pq button:focus-visible { outline: 4px solid #F4C842; outline-offset: 3px; }
.pq-shape { font-size: 1.3rem; }
.pq-o0 { background: #0E4D3E; color: #FFFFFF; } .pq-o1 { background: #137A5E; color: #FFFFFF; }
.pq-o2 { background: #F4C842; color: #2B2200; } .pq-o3 { background: #FFFFFF; color: #0E4D3E; border-color: #0E4D3E; }
.pq-opt:disabled { cursor: default; opacity: .5; }
.pq-opt.pq-right, .pq-opt.pq-show { opacity: 1; box-shadow: 0 0 0 6px #2DBE8F, 0 0 30px rgb(45 190 143 / .6); }
.pq-opt.pq-right::after, .pq-opt.pq-show::after { content: "✓"; margin-left: auto; font-size: 1.4rem; }
.pq-opt.pq-wrong { opacity: .75; animation: pq-shake .4s; }
.pq-opt.pq-wrong::after { content: "✗"; margin-left: auto; font-size: 1.4rem; }
.pq-react { margin: 16px 20px 0; min-height: 10px; }
.pq-yes, .pq-think, .pq-reveal { display: grid; gap: 8px; justify-items: center; text-align: center; }
.pq-yes { padding: 12px; border-radius: 20px; background: var(--soft, #E1F4EB); border: 2px solid #2DBE8F; }
.pq-big { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 800; color: var(--deep, #0E4D3E); }
.pq-think { grid-template-columns: auto minmax(0, 1fr); align-items: center; text-align: left; padding: 10px 14px; border-radius: 20px; background: #FFF8DC; border: 2px solid #F4C842; }
.pq-words span { display: inline-block; transition: opacity .2s; }
.pq-pop { animation: pq-pop .35s ease-out; }
.pq-hint { grid-column: 1 / -1; margin: 0; font-weight: 700; color: var(--deep, #0E4D3E); text-align: center; }
.pq-reveal { grid-column: 1 / -1; margin-top: 6px; }
.pq-reveal p, .pq-yes p { margin: 0; }
/* The hand gives a little tug, as if pulling a memory out of the head. */
.pq-hand { animation: pq-tug 1.2s ease-in-out 2; }
@keyframes pq-tug { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
.pq-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pq-end { text-align: center; }
.pq-end h3 { font-family: var(--font-display); font-size: 1.6rem; color: var(--deep, #0E4D3E); margin: 6px 20px; }
.pq-stars { margin-top: 18px; font-size: 3.2rem; letter-spacing: 8px; color: var(--line, #D4E4DD); }
.pq-stars .on { color: #F4C842; text-shadow: 0 0 18px rgb(244 200 66 / .7); }
.pq-final { font-size: 1.2rem; }
.pq-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0 20px; }
@keyframes pq-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes pq-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (max-width: 560px) { .pq-opts { grid-template-columns: minmax(0, 1fr); } .pq-think { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .pq-opt, .pq-bar i { transition: none; } .pq-opt.pq-wrong, .pq-pop, .pq-hand { animation: none; } }
/* The "Test me" button, wherever it appears. */
.pq-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 14px; border: 2px solid #F4C842; background: #FFF8DC; color: #2B2200; font-weight: 800; cursor: pointer; }
.pq-btn:hover { background: #F4C842; }
.ks-pick-row { display: grid; gap: 10px; padding: 18px 20px 6px; }
.ks-pick-row small { font-weight: 500; opacity: .9; }
.ks-pick-err { margin: 6px 20px; }
.ks-testme { margin-left: auto; align-self: center; }