/* ===============================================================
   activity-worlds.css
   (c) 2025-2026 Britt Innovations Inc., Monsieur Britt
   Per-activity skin layer for grade4-8.html. Shared across grades.
   Per-grade colour and type tokens are overridden inline in each
   gradeN.html via the Patch-5 :root block. This file only paints.
   No data, no behaviour, no JS hooks.
   =============================================================== */

/* ---------- Per-grade tokens (defaults; overridden per file) ---------- */
:root {
    --aw-accent:  #5B8DEF;
    --aw-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --aw-serif:   'Fraunces', Georgia, serif;
    --aw-mono:    'JetBrains Mono', ui-monospace, monospace;
    --aw-hand:    'Caveat', 'Comic Sans MS', cursive;
    --aw-border:  3px;
    --aw-radius:  18px;
    --aw-shadow:  6px 6px 0;
    --aw-ink:     #1f2937;
    --aw-paper:   #FFFBEB;
}

/* ---------- Default world (fallback for any activity not yet styled) ---------- */
.content[class*="world-"] { padding: 0; }
.content[class*="world-"] .section-header { display: block; }

/* Smooth tab transition */
.content[class*="world-"] > * { animation: aw-in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes aw-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===============================================================
   Phase 1: the 8 most-used tabs
   =============================================================== */

/* --- Quiz world (magazine cover, sticker-shadow cards) --- */
.content.world-quiz .question,
.content.world-quiz .quiz-question {
    font-family: var(--aw-display);
    font-weight: 700;
}
.content.world-quiz .answer-option,
.content.world-quiz .option {
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: var(--aw-radius);
    box-shadow: var(--aw-shadow) var(--aw-ink);
    transition: transform .12s, box-shadow .12s;
}
.content.world-quiz .answer-option:hover,
.content.world-quiz .option:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--aw-ink);
}

/* --- Flashcards world (paper texture, hand-written labels) --- */
.content.world-flash .flashcard,
.content.world-flashcards .flashcard {
    background: var(--aw-paper);
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: var(--aw-radius);
    box-shadow: var(--aw-shadow) var(--aw-ink);
}
.content.world-flash .flashcard .english,
.content.world-flashcards .flashcard .english {
    font-family: var(--aw-hand);
}

/* --- Memory world (matched-pair glow) --- */
.content.world-memory .memory-card.matched {
    box-shadow: 0 0 12px var(--aw-accent);
}

/* --- Matching world (rounded chips) --- */
.content.world-matching .match-item,
.content.world-matching .matching-item {
    border-radius: calc(var(--aw-radius) * 1.5);
    border: var(--aw-border) solid var(--aw-ink);
}

/* --- Cloze world (paper passage, serif body) --- */
.content.world-cloze .cloze-passage,
.content.world-cloze .passage-text {
    font-family: var(--aw-serif);
    background: var(--aw-paper);
    padding: 1rem;
    border-radius: var(--aw-radius);
}

/* --- Writing / composition world (serif lined paper) --- */
.content.world-writing .writing-area,
.content.world-composition .writing-area,
.content.world-writingProcess .writing-area {
    font-family: var(--aw-serif);
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: var(--aw-radius);
}

/* --- Listening world (mic-button accent ring) --- */
.content.world-listening .play-button {
    border: var(--aw-border) solid var(--aw-accent);
    border-radius: 999px;
}

/* --- Dialogue world (chat bubbles) --- */
.content.world-dialogue .dialogue-line,
.content.world-dialogueCompletion .dialogue-line {
    border-radius: calc(var(--aw-radius) * 1.2);
    padding: .5rem .8rem;
}

/* ===============================================================
   Phase 2: speaking and reading family
   These reuse most of the listening/dialogue look and only diverge
   on the hero element (record button, presenter card, etc.).
   =============================================================== */

