/* ═══ BADGES · STREAKS · CITY TOURS · CELEBRATIONS ═══ */
    #confetti-cv { position: fixed; inset: 0; z-index: 12000; pointer-events: none; }

    #mute-btn { background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 12px; width: 38px; height: 38px; font-size: 17px; cursor: pointer; box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.08)); flex: none; }
    #mute-btn:active { transform: scale(.92); }
    /* Read-aloud toggle — matches the mute button, and lights up when armed so a
       teacher can tell across the room whether a child has speech on. */
    #read-btn { background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 12px; width: 38px; height: 38px; font-size: 17px; cursor: pointer; box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.08)); flex: none; }
    #read-btn:active { transform: scale(.92); }
    body.read-aloud #read-btn { background: linear-gradient(135deg, #38BDF8, #0284c7); border-color: #0284c7; color: #fff; }

    /* ── Phase 4: audio-first pre-K layout ──
       Fewer words, bigger targets. Everything here is a size change only, so a
       class switching modes never loses access to a feature. */
    body.prek { font-size: 18px; }
    body.prek .edu-q-text { font-size: 26px; line-height: 1.35; }
    body.prek .edu-opt { font-size: 22px; padding: 20px 18px; min-height: 68px; }
    body.prek .talk-q { font-size: 20px; min-height: 64px; }
    body.prek .tab-btn, body.prek .ws-chip { font-size: 16px; }
    body.prek #read-btn, body.prek #mute-btn { width: 48px; height: 48px; font-size: 22px; }
    body.prek .reports-title, body.prek .work-balance-hero .wb-hint { font-size: 15px; }
    /* Speak buttons: the child's way back to a sentence they missed. */
    /* Teacher assignment strip above the quiz */
    .assign-banner { background: linear-gradient(135deg, rgba(70,214,126,.16), rgba(56,189,248,.12)); border: 1px solid var(--green, #46D67E); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
    .assign-banner .ab-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .assign-banner .ab-kicker { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
    .assign-banner .ab-count { font-family: var(--display); font-weight: 900; font-size: 15px; color: var(--green, #46D67E); }
    .assign-banner .ab-title { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink); margin: 2px 0 8px; }
    .assign-banner .ab-bar { height: 8px; border-radius: 99px; background: rgba(8,24,52,.35); overflow: hidden; }
    .assign-banner .ab-fill { height: 100%; border-radius: 99px; background: var(--green, #46D67E); transition: width .3s ease-out; }
    body.prek .assign-banner .ab-title { font-size: 20px; }

    /* Standards mastery grid — students down, topics across */
    .mast-scroll { overflow-x: auto; }
    .mast-grid { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
    .mast-grid th { font-weight: 700; color: var(--ink-muted); font-size: 11px; text-align: left; vertical-align: bottom; padding: 0 4px 4px; max-width: 86px; }
    .mast-grid th.mg-student { position: sticky; left: 0; background: var(--surface); z-index: 1; }
    .mast-grid td.mg-student { position: sticky; left: 0; background: var(--surface); font-weight: 800; white-space: nowrap; padding-right: 8px; z-index: 1; }
    .mast-cell { width: 46px; height: 30px; border-radius: 7px; text-align: center; font-weight: 800; color: #06210f; }
    .mast-cell.none { background: rgba(148,163,184,.22); color: var(--ink-muted); font-weight: 600; }
    .mast-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-muted); margin: 10px 0 0; }
    .mast-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; }

    /* Live class view */
    .live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
    .live-card { background: var(--surface-2, rgba(255,255,255,.06)); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
    .live-card.on { border-color: var(--green, #46D67E); }
    .live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 99px; background: #94a3b8; margin-right: 6px; vertical-align: 1px; }
    .live-card.on .live-dot { background: var(--green, #46D67E); }
    .live-name { font-family: var(--display); font-weight: 800; font-size: 15px; }
    .live-meta { font-size: 12px; color: var(--ink-muted); margin-top: 3px; line-height: 1.5; }

    .speak-btn { background: var(--surface-2, #eef4ff); border: 2px solid var(--border-strong, #cbd5e1); border-radius: 12px; padding: 6px 12px; font-size: 16px; cursor: pointer; line-height: 1; }
    .speak-btn:active { transform: scale(.94); }
    body.prek .speak-btn { padding: 12px 18px; font-size: 22px; }
    #streak-chip { font-family: var(--display); font-weight: 800; font-size: 13px; background: linear-gradient(135deg, #ff9f43, #ff6b35); color: #fff; border-radius: 12px; padding: 8px 10px; box-shadow: 0 3px 10px rgba(255,107,53,.35); animation: streakPulse 2.4s ease-in-out infinite; flex: none; }
    @keyframes streakPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

    /* Badge unlock toast */
    #badge-toast { position: fixed; top: -170px; left: 50%; transform: translateX(-50%); z-index: 12500; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #fef3c7, #fde68a); border: 3px solid #f59e0b; border-radius: 20px; padding: 14px 22px 14px 14px; box-shadow: 0 12px 40px rgba(245,158,11,.45); transition: top .55s var(--ease-spring); max-width: min(92vw, 420px); }
    #badge-toast.show { top: 18px; }
    #badge-toast .bt-icon { font-size: 42px; animation: btSpin .8s var(--ease-spring); }
    @keyframes btSpin { from { transform: scale(0) rotate(-180deg); } to { transform: scale(1) rotate(0); } }
    #badge-toast .bt-kicker { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #b45309; font-family: var(--display); }
    #badge-toast .bt-name { font-family: var(--display); font-weight: 900; font-size: 18px; color: #78350f; line-height: 1.1; }
    #badge-toast .bt-desc { font-size: 12px; color: #92400e; }

    /* Badges overlay */
    #badges-overlay .sheet { max-height: 86vh; display: flex; flex-direction: column; }
    #badges-body { overflow-y: auto; padding: 14px; }
    .bacc-title { font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--ink); margin: 2px 0 8px; }
    .bacc-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
    .bacc { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 24px; background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 8px 10px; cursor: pointer; min-width: 62px; transition: transform .15s; }
    .bacc span { font-size: 10px; font-weight: 800; color: var(--ink-muted); font-family: var(--display); }
    .bacc:not(:disabled):hover { transform: translateY(-2px); }
    .bacc.locked { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
    .bacc.equipped { border-color: #f59e0b; background: rgba(255,200,61,.15); box-shadow: 0 0 0 3px rgba(255,200,61,.2); }
    .badge-cat { font-family: var(--display); font-weight: 900; font-size: 13px; letter-spacing: .5px; color: var(--ink-muted); text-transform: uppercase; margin: 14px 0 8px; }
    .badge-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .badge-card { background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: 12px; text-align: center; position: relative; overflow: hidden; }
    .badge-card.earned { border-color: #f59e0b; background: linear-gradient(160deg, rgba(254,243,199,.9), rgba(253,230,138,.55)); box-shadow: 0 4px 14px rgba(245,158,11,.18); }
    .badge-card.earned .bc-icon { animation: bcFloat 3s ease-in-out infinite; }
    @keyframes bcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
    .badge-card.locked .bc-icon { filter: grayscale(1); opacity: .5; }
    .bc-icon { font-size: 34px; line-height: 1.2; }
    .bc-name { font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--ink); margin-top: 2px; }
    .badge-card.earned .bc-name { color: #78350f; }
    .bc-desc { font-size: 11px; color: var(--ink-muted); line-height: 1.35; margin-top: 2px; }
    .badge-card.earned .bc-desc { color: #92400e; }
    .bc-acc { display: block; font-weight: 700; color: #b45309; }
    .bc-date { font-size: 11px; font-weight: 800; color: #b45309; margin-top: 6px; }
    .bc-prog { height: 7px; background: var(--border); border-radius: 4px; margin-top: 8px; overflow: hidden; }
    .bc-prog-fill { height: 100%; background: linear-gradient(90deg, #38bdf8, #2563eb); border-radius: 4px; transition: width .4s; }
    .bc-prog-lab { font-size: 10px; font-weight: 800; color: var(--ink-muted); margin-top: 3px; }
    .badge-card.mini { padding: 8px; }
    .badge-card.mini .bc-icon { font-size: 26px; }
    .badge-card.mini .bc-name { font-size: 11px; }

    /* Player card (classmate badges) */
    #pc-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 14px; max-height: 46vh; overflow-y: auto; }

    /* Daily streak popup */
    #streak-overlay { position: fixed; inset: 0; z-index: 11500; display: none; align-items: center; justify-content: center; background: rgba(10,15,30,.55); backdrop-filter: blur(4px); }
    #streak-overlay.open { display: flex; }
    #streak-card { background: linear-gradient(160deg, #fff7ed, #ffedd5); border: 3px solid #fb923c; border-radius: 24px; padding: 28px 34px; text-align: center; max-width: 320px; animation: streakIn .5s var(--ease-spring); box-shadow: 0 20px 60px rgba(251,146,60,.4); }
    @keyframes streakIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    #streak-flame { font-size: 64px; animation: flameWob 1.2s ease-in-out infinite; }
    @keyframes flameWob { 0%, 100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.1); } }
    #streak-num-wrap { font-family: var(--display); font-weight: 900; font-size: 28px; color: #c2410c; }
    #streak-msg { font-size: 14px; color: #9a3412; margin: 6px 0 4px; }
    #streak-bonus { font-family: var(--display); font-weight: 900; font-size: 20px; color: #16a34a; margin-bottom: 14px; }

    /* City tour */
    #tour-overlay { position: fixed; inset: 0; z-index: 11000; display: none; background: #0b1c33; overflow: hidden; }
    #tour-overlay.show { display: block; }
    #tour-scene { position: absolute; inset: 0; }
    .tour-sky { position: absolute; inset: 0; transition: background 1s; }
    .tour-sun { position: absolute; top: 8%; right: 12%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #fff7cc 0%, #ffdf6b 45%, rgba(255,223,107,0) 72%); animation: sunGlow 4s ease-in-out infinite; }
    @keyframes sunGlow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
    .tour-clouds i { position: absolute; background: rgba(255,255,255,.85); border-radius: 60px; box-shadow: 22px -8px 0 6px rgba(255,255,255,.75), -20px -4px 0 4px rgba(255,255,255,.7); }
    .tour-clouds i:nth-child(1) { width: 90px; height: 26px; top: 14%; animation: cloudDrift 34s linear infinite; }
    .tour-clouds i:nth-child(2) { width: 60px; height: 18px; top: 26%; animation: cloudDrift 26s linear infinite; animation-delay: -12s; }
    .tour-clouds i:nth-child(3) { width: 110px; height: 30px; top: 8%; animation: cloudDrift 44s linear infinite; animation-delay: -25s; }
    .tour-clouds i:nth-child(4) { width: 70px; height: 20px; top: 34%; animation: cloudDrift 30s linear infinite; animation-delay: -6s; }
    @keyframes cloudDrift { from { left: -140px; } to { left: 110%; } }
    #tour-svg { position: absolute; left: 0; right: 0; top: 0; bottom: 17vh; z-index: 2; }
    #tour-svg svg { width: 100%; height: 100%; display: block; }
    .tour-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 17vh; background: linear-gradient(180deg, #24355c, #101a30); }
    #tour-pet { position: absolute; left: 5%; bottom: 17.5vh; font-size: clamp(44px, 9vw, 64px); z-index: 3; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); animation: petHop 2.2s ease-in-out infinite; }
    @keyframes petHop { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
    .tour-plane { position: absolute; top: 18%; left: -80px; font-size: 40px; z-index: 4; opacity: 0; }
    #tour-scene.enter .tour-plane { animation: planeCross 2.2s ease-in-out .1s 1; }
    @keyframes planeCross { 0% { left: -80px; opacity: 0; transform: rotate(8deg); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 110%; opacity: 0; transform: rotate(-4deg); } }
    #tour-scene.enter #tour-svg { animation: silRise .9s cubic-bezier(.22,1,.36,1); }
    @keyframes silRise { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    #tour-scene.enter #tour-pet { animation: emojiPop .7s var(--ease-spring), petHop 2.2s ease-in-out .7s infinite; }
    @keyframes emojiPop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
    /* gentle animations used inside landmark SVG scenes */
    @keyframes lmFlagWave { 0%,100% { transform: skewY(0deg); } 50% { transform: skewY(-6deg); } }
    @keyframes lmBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    @keyframes lmShimmer { 0%,100% { opacity: .35; } 50% { opacity: .75; } }
    @keyframes lmSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes lmTwinkle { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
    @keyframes lmSway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
    .lm-flag { animation: lmFlagWave 2.6s ease-in-out infinite; transform-origin: left center; transform-box: fill-box; }
    .lm-bob { animation: lmBob 3.2s ease-in-out infinite; }
    .lm-shimmer { animation: lmShimmer 3s ease-in-out infinite; }
    .lm-spin { animation: lmSpin 26s linear infinite; transform-origin: center; transform-box: fill-box; }
    .lm-twinkle { animation: lmTwinkle 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
    .lm-sway { animation: lmSway 3.4s ease-in-out infinite; transform-origin: bottom center; transform-box: fill-box; }
    #tour-ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 18px; pointer-events: none; z-index: 5; }
    #tour-dots { display: flex; gap: 7px; margin-bottom: 10px; }
    #tour-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .3s, transform .3s; }
    #tour-dots i.on { background: #ffd34d; transform: scale(1.25); }
    #tour-card, #tour-quiz { pointer-events: auto; width: min(480px, 94vw); background: rgba(255,255,255,.96); border-radius: 22px; padding: 18px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.35); animation: cardUp .6s cubic-bezier(.22,1,.36,1); margin-bottom: 6px; }
    @keyframes cardUp { from { transform: translateY(70px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    #tour-card-kicker { font-size: 11px; font-weight: 800; letter-spacing: .8px; color: #2563eb; font-family: var(--display); text-transform: uppercase; }
    #tour-card-title { font-family: var(--display); font-weight: 900; font-size: 22px; color: #0f172a; margin: 2px 0 6px; }
    #tour-card-fact { font-size: 14px; line-height: 1.55; color: #334155; margin-bottom: 14px; }
    .tour-card-head { display: flex; align-items: flex-start; gap: 8px; }
    .tour-card-head > div:first-child { flex: 1; min-width: 0; }
    .say-btn { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; font-size: 22px; background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; box-shadow: 0 5px 14px rgba(249,115,22,.4); transition: transform .15s; }
    .say-btn:active { transform: scale(.9); }
    .say-btn.talking { animation: sayPulse 1s ease-in-out infinite; }
    @keyframes sayPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
    .tour-btn { font-family: var(--display); font-weight: 800; font-size: 15px; border: none; border-radius: 14px; padding: 12px 18px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(37,99,235,.35); transition: transform .15s; width: 100%; }
    .tour-btn:active { transform: scale(.96); }
    #tq-q { font-family: var(--display); font-weight: 800; font-size: 17px; color: #0f172a; margin-bottom: 12px; }
    #tq-opts { display: flex; flex-direction: column; gap: 8px; }
    .tq-opt { background: #f1f5f9; color: #0f172a; box-shadow: none; border: 2px solid #e2e8f0; }
    .tq-opt.right { background: #dcfce7; border-color: #22c55e; color: #14532d; }
    .tq-opt.wrong { background: #fee2e2; border-color: #ef4444; color: #7f1d1d; }
    #tq-fb { font-family: var(--display); font-weight: 800; font-size: 14px; text-align: center; margin-top: 10px; min-height: 20px; color: #334155; }
    #tour-skip { position: absolute; top: 16px; right: 16px; z-index: 6; background: rgba(15,23,42,.6); color: #fff; border: none; border-radius: 20px; padding: 8px 14px; font-weight: 800; font-family: var(--display); font-size: 12px; cursor: pointer; }

    /* ── FLIGHT DEPARTURE BOARD (kid-friendly airport picker) ── */
    #flights-list { display: flex; flex-direction: column; gap: 10px; }
    .fboard-section { font-family: var(--display); font-weight: 900; font-size: 15px; color: var(--ink); margin: 8px 2px 0; display: flex; align-items: center; gap: 6px; }
    .fboard-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 2px solid rgba(37,99,235,.18); border-radius: 18px; padding: 12px 14px; cursor: pointer; background: linear-gradient(135deg, #ffffff, #eef6ff); box-shadow: 0 4px 12px rgba(15,23,42,.08); transition: transform .15s, box-shadow .15s; font-family: inherit; }
    .fboard-row:not(:disabled):active { transform: scale(.97); }
    .fboard-row:disabled { opacity: .55; cursor: not-allowed; }
    .fb-flag { flex: 0 0 auto; font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
    .fb-main { flex: 1; min-width: 0; }
    .fb-city { font-family: var(--display); font-weight: 900; font-size: 17px; color: #0f172a; display: flex; align-items: baseline; gap: 6px; }
    .fb-code { font-size: 11px; font-weight: 800; color: #2563eb; background: rgba(37,99,235,.1); border-radius: 8px; padding: 1px 7px; }
    .fb-sights { font-size: 13px; color: #475569; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fb-teaser { font-size: 11.5px; color: #64748b; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fb-price { flex: 0 0 auto; font-family: var(--display); font-weight: 900; font-size: 15px; color: #16a34a; background: rgba(22,163,74,.1); border-radius: 12px; padding: 8px 10px; text-align: center; }
    .fb-price.fb-cant { color: #94a3b8; background: rgba(148,163,184,.12); }