/* ================================================================
lkg-vocab.css
----------------------------------------------------------------
Styles for "Vocabulary & Picture Words" (Tier 7) on the LKG English
page (lkg-english.html):
- A.1 Naming Things (lkVocName)
- A.2 Picture Pairs (lkVocPair)
- A.3 Category Sort (lkVocSort)
- A.4 Action Words (lkVocAct)
- A.5 Opposites Intro (lkVocOpp)
- A.6 Picture Reading (lkVocScene)
Same popup shell as every other LKG skill (quiz-overlay / quiz-modal /
bq-* classes, markup built by lkg-common.js). This sheet LAYERS ON TOP of
lkg-ready.css, which already holds the shared picture, voice-button and
answer-chip rules, so it only adds what Tier 7 needs. Every Tier 7 popup id
starts with "lkv" (lkvocname-quiz-overlay ...), and every new class with
"lk-v" or an existing "lk-" name.
Finish (matt + shine, kid psychology): soft matt cream/lilac paper stage,
glossy sunny-yellow, coral, sky, mint, lavender and bubble-gum objects.
Warm, friendly, high-contrast colours; nothing flashes; no harsh red
"wrong" signals (a wrong chip only turns a gentle peach).
Layout
- The 4 answer chips ALWAYS stay on ONE row (flex-wrap: nowrap).
- Android-native feel: >=56px touch targets, instant :active press, no tap
flash, no 300ms delay, safe-area padding, no page scroll while a finger is
dragging or tapping inside a picture.
(before this one)
================================================================ */
/* ---------- popup shell ---------- */
.quiz-overlay[id^="lkv"] .quiz-modal {
--lk-fig: 250px;
overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
}
.quiz-overlay[id^="lkv"] .quiz-question { line-height: 1.45; }
.quiz-overlay[id^="lkv"] .quiz-question b { color: var(--secondary, #4b3f8f); }
/* ---------- the 4 chips: ONE line, always ---------- */
.quiz-overlay[id^="lkv"] .quiz-number-options.lk-picker {
display: flex !important; flex-wrap: nowrap !important; flex-direction: row !important;
align-items: stretch; justify-content: center; gap: 10px;
width: 100%; max-width: 520px; margin: 16px auto 4px;
}
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt {
flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
animation: lkv-pop .28s ease-out both;
}
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt:nth-child(2) { animation-delay: .04s; }
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt:nth-child(3) { animation-delay: .08s; }
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt:nth-child(4) { animation-delay: .12s; }
@keyframes lkv-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
/* a gentle peach (never harsh red) for a wrong pick */
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt.is-wrong {
border-color: #ffa56b; background: rgba(255, 165, 107, .14); box-shadow: 0 0 0 3px rgba(255, 165, 107, .22);
}
/* long picture names (Strawberry, Watermelon, Elephant, Umbrella) must fit on one line */
.quiz-overlay[id^="lkv"] .lk-opt-letter {
font-size: clamp(8.5px, 2.7vw, 14px); line-height: 1.1; max-width: 100%; letter-spacing: -.2px;
overflow-wrap: normal; word-break: keep-all; hyphens: none; white-space: nowrap;
}
.quiz-overlay[id^="lkv"] .lk-opt-thumb { max-width: min(84px, 100%); }
/* ---------- pictures ---------- */
/* the stage: matt cream paper with a soft shine on the top-left */
.quiz-overlay[id^="lkv"] .lk-stage { box-shadow: 0 3px 0 rgba(75, 63, 143, .08), inset 0 0 26px rgba(167, 139, 250, .18); }
/* the small dancing / running child sits in a square stage */
.lk-figg { transform-box: fill-box; }
/* the picture-reading shop shelf: things you can tap */
.lk-obj { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lk-obj .lk-objmove { transform-box: fill-box; transform-origin: center; }
.lk-obj.lk-found .lk-objmove { animation: lkv-hop .5s ease-out 1; }
@keyframes lkv-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-10px) scale(1.06); } 100% { transform: translateY(0) scale(1); } }
/* sorting: pictures that can be dragged */
.lk-item.lk-drag { cursor: grab; }
.lk-item.lk-drag:active { cursor: grabbing; }
.lk-item .lk-itemmove { transform-box: view-box; transform-origin: 0 0; }
/* the big word on a card is the star of the picture; give the text a soft pop */
.lk-stage .lk-t { paint-order: stroke; }
/* sound-speaker pulse while the voice speaks */
.lk-speaker.lk-pulse { transform-box: fill-box; transform-origin: center; }
/* hands-on pictures: no text selection or long-press menu while a finger is working */
.quiz-overlay[id^="lkv"] .lk-stage.lk-live,
.quiz-overlay[id^="lkv"] .lk-stage.lk-live .lk-svg { touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
/* ---------- responsive (phones first, then desktop) ---------- */
@media (max-width: 560px) {
.quiz-overlay[id^="lkv"] .quiz-modal { --lk-fig: 232px; }
.quiz-overlay[id^="lkv"] .quiz-number-options.lk-picker { gap: 7px; margin-top: 14px; }
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt { padding: 7px 3px; min-height: 58px !important; }
.quiz-overlay[id^="lkv"] .lk-opt-thumb { max-width: 70px; }
}
@media (max-width: 380px) {
.quiz-overlay[id^="lkv"] .quiz-modal { --lk-fig: 208px; }
.quiz-overlay[id^="lkv"] .quiz-number-options.lk-picker { gap: 5px; }
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt.has-thumb { padding: 5px 2px 6px; }
.quiz-overlay[id^="lkv"] .lk-opt-thumb { max-width: 60px; }
}
@media (max-width: 340px) {
.quiz-overlay[id^="lkv"] .quiz-modal { padding-left: 12px; padding-right: 12px; }
.quiz-overlay[id^="lkv"] .quiz-number-options.lk-picker { gap: 4px; }
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt { padding: 6px 1px; }
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt.has-thumb { padding: 4px 1px 5px; }
.quiz-overlay[id^="lkv"] .lk-opt-thumb { max-width: 54px; }
}
@media (min-width: 900px) {
.quiz-overlay[id^="lkv"] .quiz-modal { --lk-fig: 280px; }
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt.has-thumb { padding: 8px 6px 10px; }
.quiz-overlay[id^="lkv"] .lk-opt-thumb { max-width: 96px; }
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt:hover:not(:disabled) { transform: translateY(-2px); }
}
@media (pointer: coarse) {
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt { min-height: 62px !important; }
}
@media (max-height: 560px) and (orientation: landscape) {
.quiz-overlay[id^="lkv"] .quiz-modal { --lk-fig: 170px; }
}
@media (prefers-reduced-motion: reduce) {
.quiz-overlay[id^="lkv"] .quiz-number-opt.lk-opt { animation: none; }
.lk-obj.lk-found .lk-objmove { animation: none; }
}