/* --- parlez (pronunciation drills, rose spotlight on mic) --- */
.content.world-parlez .record-button,
.content.world-parlez .pronunciation-mic {
    border: var(--aw-border) solid var(--aw-accent);
    border-radius: 999px;
    transition: transform .15s var(--aw-bounce, ease-out);
}
.content.world-parlez .record-button:hover {
    transform: scale(1.06);
}
.content.world-parlez .confidence-bar {
    height: 6px;
    background: linear-gradient(90deg, var(--aw-accent), #facc15);
    border-radius: 3px;
}

/* --- presentation (tiny stage curtain) --- */
.content.world-presentation .presenter-stage,
.content.world-present .presenter-stage {
    background: linear-gradient(180deg, #1f2937 0 16%, transparent 16%);
    border-radius: var(--aw-radius);
    padding: 1.25rem 1rem;
}
.content.world-presentation .presenter-pill,
.content.world-present .presenter-pill {
    background: var(--aw-accent);
    color: var(--aw-ink);
    border-radius: 999px;
    padding: .25rem .75rem;
    font-weight: 700;
}

/* --- lisEvalue (read-aloud karaoke) --- */
.content.world-lisevalue .passage-text,
.content.world-lis_evalue .passage-text,
.content.world-lisEvalue .passage-text {
    font-family: var(--aw-serif);
    background: var(--aw-paper);
    border-radius: var(--aw-radius);
    padding: 1rem;
    line-height: 1.9;
}
.content.world-lisevalue .karaoke-word.active,
.content.world-lisEvalue .karaoke-word.active {
    background: var(--aw-accent);
    color: var(--aw-ink);
    border-radius: 4px;
    padding: 0 2px;
}

/* --- dictee (speaker icon focal) --- */
.content.world-dictee .replay-button,
.content.world-dictee .play-button {
    border: var(--aw-border) solid var(--aw-accent);
    border-radius: 999px;
}
.content.world-dictee .choice-chip {
    border-radius: 999px;
    border: var(--aw-border) solid var(--aw-ink);
    padding: .35rem .75rem;
}

/* --- conversation (chat-on-paper) --- */
.content.world-conversation .dialogue-line,
.content.world-conversation .chat-bubble {
    border-radius: calc(var(--aw-radius) * 1.2);
    padding: .55rem .9rem;
    max-width: 80%;
}
.content.world-conversation .chat-bubble.partner {
    background: #faf5ff;
    color: var(--aw-ink);
    align-self: flex-start;
}
.content.world-conversation .chat-bubble.you {
    background: var(--aw-accent);
    color: var(--aw-ink);
    align-self: flex-end;
}

/* --- dialogueCompletion (yellow-tape blanks) --- */
.content.world-dialoguecompletion .blank-input,
.content.world-dialogueCompletion .blank-input {
    background: #fef9c3;
    border: var(--aw-border) dashed var(--aw-ink);
    border-radius: 6px;
    padding: 0 .35rem;
    transform: rotate(-1deg);
    display: inline-block;
}

/* --- questionDuJour (tilted poster) --- */
.content.world-questiondujour .qdj-card,
.content.world-questionDuJour .qdj-card,
.content.world-questiondujour .prompt-card,
.content.world-questionDuJour .prompt-card {
    transform: rotate(-2deg);
    background: #fef3c7;
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: var(--aw-radius);
    padding: 1rem 1.25rem;
    font-family: var(--aw-serif);
    box-shadow: var(--aw-shadow) rgba(0,0,0,.15);
}
.content.world-questiondujour .qdj-card,
.content.world-questionDuJour .qdj-card {
    margin: .75rem auto;
    max-width: 540px;
}

/* ===============================================================
   Story world (Phase 3 preview)
   Storybook spread with serif body. Aligns with renderStory output.
   =============================================================== */
.content.world-story .section-header {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
}
.content.world-story #storyChars,
.content.world-story .story-character-strip {
    border: 2px dashed var(--aw-accent);
}

/* ===============================================================
   Speaking-family fallback (any activity routed to speaking style)
   =============================================================== */
.content.world-speaking .record-button,
.content.world-speaking .play-button {
    border: var(--aw-border) solid var(--aw-accent);
    border-radius: 999px;
}

/* ===============================================================
   Phase 3: story, culture, micro-lessons
   Selectors below match real class names rendered by grade4-8.html.
   Inline-styled containers are left alone; we paint where we can.
   =============================================================== */

/* --- story: storybook spread (serif body, parchment) --- */
.content.world-story .section-header {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
}
.content.world-story #storyChars,
.content.world-story .story-character-strip {
    border: 2px dashed var(--aw-accent);
}

/* --- culture: postcard panel (warm amber, serif body) --- */
.content.world-culture .culture-opt {
    border-radius: var(--aw-radius);
    border: var(--aw-border) solid var(--aw-ink);
    transition: transform .12s, box-shadow .12s;
    box-shadow: 2px 2px 0 rgba(0,0,0,.06);
}
.content.world-culture .culture-opt:hover:not([disabled]) {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 rgba(0,0,0,.08);
}
.content.world-culture .section-header {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* --- authenticReading: magazine article with drop-cap --- */
.content.world-authenticreading .section-header,
.content.world-authenticReading .section-header {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.content.world-authenticreading pre,
.content.world-authenticReading pre {
    font-family: var(--aw-serif) !important;
    line-height: 1.7;
    background: var(--aw-paper) !important;
    border-radius: var(--aw-radius);
    padding: 1.25rem 1.5rem !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.content.world-authenticreading pre::first-letter,
.content.world-authenticReading pre::first-letter {
    font-family: var(--aw-display);
    font-size: 2.6em;
    float: left;
    line-height: 1;
    padding: .15em .25em 0 0;
    color: var(--aw-accent);
}

/* --- savaisTu: old-book single-page lookup --- */
.content.world-savaistu .savais-tu-section,
.content.world-savaisTu .savais-tu-section {
    background: var(--aw-paper);
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: var(--aw-radius);
    padding: 1.25rem;
}
.content.world-savaistu .fact-card,
.content.world-savaisTu .fact-card {
    background: #fffaf0;
    border-left: 4px solid var(--aw-accent);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-family: var(--aw-serif);
}
.content.world-savaistu .fact-emoji,
.content.world-savaisTu .fact-emoji {
    font-size: 2em;
    display: block;
    text-align: center;
    margin-bottom: .5rem;
}
.content.world-savaistu .fact-category,
.content.world-savaisTu .fact-category {
    display: inline-block;
    background: var(--aw-accent);
    color: var(--aw-ink);
    border-radius: 999px;
    padding: .15rem .65rem;
    font-size: .8em;
    font-weight: 700;
    margin-top: .5rem;
}
.content.world-savaistu .fact-dot,
.content.world-savaisTu .fact-dot {
    width: 10px;
    height: 10px;
    background: #e5e7eb;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    cursor: pointer;
}
.content.world-savaistu .fact-dot.active,
.content.world-savaisTu .fact-dot.active {
    background: var(--aw-accent);
}

/* --- expression: idiom speech-bubble billboard --- */
.content.world-expression .expression-section { padding: 0; }
.content.world-expression .expression-card {
    background: #fff;
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: var(--aw-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--aw-shadow) var(--aw-ink);
    position: relative;
}
.content.world-expression .expression-card::after {
    content: '';
    position: absolute;
    left: 2rem;
    bottom: -16px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-right: var(--aw-border) solid var(--aw-ink);
    border-bottom: var(--aw-border) solid var(--aw-ink);
    transform: rotate(45deg);
}
.content.world-expression .expression-main {
    font-family: var(--aw-display);
    font-weight: 800;
    font-size: 1.4em;
    line-height: 1.3;
    color: var(--aw-ink);
}
.content.world-expression .expression-row {
    display: flex;
    gap: .65rem;
    align-items: baseline;
    margin-top: .5rem;
}
.content.world-expression .expression-label {
    flex-shrink: 0;
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.content.world-expression .expression-label.literal { background: #ddd6fe; color: #5b21b6; }
.content.world-expression .expression-label.meaning { background: #fde68a; color: #92400e; }
.content.world-expression .expression-label.example { background: #bbf7d0; color: #166534; }

/* --- virelangue: twisty type, motion --- */
.content.world-virelangue .virelangue-card {
    background: #fff;
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: var(--aw-radius);
    padding: 1.5rem 1.25rem;
    box-shadow: var(--aw-shadow) #7c3aed;
}
.content.world-virelangue .virelangue-text {
    font-family: var(--aw-display);
    font-weight: 800;
    font-size: 1.6em;
    line-height: 1.4;
    color: var(--aw-ink);
    text-align: center;
}
.content.world-virelangue .virelangue-text > * {
    display: inline-block;
}
.content.world-virelangue .speed-star { font-size: 1.4em; }
.content.world-virelangue .speed-star.dim { opacity: .25; }
.content.world-virelangue .speak-button,
.content.world-virelangue .level-btn {
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: 999px;
    font-weight: 700;
}
.content.world-virelangue .level-btn.active {
    background: var(--aw-accent);
    color: var(--aw-ink);
}

/* --- improvisation: theater curtain --- */
.content.world-improvisation .improv-section,
.content.world-improv .improv-section {
    background: linear-gradient(180deg, #1f2937 0 18%, transparent 18%);
    padding: 1rem;
    border-radius: var(--aw-radius);
}
.content.world-improvisation .improv-card,
.content.world-improv .improv-card {
    background: var(--aw-paper);
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: var(--aw-radius);
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: var(--aw-shadow) rgba(0,0,0,.18);
}
.content.world-improvisation .improv-emoji,
.content.world-improv .improv-emoji { font-size: 2.6em; }
.content.world-improvisation .improv-scenario,
.content.world-improv .improv-scenario {
    font-family: var(--aw-display);
    font-weight: 700;
    font-size: 1.2em;
    color: var(--aw-ink);
    margin: .5rem 0;
}
.content.world-improvisation .improv-prompt,
.content.world-improv .improv-prompt {
    color: #6b7280;
    font-style: italic;
}
.content.world-improvisation .improv-timer,
.content.world-improv .improv-timer {
    font-family: var(--aw-mono);
    font-size: 2em;
    font-weight: 700;
    color: #dc2626;
    margin: .5rem 0;
}
.content.world-improvisation .timer-btn,
.content.world-improv .timer-btn {
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: 999px;
    font-weight: 700;
    padding: .4rem 1rem;
}

/* --- jokeWorkshop: stand-up mic --- */
.content.world-jokeworkshop .joke-workshop-section,
.content.world-jokeWorkshop .joke-workshop-section { padding: 0; }
.content.world-jokeworkshop .template-tab,
.content.world-jokeWorkshop .template-tab {
    border-radius: 999px;
    border: var(--aw-border) solid var(--aw-ink);
    padding: .35rem .9rem;
    font-weight: 700;
    background: #fff;
}
.content.world-jokeworkshop .template-tab.active,
.content.world-jokeWorkshop .template-tab.active {
    background: var(--aw-accent);
    color: var(--aw-ink);
}
.content.world-jokeworkshop .template-content,
.content.world-jokeWorkshop .template-content {
    background: #1f2937;
    color: #fafafa;
    border-radius: var(--aw-radius);
    padding: 1rem 1.25rem;
    margin-top: .75rem;
}
.content.world-jokeworkshop .example-joke,
.content.world-jokeWorkshop .example-joke {
    background: rgba(255,255,255,.08);
    border-left: 3px solid #fbbf24;
    border-radius: 6px;
    padding: .65rem .85rem;
    margin: .55rem 0;
}
.content.world-jokeworkshop .example-setup,
.content.world-jokeWorkshop .example-setup { font-weight: 700; }
.content.world-jokeworkshop .example-punchline,
.content.world-jokeWorkshop .example-punchline { color: #fbbf24; font-style: italic; margin-top: .15rem; }
.content.world-jokeworkshop .example-wordplay,
.content.world-jokeWorkshop .example-wordplay { color: #d1d5db; font-size: .85em; margin-top: .25rem; }

/* --- quickChallenge: tilted bonus card with timer ring --- */
.content.world-quickchallenge .quick-challenge-section,
.content.world-quickChallenge .quick-challenge-section { padding: 0; }
.content.world-quickchallenge .challenge-card,
.content.world-quickChallenge .challenge-card {
    transform: rotate(-3deg);
    background: var(--aw-paper);
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: var(--aw-radius);
    padding: 1.5rem 1.25rem;
    margin: 1.25rem auto;
    max-width: 540px;
    text-align: center;
    box-shadow: var(--aw-shadow) rgba(220,38,38,.4);
}
.content.world-quickchallenge .challenge-emoji,
.content.world-quickChallenge .challenge-emoji { font-size: 2.4em; }
.content.world-quickchallenge .challenge-type,
.content.world-quickChallenge .challenge-type {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    border-radius: 999px;
    padding: .15rem .8rem;
    font-weight: 700;
    margin: .25rem 0;
}

/* --- comprehensionGate: door-unlock metaphor (works on any container) --- */
.content.world-comprehensiongate .gate-question,
.content.world-comprehensionGate .gate-question {
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: var(--aw-radius);
    padding: .75rem 1rem;
}

/* ===============================================================
   Phase 4: arcade games (tetris, attaque, verbRun, dailyGame, feud)
   Renderers are heavily inline-styled, so we only paint what has
   stable selectors (canvas, score counters, action chips). The
   inline styles still win where they want to.
   =============================================================== */

/* --- tetris: arcade cabinet feel for the canvas frame --- */
.content.world-tetris #tetrisCanvas {
    box-shadow: 0 0 0 4px var(--aw-ink), 0 0 30px rgba(91,141,239,.35);
}
.content.world-tetris #tetrisScore,
.content.world-tetris #tetrisCorrect,
.content.world-tetris #tetrisSeen {
    font-family: var(--aw-mono);
    color: var(--aw-accent);
    font-weight: 700;
}

/* --- attaque: same arcade chrome --- */
.content.world-attaque canvas {
    box-shadow: 0 0 0 4px var(--aw-ink), 0 0 30px rgba(236,72,153,.3);
}

/* --- verbRun: side-scroller chrome --- */
.content.world-verbrun canvas,
.content.world-verbRun canvas {
    box-shadow: 0 0 0 4px var(--aw-ink), 0 0 24px rgba(16,185,129,.3);
}

/* --- dailyGame: game-show banner via section-header --- */
.content.world-dailygame .section-header,
.content.world-dailyGame .section-header {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
}

/* --- feud: retro TV frame around the feud root --- */
.content.world-feud #feudActivityRoot {
    box-shadow: 0 0 0 6px var(--aw-ink), inset 0 0 0 4px rgba(255,255,255,.7);
    border-radius: calc(var(--aw-radius) * 1.2);
}
.content.world-feud #feudTimer {
    font-family: var(--aw-mono);
}

/* ===============================================================
   Phase 5: writing-process, sentenceBuilder, madlibs
   =============================================================== */

/* --- writingProcess: notebook accent on the four steps --- */
.content.world-writingprocess #wpSteps button,
.content.world-writingProcess #wpSteps button {
    transition: transform .12s, box-shadow .12s;
}
.content.world-writingprocess #wpSteps button:hover,
.content.world-writingProcess #wpSteps button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(0,0,0,.08);
}
.content.world-writingprocess #wpContent textarea,
.content.world-writingProcess #wpContent textarea {
    font-family: var(--aw-serif);
    line-height: 1.7;
}

/* --- sentenceBuilder: Lego-block chips --- */
.content.world-sentencebuilder .word-chip,
.content.world-sentenceBuilder .word-chip,
.content.world-sentencebuilder .sb-chip,
.content.world-sentenceBuilder .sb-chip {
    border: var(--aw-border) solid var(--aw-ink);
    border-radius: 10px;
    box-shadow: 0 3px 0 var(--aw-ink);
    padding: .35rem .65rem;
    font-weight: 700;
    cursor: grab;
    transition: transform .1s;
}
.content.world-sentencebuilder .word-chip:active,
.content.world-sentenceBuilder .word-chip:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--aw-ink);
}

/* --- madlibs: sticky-note blanks --- */
.content.world-madlibs .madlib-blank,
.content.world-madlibs .ml-blank {
    background: #fef9c3;
    border: var(--aw-border) dashed var(--aw-ink);
    border-radius: 6px;
    padding: 0 .35rem;
    transform: rotate(-1.5deg);
    display: inline-block;
    font-family: var(--aw-hand);
}