/* ============================================================= teen-theme.css — Florentis "Skill Arena" Layered background system + full dark-mode UI Mode classes (set by fl-previews.js): .fl-arena-smart-start — calm blue focus .fl-arena-challenge — warm orange intensity Brand palette: #172830 deep navy #27537a brand blue #596c10 olive #c7c79d sage (secondary text) #f4d488 gold (XP) #f1e5da cream (primary text) WCAG AA contrast on --t-surface (#1a2a33): #6ba3cb 5.1:1 ✓ #a8c05a 4.6:1 ✓ #f4d488 8.2:1 ✓ #f1e5da 12.4:1 ✓ #c7c79d 5.8:1 ✓ #e07070 4.7:1 ✓ ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=DM+Mono:wght@400;500&display=swap'); /* ══════════════════════════════════════════════════════════════ DESIGN TOKENS ══════════════════════════════════════════════════════════════ */ .fl-teen-mode { /* Surfaces */ --t-bg: #111c22; --t-surface: #1a2a33; --t-surface-2: #223040; --t-border: rgba(255,255,255,0.09); /* neutral — was blue, pre-revealed answers */ --t-border-hi: rgba(255,255,255,0.20); /* neutral hi */ /* Text — all WCAG AA on --t-surface */ --t-text: #f1e5da; /* 12.4:1 */ --t-text-2: #c7c79d; /* 5.8:1 */ --t-text-3: rgba(199,199,157,0.5); /* Brand colours */ --t-blue: #27537a; --t-blue-lt: #6ba3cb; /* 5.1:1 — labels, kickers */ --t-blue-glow: rgba(39,83,122,0.22); --t-gold: #f4d488; /* 8.2:1 — XP, highlights */ --t-gold-glow: rgba(244,212,136,0.14); --t-olive: #596c10; --t-olive-lt: #a8c05a; /* 4.6:1 — correct state */ --t-olive-glow: rgba(89,108,16,0.2); --t-red: #c0392b; --t-red-lt: #e07070; /* 4.7:1 — error state */ --t-red-glow: rgba(192,57,43,0.15); /* ── ARENA BACKGROUND SYSTEM — mode variables ───────────── */ --arena-base-top: #0f1a22; --arena-base-bottom: #172830; --arena-glow-color: rgba(39,83,122,0.14); /* SS = blue */ --arena-glow-color2: rgba(89,108,16,0.06); /* SS = olive corner */ --arena-grid-color: rgba(39,83,122,0.035); --arena-vignette: rgba(0,0,0,0.5); --arena-glow-anim: pulseGlowBlue; /* Structure */ --t-r: 14px; --t-r-sm: 8px; --t-r-lg: 20px; --t-font: 'DM Sans', system-ui, sans-serif; --t-mono: 'DM Mono', 'Courier New', monospace; --t-ease: cubic-bezier(0.4,0,0.2,1); --t-sh: 0 4px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.2); --t-sh-card: 0 0 0 1px var(--t-border), 0 8px 32px rgba(0,0,0,0.35); } /* ── Challenge mode — warm orange shift ──────────────────────────────────── */ .fl-teen-mode.fl-arena-challenge { --arena-base-top: #0f1a1a; --arena-base-bottom: #1a2418; --arena-glow-color: rgba(249,115,22,0.13); /* warm orange */ --arena-glow-color2: rgba(244,212,136,0.06); --arena-grid-color: rgba(249,115,22,0.025); --arena-glow-anim: pulseGlowOrange; } /* ══════════════════════════════════════════════════════════════ LAYER 1 — BASE GRADIENT ══════════════════════════════════════════════════════════════ */ .fl-teen-mode.fl-preview-root { font-family: var(--t-font) !important; background: linear-gradient(180deg, var(--arena-base-top) 0%, var(--arena-base-bottom) 100%) !important; border-radius: 20px !important; border: 1px solid var(--t-border) !important; overflow: hidden !important; position: relative !important; } /* Kill kids skin backgrounds */ .fl-teen-mode .fl-placement-scene, .fl-teen-mode [data-scene], .fl-teen-mode.fl-skin-space, .fl-teen-mode.fl-skin-forest, .fl-teen-mode.fl-skin-magic { background: none !important; background-image: none !important; } /* ========================================================== TEEN BACKGROUND ========================================================== */ /* cover BOTH possibilities: 1) root has both classes on same element 2) teen mode wraps root */ .fl-teen-mode.fl-preview-root, .fl-teen-mode .fl-preview-root{ position: relative; overflow: hidden; /* background-image set via wp_add_inline_style in florentis-previews.php using an absolute plugins_url() path — do not set relative URL here */ background-size: cover; background-position: center; background-repeat: no-repeat; } /* ══════════════════════════════════════════════════════════════ LAYER 2 — RADIAL PERFORMANCE GLOW (pseudo-element ::before) Slow animated pulse — 10s, barely visible ══════════════════════════════════════════════════════════════ */ .fl-teen-mode.fl-preview-root::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 40%, var(--arena-glow-color) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 85% 85%, var(--arena-glow-color2) 0%, transparent 60%); animation: var(--arena-glow-anim) 10s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes pulseGlowBlue { 0%,100% { opacity: 0.85; } 50% { opacity: 1.15; } } @keyframes pulseGlowOrange { 0%,100% { opacity: 0.8; } 50% { opacity: 1.2; } } /* ══════════════════════════════════════════════════════════════ LAYER 3 — SUBTLE DIGITAL GRID (pseudo-element ::after) ══════════════════════════════════════════════════════════════ */ /* LAYER 3 — grid + subtle diagonal streaks */ .fl-teen-mode.fl-preview-root::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: /* subtle diagonal streaks */ repeating-linear-gradient( 135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 120px ), /* your existing grid */ linear-gradient(var(--arena-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--arena-grid-color) 1px, transparent 1px); /* separate sizing per layer */ background-size: 100% 100%, 48px 48px, 48px 48px; /* optional: soften */ opacity: 0.9; filter: blur(0.2px); } /* ══════════════════════════════════════════════════════════════ LAYER 4 — VIGNETTE EDGE (inset box-shadow on root) Makes UI feel "spotlit" ══════════════════════════════════════════════════════════════ */ /* Applied via box-shadow on root — no extra element needed */ .fl-teen-mode.fl-preview-root{ box-shadow: inset 0 0 180px var(--arena-vignette), inset 0 -60px 80px rgba(0,0,0,0.2) !important; } .fl-teen-mode.fl-arena-challenge{ --arena-vignette: rgba(0,0,0,0.58); } /* ══════════════════════════════════════════════════════════════ LAYER 5 — GRAIN TEXTURE (SVG noise data-URI overlay) mix-blend-mode: overlay at 0.03 opacity ══════════════════════════════════════════════════════════════ */ .fl-teen-mode.fl-preview-root .fl-placement-window { position: relative; z-index: 1; } /* Grain pseudo on placement-window — sits above bg layers */ .fl-teen-mode .fl-placement-window::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.028; mix-blend-mode: overlay; pointer-events: none; z-index: 0; border-radius: inherit; } /* All UI content sits above all background layers */ .fl-teen-mode .fl-placement-window, .fl-teen-mode .fl-placement-footer, .fl-teen-mode .fl-kids-question { position: relative; z-index: 1; } /* overlays must stay overlays */ .fl-teen-mode .fl-overlay, .fl-teen-mode .fl-victory-overlay { z-index: 99999; } /* ══════════════════════════════════════════════════════════════ FOOTER — gradient bar (brand blue → darkest navy) Replaces the hard-edged dark bar with a smooth fade up ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-placement-footer { background: linear-gradient( 180deg, rgba(26,42,51,0.92) 0%, rgba(15,26,34,0.99) 100% ) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-top: 1px solid rgba(39,83,122,0.2) !important; position: relative; z-index: 2; } /* Logo — use brand colours instead of flat white invert */ .fl-teen-mode .fl-footer-logo { /* Tint to brand blue-teal range rather than pure white */ filter: brightness(0) saturate(100%) invert(85%) sepia(15%) saturate(300%) hue-rotate(175deg) brightness(1.1) !important; opacity: 0.9 !important; height: 26px !important; } /* Font override (belt-and-suspenders) */ .fl-teen-mode, .fl-teen-mode * { font-family: var(--t-font) !important; } /* ══════════════════════════════════════════════════════════════ SLIDE ENTER ANIMATION ══════════════════════════════════════════════════════════════ */ .fl-teen-mode [data-question-container] > * { animation: fl-t-in 0.28s var(--t-ease) both; } @keyframes fl-t-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════════ PROGRESS BAR + SLIDE COUNTER ══════════════════════════════════════════════════════════════ */ /* Progress track/fill — definitive styles are at the bottom of this file */ .fl-teen-mode .fl-slide-counter { font-family: var(--t-mono) !important; font-size: 11px !important; font-weight: 600 !important; color: var(--t-text-2) !important; letter-spacing: 0.04em !important; opacity: 1 !important; background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: 6px !important; padding: 3px 8px !important; } /* ══════════════════════════════════════════════════════════════ NAV BUTTONS ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-nav-btn { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-sm) !important; font-size: 13px !important; font-weight: 600 !important; padding: 8px 16px !important; transition: background 0.15s var(--t-ease), border-color 0.15s var(--t-ease), transform 0.1s !important; } .fl-teen-mode .fl-nav-btn:hover { background: var(--t-surface-2) !important; border-color: var(--t-border-hi) !important; } .fl-teen-mode .fl-nav-btn:active { transform: scale(0.97) !important; } .fl-teen-mode .fl-nav-btn[data-kids-next] { background: var(--t-blue) !important; border-color: var(--t-blue) !important; color: #fff !important; box-shadow: 0 0 12px var(--t-blue-glow) !important; } .fl-teen-mode .fl-nav-btn[data-kids-next]:hover { background: var(--t-blue-lt) !important; border-color: var(--t-blue-lt) !important; } .fl-teen-mode .fl-nav-btn[data-fl-path] { background: rgba(244,212,136,0.1) !important; border-color: rgba(244,212,136,0.3) !important; color: var(--t-gold) !important; } .fl-teen-mode .fl-nav-btn[data-fl-path]:hover { background: rgba(244,212,136,0.18) !important; } /* ══════════════════════════════════════════════════════════════ HUD ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-hud { gap: 8px !important; align-items: center !important; } .fl-teen-mode .fl-hud-item { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-sm) !important; padding: 5px 10px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--t-text) !important; display: flex !important; align-items: center !important; gap: 5px !important; min-width: 50px !important; } .fl-teen-mode .fl-hud-item:first-child { border-color: rgba(244,212,136,0.3) !important; box-shadow: 0 0 8px var(--t-gold-glow) !important; } .fl-teen-mode .fl-hud-item:nth-child(2) { border-color: rgba(212,135,10,0.3) !important; } .fl-teen-mode .fl-hud-value { font-family: var(--t-mono) !important; } .fl-app-btn{ white-space: nowrap; } @media (max-width: 520px){ .fl-app-btn{ padding: 10px 10px; font-size: 12px; } } /* ── User name / global XP pill ─────────────────────────────────────────── */ .fl-teen-mode .fl-teen-user-pill { display: flex !important; align-items: center !important; gap: 6px !important; background: var(--t-surface) !important; border: 1px solid rgba(39,83,122,0.35) !important; border-radius: var(--t-r-sm) !important; padding: 4px 10px !important; cursor: pointer !important; transition: background 0.15s, border-color 0.15s !important; order: -1; /* sits before XP/streak pills */ } .fl-teen-mode .fl-teen-user-pill:hover { background: var(--t-surface-2) !important; border-color: var(--t-border-hi) !important; } .fl-teen-mode .fl-teen-user-name { color: var(--t-text) !important; font-size: 12px !important; font-weight: 600 !important; } .fl-teen-mode .fl-teen-user-xp { color: var(--t-gold) !important; font-size: 11px !important; font-weight: 700 !important; font-family: var(--t-mono) !important; } /* ── Name prompt overlay ─────────────────────────────────────────────────── */ .fl-teen-mode .fl-name-prompt { position: absolute !important; inset: 0 !important; z-index: 9999 !important; background: rgba(9,15,22,0.82) !important; backdrop-filter: blur(16px) !important; display: flex !important; align-items: center !important; justify-content: center !important; animation: fl-t-in 0.3s var(--t-ease) both; } .fl-teen-mode .fl-name-card { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-lg) !important; box-shadow: var(--t-sh), 0 0 40px rgba(39,83,122,0.15) !important; padding: 32px 28px !important; max-width: 360px !important; width: 90% !important; text-align: center !important; } .fl-teen-mode .fl-name-title { font-size: 22px !important; font-weight: 800 !important; color: var(--t-text) !important; letter-spacing: -0.02em !important; margin: 6px 0 8px !important; } .fl-teen-mode .fl-name-sub { color: var(--t-text-2) !important; font-size: 13px !important; margin-bottom: 20px !important; } .fl-teen-mode .fl-name-input { width: 100% !important; background: var(--t-surface-2) !important; border: 1px solid var(--t-border-hi) !important; border-radius: var(--t-r-sm) !important; color: var(--t-text) !important; font-size: 16px !important; font-weight: 600 !important; padding: 12px 14px !important; box-sizing: border-box !important; margin-bottom: 12px !important; outline: none !important; transition: border-color 0.15s !important; } .fl-teen-mode .fl-name-input:focus { border-color: var(--t-blue-lt) !important; box-shadow: 0 0 0 3px var(--t-blue-glow) !important; } .fl-teen-mode .fl-name-input::placeholder { color: var(--t-text-3) !important; } .fl-teen-mode .fl-name-btn { width: 100% !important; background: var(--t-blue) !important; border: none !important; border-radius: var(--t-r-sm) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; padding: 12px !important; cursor: pointer !important; box-shadow: 0 0 16px var(--t-blue-glow) !important; transition: background 0.15s !important; } .fl-teen-mode .fl-name-btn:hover { background: var(--t-blue-lt) !important; } /* Hide kids-only chrome */ .fl-teen-mode .fl-preview-avatar, .fl-teen-mode .fl-preview-change-avatar, .fl-teen-mode .fl-avatar-picker, .fl-teen-mode .fl-reward-layer { display: none !important; } /* ══════════════════════════════════════════════════════════════ CARDS ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-teen-card { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-lg) !important; box-shadow: var(--t-sh-card) !important; color: var(--t-text) !important; padding: 26px !important; max-width: 820px !important; } /* ══════════════════════════════════════════════════════════════ TYPOGRAPHY ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-teen-kicker { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--t-blue-lt) !important; opacity: 1 !important; } .fl-teen-mode .fl-teen-title { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: var(--t-text) !important; margin-top: 4px !important; } .fl-teen-mode .fl-teen-text { font-size: 15px !important; line-height: 1.65 !important; color: var(--t-text-2) !important; } .fl-teen-mode .fl-teen-bullets { list-style: none !important; padding: 0 !important; margin: 14px 0 !important; } .fl-teen-mode .fl-teen-bullets li { padding: 8px 0 !important; color: var(--t-text-2) !important; font-size: 14px !important; border-bottom: 1px solid var(--t-border) !important; display: flex !important; align-items: center !important; gap: 8px !important; } .fl-teen-mode .fl-teen-bullets li::before { content:'→'; color:var(--t-gold); font-weight:700; font-size:12px; flex-shrink:0; } .fl-teen-mode .fl-teen-bullets li:last-child { border-bottom: none !important; } /* ══════════════════════════════════════════════════════════════ DIALOGUE — two-column layout on ≥640px, stacked on mobile ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-teen-dialogue-layout { display: flex !important; flex-direction: column !important; gap: 16px !important; margin-top: 12px !important; } @media (min-width: 640px) { .fl-teen-mode .fl-teen-dialogue-layout { flex-direction: row !important; align-items: flex-start !important; gap: 20px !important; } .fl-teen-mode .fl-teen-dialogue-layout .fl-teen-dialogue { flex: 1 1 50% !important; max-height: none !important; } .fl-teen-mode .fl-teen-dialogue-layout .fl-teen-mcq-panel { flex: 1 1 50% !important; } } .fl-teen-mode .fl-teen-dialogue { border-left: 2px solid var(--t-blue) !important; padding-left: 14px !important; margin: 0 !important; max-height: 240px !important; overflow-y: auto !important; } .fl-teen-mode .fl-teen-turn { margin-bottom: 8px !important; padding: 10px 12px !important; background: var(--t-surface-2) !important; border-radius: var(--t-r-sm) !important; border: 1px solid var(--t-border) !important; } /* #6ba3cb on #223040 = 5.1:1 WCAG AA ✓ */ .fl-teen-mode .fl-teen-speaker { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--t-blue-lt) !important; display: block !important; margin-bottom: 3px !important; } .fl-teen-mode .fl-teen-line { font-size: 14px !important; color: var(--t-text) !important; line-height: 1.55 !important; } /* ══════════════════════════════════════════════════════════════ MCQ OPTIONS ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-teen-opt { background: var(--t-surface-2) !important; border: 1px solid rgba(255,255,255,0.09) !important; color: var(--t-text) !important; border-radius: var(--t-r-sm) !important; font-size: 14px !important; font-weight: 500 !important; padding: 13px 14px 13px 12px !important; margin: 6px 0 !important; text-align: left !important; width: 100% !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 10px !important; transition: background 0.14s var(--t-ease), border-color 0.14s var(--t-ease), transform 0.1s !important; } .fl-teen-mode .fl-teen-opt::before { content: attr(data-opt-letter); display: inline-flex; align-items: center; justify-content: center; width: 22px; min-width: 22px; height: 22px; background: var(--t-surface); border: 1px solid rgba(255,255,255,0.18); border-radius: 5px; font-size: 10px; font-weight: 800; font-family: var(--t-mono); color: var(--t-text-2); flex-shrink: 0; transition: border-color 0.14s, color 0.14s; } .fl-teen-mode .fl-teen-opt:hover:not(:disabled) { background: rgba(39,83,122,0.14) !important; border-color: var(--t-blue-lt) !important; transform: translateX(4px) !important; } .fl-teen-mode .fl-teen-opt:hover:not(:disabled)::before { border-color: var(--t-blue-lt); color: var(--t-text); } .fl-teen-mode .fl-teen-opt.is-correct { background: var(--t-olive-glow) !important; border-color: var(--t-olive) !important; color: var(--t-olive-lt) !important; box-shadow: 0 0 10px var(--t-olive-glow) !important; } .fl-teen-mode .fl-teen-opt.is-wrong { background: var(--t-red-glow) !important; border-color: var(--t-red) !important; color: var(--t-red-lt) !important; animation: fl-t-shake 0.35s var(--t-ease) !important; } @keyframes fl-t-shake { 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-5px); } 40%{ transform:translateX(4px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(2px); } } .fl-teen-mode .fl-teen-good { color: var(--t-olive-lt) !important; font-weight:700 !important; } .fl-teen-mode .fl-teen-bad { color: var(--t-red-lt) !important; font-weight:700 !important; } .fl-teen-mode .fl-teen-feedback { font-size:13px !important; font-weight:600 !important; margin-top:8px !important; min-height:18px !important; color: var(--t-text-2) !important; } /* ══════════════════════════════════════════════════════════════ GAP FILL — shuffled options, right-aligned actions ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-gap-sentence { color: var(--t-text) !important; font-size: 16px !important; line-height: 2 !important; } .fl-teen-mode .fl-gap-blank { background: var(--t-surface-2) !important; border: 1.5px dashed rgba(39,83,122,0.45) !important; color: var(--t-text) !important; border-radius: var(--t-r-sm) !important; padding: 3px 12px !important; transition: border-color 0.14s, background 0.14s !important; } .fl-teen-mode .fl-gap-blank.is-active { border-color: var(--t-blue-lt) !important; background: var(--t-blue-glow) !important; border-style: solid !important; } .fl-teen-mode .fl-gap-blank.is-correct { border-color: var(--t-olive) !important; background: var(--t-olive-glow) !important; color: var(--t-olive-lt) !important; border-style: solid !important; } .fl-teen-mode .fl-gap-blank.is-wrong { border-color: var(--t-red) !important; background: var(--t-red-glow) !important; border-style: solid !important; } .fl-teen-mode .fl-gap-opt { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; color: var(--t-text) !important; border-radius: 6px !important; font-size: 13px !important; padding: 6px 12px !important; transition: all 0.14s !important; } .fl-teen-mode .fl-gap-opt:hover { border-color: var(--t-blue) !important; background: var(--t-blue-glow) !important; transform: translateY(-2px) !important; } .fl-teen-mode .fl-gap-options-title { color: var(--t-text-3) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; } /* Right-aligned check/reset */ .fl-teen-mode .fl-gap-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 12px !important; flex-wrap: wrap !important; } .fl-teen-mode .fl-gap-action-btns { display: flex !important; gap: 8px !important; margin-left: auto !important; } .fl-teen-mode .fl-gap-feedback { color: var(--t-text-2) !important; font-size: 13px !important; flex: 1 !important; } .fl-teen-mode .fl-gap-feedback.is-ok { color: var(--t-olive-lt) !important; } .fl-teen-mode .fl-gap-feedback.is-bad { color: var(--t-red-lt) !important; } .fl-teen-mode .fl-gap-feedback.is-warn { color: var(--t-gold) !important; } .fl-teen-mode .fl-teen-btn, .fl-teen-mode button.fl-teen-btn { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; color: var(--t-text) !important; border-radius: var(--t-r-sm) !important; font-size: 13px !important; font-weight: 600 !important; padding: 9px 16px !important; cursor: pointer !important; transition: all 0.14s !important; } .fl-teen-mode .fl-teen-btn:hover { background: var(--t-surface) !important; border-color: var(--t-border-hi) !important; } /* Stretch prompt */ .fl-teen-mode .fl-teen-stretch { margin-top: 20px !important; padding-top: 16px !important; border-top: 1px solid var(--t-border) !important; } .fl-teen-mode .fl-teen-stretch-title { font-size: 14px !important; font-weight: 700 !important; color: var(--t-blue-lt) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 4px !important; } /* ══════════════════════════════════════════════════════════════ OUTPUT / GET READY SCREEN Accessible text + reflect padding ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-teen-output-block { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r) !important; padding: 16px !important; } /* Override light background from teen-slides.css */ .fl-teen-mode .fl-teen-output-grid .fl-teen-output-block { background: var(--t-surface-2) !important; border-color: var(--t-border) !important; } .fl-teen-mode .fl-teen-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; margin-bottom: 8px !important; } /* Speaking = blue, Writing = gold — both WCAG AA ✓ */ .fl-teen-mode .fl-teen-label-speaking { color: var(--t-blue-lt) !important; } .fl-teen-mode .fl-teen-label-writing { color: var(--t-gold) !important; } /* Output text — override the gold/sage that was too low contrast */ .fl-teen-mode .fl-teen-output-text { color: var(--t-text) !important; font-size: 14px !important; line-height: 1.6 !important; } /* Reflect section — padding above "Which word" */ .fl-teen-mode .fl-teen-reflect-padded { margin-top: 24px !important; padding-top: 18px !important; border-top: 1px solid var(--t-border) !important; } .fl-teen-mode .fl-teen-stem { color: var(--t-text) !important; font-size: 15px !important; font-weight: 600 !important; margin-bottom: 10px !important; } /* Chips */ .fl-teen-mode .fl-teen-chip { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; color: var(--t-text-2) !important; border-radius: 6px !important; font-size: 13px !important; transition: all 0.14s !important; } .fl-teen-mode .fl-teen-chip.is-selected { border-color: var(--t-gold) !important; background: var(--t-gold-glow) !important; color: var(--t-gold) !important; } .fl-teen-mode .fl-teen-chip-msg { color: var(--t-text-2) !important; font-size: 12px !important; margin-top: 8px !important; } /* ══════════════════════════════════════════════════════════════ CHALLENGE MODE ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-ch-topbar { border-bottom: 1px solid var(--t-border) !important; padding-bottom: 14px !important; margin-bottom: 18px !important; opacity: 1 !important; } .fl-teen-mode .fl-ch-timer { font-family: var(--t-mono) !important; font-size: 14px !important; font-weight: 700 !important; color: var(--t-text-2) !important; background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; border-radius: 6px !important; padding: 4px 10px !important; transition: color 0.3s, background 0.3s, border-color 0.3s !important; } .fl-teen-mode .fl-ch-timer.is-low { color: var(--t-red-lt) !important; border-color: rgba(192,57,43,0.45) !important; background: var(--t-red-glow) !important; animation: fl-t-pulse 1s ease-in-out infinite !important; } @keyframes fl-t-pulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} } .fl-teen-mode .fl-ch-progress { font-family: var(--t-mono) !important; font-size: 11px !important; font-weight: 700 !important; color: var(--t-text-3) !important; } .fl-teen-mode .fl-ch-xp { font-family: var(--t-mono) !important; font-size: 13px !important; font-weight: 700 !important; color: var(--t-gold) !important; } /* Lead-in — gold, uppercase (CSS), smaller */ .fl-teen-mode .fl-ch-lead-in { font-size: 12px !important; font-weight: 600 !important; color: var(--t-text-2) !important; /* NOT uppercase — language learning context */ letter-spacing: 0.01em !important; margin-bottom: 8px !important; /* Override any text-transform that may have been set */ text-transform: none !important; } /* Stem — readable size, normal case */ .fl-teen-mode .fl-ch-stem { color: var(--t-text) !important; font-size: 20px !important; /* Increased from 18px */ font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.4 !important; text-transform: none !important; /* Never uppercase — ESL context */ } .fl-teen-mode .fl-ch-opt.is-correct { box-shadow: 0 0 12px var(--t-olive-glow) !important; } .fl-teen-mode .fl-ch-opt.is-wrong { animation: fl-t-shake 0.35s var(--t-ease) !important; } /* ── Challenge finish stats — WCAG-fixed labels ──────────────────────────── */ .fl-teen-mode .fl-ch-stats { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-sm) !important; padding: 16px !important; margin: 20px 0 !important; } .fl-teen-mode .fl-ch-stat-val { color: var(--t-gold) !important; font-family: var(--t-mono) !important; font-size: 24px !important; font-weight: 700 !important; } /* WCAG AA fix: was dark green/olive on dark bg = fail. Now sage = 5.8:1 ✓ */ .fl-teen-mode .fl-ch-stat-lbl { color: var(--t-text-2) !important; /* #c7c79d = 5.8:1 ✓ */ font-size: 10px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; font-weight: 600 !important; } /* Global XP row */ .fl-teen-mode .fl-ch-global-xp { color: var(--t-text-2) !important; font-size: 13px !important; margin: 8px 0 16px !important; padding: 10px 14px !important; background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-sm) !important; text-align: center !important; } .fl-teen-mode .fl-ch-global-xp strong { color: var(--t-gold) !important; font-family: var(--t-mono) !important; } .fl-teen-mode .fl-ch-finish-btn { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; color: var(--t-text) !important; border-radius: var(--t-r-sm) !important; font-family: var(--t-font) !important; font-weight: 600 !important; padding: 11px 18px !important; transition: all 0.15s !important; display: block !important; width: 100% !important; text-decoration: none !important; text-align: center !important; cursor: pointer !important; } .fl-teen-mode .fl-ch-finish-btn:hover { background: var(--t-surface) !important; border-color: var(--t-border-hi) !important; } .fl-teen-mode .fl-ch-finish-btn.primary { background: var(--t-blue) !important; border-color: var(--t-blue) !important; color: #fff !important; box-shadow: 0 0 14px var(--t-blue-glow) !important; } .fl-teen-mode .fl-ch-finish-btn.primary:hover { background: var(--t-blue-lt) !important; } .fl-teen-mode .fl-ch-start-btn { background: var(--t-blue) !important; border-color: var(--t-blue) !important; color: #fff !important; box-shadow: 0 0 14px var(--t-blue-glow) !important; font-family: var(--t-font) !important; font-weight: 700 !important; transition: background 0.15s !important; } .fl-teen-mode .fl-ch-start-btn:hover { background: var(--t-blue-lt) !important; } .fl-teen-mode .fl-ch-rules-list li { color: var(--t-text-2) !important; border-bottom-color: var(--t-border) !important; } .fl-teen-mode .fl-ch-finish-actions { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; } .fl-teen-mode.fl-arena-challenge{ --arena-grid-color: rgba(249,115,22,0.02); } /* in ::after, for challenge only */ .fl-teen-mode.fl-arena-challenge.fl-preview-root::after{ background-size: 100% 100%, 36px 36px, 36px 36px; } /* in ::before, bigger glow */ .fl-teen-mode.fl-arena-challenge.fl-preview-root::before{ background: radial-gradient(ellipse 80% 65% at 50% 40%, var(--arena-glow-color) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 80% 80%, var(--arena-glow-color2) 0%, transparent 65%); } /* ══════════════════════════════════════════════════════════════ VICTORY OVERLAY ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-victory-overlay { background: rgba(9,15,22,0.88) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } .fl-teen-mode .fl-victory-card.fl-teen-victory { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-lg) !important; box-shadow: var(--t-sh), 0 0 40px rgba(39,83,122,0.12) !important; color: var(--t-text) !important; padding: 30px 26px !important; max-width: 400px !important; width: 90% !important; } .fl-teen-mode .fl-victory-kicker { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--t-blue-lt) !important; opacity: 1 !important; margin-bottom: 4px !important; } .fl-teen-mode .fl-victory-title { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--t-text) !important; margin: 0 0 4px !important; } .fl-teen-mode .fl-victory-sub { color: var(--t-text-2) !important; font-size: 13px !important; } .fl-teen-mode .fl-victory-stats { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 14px 0 !important; } .fl-teen-mode .fl-victory-pill { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; border-radius: 6px !important; padding: 5px 10px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--t-text-2) !important; font-family: var(--t-mono) !important; } .fl-teen-mode .fl-victory-actions { margin-top: 18px !important; } .fl-teen-mode .fl-victory-btn { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; color: var(--t-text) !important; border-radius: var(--t-r-sm) !important; font-size: 14px !important; font-weight: 600 !important; padding: 11px 18px !important; cursor: pointer !important; font-family: var(--t-font) !important; transition: all 0.15s !important; text-decoration: none !important; text-align: center !important; display: block !important; margin-bottom: 8px !important; } .fl-teen-mode .fl-victory-btn:hover { background: var(--t-surface) !important; border-color: var(--t-border-hi) !important; } .fl-teen-mode .fl-victory-btn.primary, .fl-teen-mode a.fl-victory-btn.primary { background: var(--t-blue) !important; border-color: var(--t-blue) !important; color: #fff !important; box-shadow: 0 0 16px var(--t-blue-glow) !important; font-size: 15px !important; } .fl-teen-mode .fl-victory-btn.primary:hover { background: var(--t-blue-lt) !important; border-color: var(--t-blue-lt) !important; } /* ══════════════════════════════════════════════════════════════ PRACTICE PICKER OVERLAY ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-overlay-card { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-lg) !important; color: var(--t-text) !important; box-shadow: var(--t-sh) !important; } .fl-teen-mode .fl-overlay-body h3 { color: var(--t-text) !important; border-bottom: 1px solid var(--t-border) !important; } .fl-teen-mode .fl-overlay-close { color: var(--t-text-2) !important; background: var(--t-surface-2) !important; border-color: var(--t-border) !important; } /* ── Practice picker: equal-height 2×2 grid ── */ /* ── Practice picker: single-column stacked buttons (all screen sizes) ── */ /* Eliminates orphan/sizing issues with any number of items */ .fl-teen-mode .fl-practice-grid { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; } .fl-teen-mode .fl-practice-grid::before { display: none !important; } .fl-teen-mode .fl-practice-card { display: flex !important; flex-direction: row !important; /* icon left, text right */ align-items: center !important; gap: 14px !important; padding: 14px 16px !important; width: 100% !important; /* fill full modal width */ box-sizing: border-box !important; background: var(--t-surface-2) !important; border: 1px solid rgba(255,255,255,0.09) !important; border-radius: var(--t-r) !important; color: var(--t-text) !important; text-decoration: none !important; transition: background 0.15s, border-color 0.15s, transform 0.1s !important; } .fl-teen-mode .fl-practice-card:hover { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.18) !important; } .fl-teen-mode .fl-practice-ico { flex-shrink: 0 !important; width: 40px !important; height: 40px !important; border-radius: 10px !important; display: grid !important; place-items: center !important; background: rgba(255,255,255,0.06) !important; font-size: 20px !important; margin: 0 !important; /* no bottom margin — row layout */ } .fl-teen-mode .fl-practice-txt { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 1px !important; /* prevents flex collapse — use 1px not 0 */ overflow: visible !important; visibility: visible !important; } .fl-teen-mode .fl-practice-title { font-size: 13px !important; font-weight: 700 !important; color: var(--t-text) !important; line-height: 1.3 !important; } .fl-teen-mode .fl-practice-sub { font-size: 11px !important; color: var(--t-text-3) !important; margin-top: 3px !important; line-height: 1.3 !important; } /* Grid is already single-column flex — no responsive overrides needed */ /* ══════════════════════════════════════════════════════════════ TRANSPARENT QUESTION WRAPPER ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-kids-question[data-question-container] { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } /* ══════════════════════════════════════════════════════════════ SCROLLBAR ══════════════════════════════════════════════════════════════ */ .fl-teen-mode ::-webkit-scrollbar { width: 5px; height: 5px; } .fl-teen-mode ::-webkit-scrollbar-track { background: var(--t-surface); } .fl-teen-mode ::-webkit-scrollbar-thumb { background: var(--t-surface-2); border-radius: 3px; } .fl-teen-mode ::-webkit-scrollbar-thumb:hover { background: var(--t-text-3); } /* ══════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .fl-teen-mode .fl-teen-card { padding: 18px 16px !important; } .fl-teen-mode .fl-teen-title { font-size: 22px !important; } .fl-teen-mode .fl-ch-stem { font-size: 17px !important; } /* .fl-practice-grid single-col flex — no override needed */ .fl-teen-mode .fl-teen-dialogue { max-height: 160px !important; } .fl-teen-mode .fl-ch-finish-actions { flex-direction: column !important; } } /* Add to your root background wrapper (same one you use for ::before/::after) */ .fl-teen-mode.fl-preview-root{ position: relative; overflow: hidden; } /* Ambient light layer */ .fl-teen-mode.fl-preview-root::marker{ content:''; } /* no-op, ignore */ /* Create a NEW layer using an extra pseudo if you can (preferred: add a child div .bg-ambient) */ .fl-teen-mode.fl-preview-root .fl-bg-ambient{ position:absolute; inset:-10%; pointer-events:none; z-index:0; background: radial-gradient(600px 420px at 30% 35%, rgba(59,130,246,0.22) 0%, transparent 65%), radial-gradient(520px 380px at 70% 40%, rgba(99,102,241,0.16) 0%, transparent 70%), radial-gradient(700px 500px at 50% 80%, rgba(2,132,199,0.10) 0%, transparent 70%); filter: blur(18px); opacity: 0.85; transform: translateZ(0); } /* TEEN sidebar: positioning handled below in the PATCH block — this kept for reference */ /* (replaced: was top:50% translate(-50%,-50%) which caused bottom phantom space) */ /* ══════════════════════════════════════════════════════════════ MOBILE OPTIMISATION (added pass) Target: phones 320–480px. Treat the footer as the primary nav. ══════════════════════════════════════════════════════════════ */ /* ── Slide counter hidden — progress bar does the job ───────────────────── */ .fl-teen-mode .fl-slide-counter { display: none !important; } /* Progress bar — definitive styles at bottom of this file */ @media (max-width: 480px) { .fl-teen-mode .fl-progress-track { min-width: 60px !important; } } /* ── Footer layout — compact on small screens ───────────────────────────── */ @media (max-width: 480px) { /* Tighten the whole footer */ .fl-teen-mode .fl-placement-footer { padding: 8px 10px !important; } /* Logo smaller */ .fl-teen-mode .fl-footer-logo { height: 20px !important; } /* Nav buttons — smaller text + padding */ .fl-teen-mode .fl-nav-btn { font-size: 12px !important; padding: 6px 10px !important; } /* HUD items — tighter */ .fl-teen-mode .fl-hud { gap: 5px !important; } .fl-teen-mode .fl-hud-item { padding: 4px 7px !important; font-size: 11px !important; min-width: 38px !important; } .fl-teen-mode .fl-teen-user-pill { padding: 3px 7px !important; gap: 4px !important; } .fl-teen-mode .fl-teen-user-name { font-size: 11px !important; } .fl-teen-mode .fl-teen-user-xp { font-size: 10px !important; } /* Footer-center row — tighter spacing */ .fl-teen-mode .fl-footer-center { gap: 6px !important; } .fl-teen-mode .fl-footer-progress { gap: 4px !important; flex: 1 !important; min-width: 0 !important; } } /* ── Card — full-width, smaller padding on mobile ───────────────────────── */ @media (max-width: 480px) { .fl-teen-mode .fl-teen-card { padding: 16px 14px !important; border-radius: 14px !important; margin: 0 !important; max-width: 100% !important; } .fl-teen-mode .fl-teen-title { font-size: 20px !important; } .fl-teen-mode .fl-teen-kicker { font-size: 9px !important; } .fl-teen-mode .fl-teen-text { font-size: 14px !important; } } /* ── Placement window — fill available height between header and footer ──── */ @media (max-width: 480px) { .fl-teen-mode .fl-placement-window { padding: 12px 12px 12px !important; overflow-y: auto !important; } /* Ensure card doesn't get clipped */ .fl-teen-mode .fl-kids-question { max-height: none !important; overflow: visible !important; } } /* ── Dialogue — single column on all mobile, smaller text ───────────────── */ @media (max-width: 640px) { .fl-teen-mode .fl-teen-dialogue-layout { flex-direction: column !important; } .fl-teen-mode .fl-teen-dialogue { max-height: 180px !important; font-size: 13px !important; } .fl-teen-mode .fl-teen-turn { padding: 8px 10px !important; } .fl-teen-mode .fl-teen-line { font-size: 13px !important; } } /* ── MCQ options — full width, slightly smaller on phone ───────────────── */ @media (max-width: 480px) { .fl-teen-mode .fl-teen-opt { font-size: 13px !important; padding: 11px 12px !important; } .fl-teen-mode .fl-teen-opt::before { width: 20px !important; min-width: 20px !important; height: 20px !important; font-size: 9px !important; } } /* ── Gap fill sentence — smaller on phone ───────────────────────────────── */ @media (max-width: 480px) { .fl-teen-mode .fl-gap-sentence { font-size: 14px !important; line-height: 1.9 !important; } .fl-teen-mode .fl-gap-blank { font-size: 13px !important; padding: 2px 8px !important; } .fl-teen-mode .fl-gap-opt { font-size: 12px !important; padding: 5px 10px !important; } .fl-teen-mode .fl-gap-options-grid { gap: 6px !important; } } /* ── Output (Get Ready) — stack columns on phone ────────────────────────── */ @media (max-width: 640px) { .fl-teen-mode .fl-teen-output-grid { grid-template-columns: 1fr !important; } } /* ── Cover greeting ─────────────────────────────────────────────────────── */ .fl-teen-mode .fl-teen-cover-greeting { font-size: 13px !important; color: var(--t-text-2) !important; margin-bottom: 12px !important; font-weight: 500 !important; } .fl-teen-mode .fl-cover-name { color: var(--t-gold) !important; font-weight: 700 !important; } /* ══════════════════════════════════════════════════════════════ FLOATING XP ANIMATION ══════════════════════════════════════════════════════════════ */ .fl-xp-pop { position: absolute; z-index: 9999; pointer-events: none; font-family: var(--t-mono, 'DM Mono', monospace); font-size: 15px; font-weight: 800; color: var(--t-gold, #f4d488); text-shadow: 0 1px 8px rgba(244,212,136,0.5), 0 0 20px rgba(244,212,136,0.2); white-space: nowrap; transform: translateX(-50%); animation: fl-xp-float 1.1s cubic-bezier(0.2, 0.8, 0.4, 1) forwards; user-select: none; } .fl-xp-pop-bonus { font-size: 17px; color: #ff9f43; text-shadow: 0 1px 10px rgba(255,159,67,0.6), 0 0 25px rgba(255,159,67,0.25); animation: fl-xp-float-bonus 1.3s cubic-bezier(0.2, 0.8, 0.4, 1) forwards; } .fl-xp-pop-miss { font-size: 14px; color: var(--t-red-lt, #e07070); text-shadow: none; animation: fl-xp-float 0.9s cubic-bezier(0.2, 0.8, 0.4, 1) forwards; opacity: 0.7; } @keyframes fl-xp-float { 0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 20% { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1.15); } 80% { opacity: 0.8; transform: translateX(-50%) translateY(-46px) scale(0.95); } 100% { opacity: 0; transform: translateX(-50%) translateY(-64px) scale(0.8); } } @keyframes fl-xp-float-bonus { 0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 15% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.3); } 50% { opacity: 1; transform: translateX(-50%) translateY(-32px) scale(1.1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-72px) scale(0.85); } } /* ══════════════════════════════════════════════════════════════ SAVED WORDS PANEL ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-words-btn { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-sm) !important; color: var(--t-text-2) !important; font-size: 16px !important; padding: 5px 10px !important; cursor: pointer !important; transition: background 0.15s, border-color 0.15s !important; line-height: 1 !important; } .fl-teen-mode .fl-words-btn:hover { background: var(--t-surface-2) !important; border-color: var(--t-border-hi) !important; } .fl-teen-mode .fl-words-panel { position: absolute !important; inset: 0 !important; z-index: 9000 !important; background: rgba(9,15,22,0.85) !important; backdrop-filter: blur(16px) !important; display: flex !important; align-items: center !important; justify-content: center !important; animation: fl-t-in 0.25s var(--t-ease) both; } .fl-teen-mode .fl-words-card { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-lg) !important; box-shadow: var(--t-sh), 0 0 40px rgba(39,83,122,0.12) !important; padding: 24px !important; max-width: 400px !important; width: 92% !important; max-height: 75vh !important; overflow-y: auto !important; } .fl-teen-mode .fl-words-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 14px !important; } .fl-teen-mode .fl-words-close { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; border-radius: 6px !important; color: var(--t-text-2) !important; font-size: 12px !important; padding: 4px 8px !important; cursor: pointer !important; } .fl-teen-mode .fl-words-greeting { color: var(--t-text-2) !important; font-size: 13px !important; margin-bottom: 12px !important; } .fl-teen-mode .fl-words-greeting strong { color: var(--t-gold) !important; } .fl-teen-mode .fl-words-list { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-bottom: 14px !important; } .fl-teen-mode .fl-word-item { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-r-sm) !important; padding: 9px 12px !important; display: flex !important; align-items: baseline !important; gap: 8px !important; } .fl-teen-mode .fl-word-text { color: var(--t-text) !important; font-size: 15px !important; font-weight: 700 !important; flex: 1 !important; } .fl-teen-mode .fl-word-lesson { color: var(--t-text-3) !important; font-size: 11px !important; font-style: italic !important; } .fl-teen-mode .fl-word-date { color: var(--t-text-3) !important; font-size: 10px !important; font-family: var(--t-mono) !important; white-space: nowrap !important; } .fl-teen-mode .fl-words-empty { color: var(--t-text-3) !important; font-size: 13px !important; text-align: center !important; padding: 24px 0 !important; font-style: italic !important; } .fl-teen-mode .fl-words-clear { width: 100% !important; text-align: center !important; color: var(--t-red-lt) !important; border-color: rgba(192,57,43,0.3) !important; background: var(--t-red-glow) !important; font-size: 12px !important; } /* ══════════════════════════════════════════════════════════════ VICTORY DASHBOARD (fitness tracker aesthetic) Slightly brighter surface vs lesson cards ══════════════════════════════════════════════════════════════ */ .fl-teen-mode .fl-victory-card.fl-victory-dashboard { background: #1f3240 !important; /* slightly brighter than --t-surface */ border-color: rgba(39,83,122,0.4) !important; box-shadow: var(--t-sh), 0 0 60px rgba(39,83,122,0.18) !important; max-width: 460px !important; width: 94% !important; padding: 26px 24px !important; max-height: 90vh !important; overflow-y: auto !important; } /* Header row */ .fl-teen-mode .fl-vd-header { margin-bottom: 18px !important; } .fl-teen-mode .fl-vd-name { font-size: 13px !important; color: var(--t-gold) !important; font-weight: 700 !important; margin: 4px 0 6px !important; } .fl-teen-mode .fl-vd-lesson { font-size: 12px !important; color: var(--t-text-3) !important; font-style: italic !important; margin-top: 4px !important; } /* Tier badge */ .fl-teen-mode .fl-vd-tier { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 20px !important; margin-top: 4px !important; } .fl-teen-mode .fl-vd-tier-tier-strong { background: rgba(89,108,16,0.25) !important; color: #a8c05a !important; border: 1px solid rgba(89,108,16,0.4) !important; } .fl-teen-mode .fl-vd-tier-tier-developing { background: rgba(244,212,136,0.12) !important; color: var(--t-gold) !important; border: 1px solid rgba(244,212,136,0.3) !important; } .fl-teen-mode .fl-vd-tier-tier-review { background: rgba(192,57,43,0.15) !important; color: #e07070 !important; border: 1px solid rgba(192,57,43,0.3) !important; } /* Perfect round banner */ .fl-teen-mode .fl-vd-perfect { background: rgba(89,108,16,0.2) !important; border: 1px solid rgba(89,108,16,0.4) !important; border-radius: 8px !important; color: #a8c05a !important; font-size: 12px !important; font-weight: 700 !important; padding: 8px 12px !important; margin-top: 10px !important; text-align: center !important; } /* Section labels */ .fl-teen-mode .fl-vd-section-label { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--t-text-3) !important; margin: 16px 0 8px !important; } /* Metrics grid */ .fl-teen-mode .fl-vd-metrics { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; } @media (max-width: 420px) { .fl-teen-mode .fl-vd-metrics { grid-template-columns: repeat(2, 1fr) !important; } } .fl-teen-mode .fl-vd-metric { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; border-radius: 10px !important; padding: 10px 8px !important; text-align: center !important; } .fl-teen-mode .fl-vd-metric-val { font-family: var(--t-mono) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--t-text) !important; line-height: 1.1 !important; } .fl-teen-mode .fl-vd-metric-val.val-gold { color: var(--t-gold) !important; } .fl-teen-mode .fl-vd-metric-lbl { font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--t-text-2) !important; /* sage = 5.8:1 ✓ */ margin-top: 3px !important; } /* Skill XP progress bars */ .fl-teen-mode .fl-vd-bars { display: flex !important; flex-direction: column !important; gap: 8px !important; } .fl-teen-mode .fl-vd-bar-row { display: grid !important; grid-template-columns: 68px 1fr 34px !important; align-items: center !important; gap: 8px !important; } .fl-teen-mode .fl-vd-bar-lbl { font-size: 11px !important; font-weight: 600 !important; color: var(--t-text-2) !important; text-align: right !important; } .fl-teen-mode .fl-vd-bar-track { background: rgba(39,83,122,0.2) !important; border-radius: 3px !important; height: 6px !important; overflow: hidden !important; } .fl-teen-mode .fl-vd-bar-fill { height: 100% !important; background: linear-gradient(90deg, var(--t-blue), var(--t-blue-lt)) !important; border-radius: 3px !important; animation: fl-bar-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1) both !important; } @keyframes fl-bar-grow { from { width: 0 !important; } } .fl-teen-mode .fl-vd-bar-xp { font-family: var(--t-mono) !important; font-size: 10px !important; font-weight: 700 !important; color: var(--t-gold) !important; } /* Actions */ .fl-teen-mode .fl-vd-challenge-btn { display: block !important; text-align: center !important; text-decoration: none !important; margin-bottom: 8px !important; } .fl-teen-mode .fl-vd-secondary-actions { display: flex !important; gap: 8px !important; } .fl-teen-mode .fl-vd-secondary-actions .fl-victory-btn { flex: 1 !important; font-size: 12px !important; } /* Replay button text is now dynamic ("Improve Your Accuracy" is longer) */ .fl-teen-mode .fl-vd-replay-btn { font-size: 11px !important; padding: 10px 10px !important; } /* Mobile adjustments for dashboard */ @media (max-width: 480px) { .fl-teen-mode .fl-victory-card.fl-victory-dashboard { padding: 20px 16px !important; max-height: 85vh !important; } .fl-teen-mode .fl-vd-metric-val { font-size: 17px !important; } .fl-teen-mode .fl-vd-bar-row { grid-template-columns: 56px 1fr 30px !important; } .fl-teen-mode .fl-vd-bar-lbl { font-size: 10px !important; } } /* ========================================================== CRITICAL: support BOTH DOM structures 1)
2)
========================================================== */ /* Base gradient + frame */ .fl-teen-mode.fl-preview-root, .fl-teen-mode .fl-preview-root{ font-family: var(--t-font) !important; background: linear-gradient(180deg, var(--arena-base-top) 0%, var(--arena-base-bottom) 100%) !important; border-radius: 20px !important; border: 1px solid var(--t-border) !important; overflow: hidden !important; position: relative !important; box-shadow: inset 0 0 180px var(--arena-vignette), inset 0 -60px 80px rgba(0,0,0,0.2) !important; } /* Glow layer */ .fl-teen-mode.fl-preview-root::before, .fl-teen-mode .fl-preview-root::before{ content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 40%, var(--arena-glow-color) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 85% 85%, var(--arena-glow-color2) 0%, transparent 60%); animation: var(--arena-glow-anim) 10s ease-in-out infinite; pointer-events: none; z-index: 0; } /* Grid / streaks layer */ .fl-teen-mode.fl-preview-root::after, .fl-teen-mode .fl-preview-root::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: repeating-linear-gradient( 135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 120px ), linear-gradient(var(--arena-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--arena-grid-color) 1px, transparent 1px); background-size: 100% 100%, 48px 48px, 48px 48px; opacity: 0.9; filter: blur(0.2px); } /* If challenge class is on the SAME element as teen-mode */ .fl-teen-mode.fl-arena-challenge{ --arena-vignette: rgba(0,0,0,0.58); --arena-grid-color: rgba(249,115,22,0.02); } /* If challenge class is on the preview root inside teen-mode wrapper */ .fl-teen-mode .fl-preview-root.fl-arena-challenge{ --arena-vignette: rgba(0,0,0,0.58); --arena-grid-color: rgba(249,115,22,0.02); } /* Challenge-specific sizing on the grid layer */ .fl-teen-mode.fl-arena-challenge.fl-preview-root::after, .fl-teen-mode .fl-preview-root.fl-arena-challenge::after{ background-size: 100% 100%, 36px 36px, 36px 36px; } /* Challenge-specific stronger glow */ .fl-teen-mode.fl-arena-challenge.fl-preview-root::before, .fl-teen-mode .fl-preview-root.fl-arena-challenge::before{ background: radial-gradient(ellipse 80% 65% at 50% 40%, var(--arena-glow-color) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 80% 80%, var(--arena-glow-color2) 0%, transparent 65%); } /* ========================================================== PATCH: restore background image (after CRITICAL block) background-image set via wp_add_inline_style in PHP — see florentis-previews.php ========================================================== */ .fl-teen-mode.fl-preview-root, .fl-teen-mode .fl-preview-root{ /* background-image injected by PHP with absolute URL */ background-size: cover, cover !important; background-position: center, center !important; background-repeat: no-repeat, no-repeat !important; } /* ========================================================== PATCH: only use centered sidebar on desktop/tablet ========================================================== */ /* Default (mobile-first): let it flow normally */ .fl-teen-mode .fl-placement-sidebar{ top: auto !important; left: auto !important; right: auto !important; transform: none !important; max-height: none !important; overflow: visible !important; } /* Desktop/tablet: top-anchored centering — avoids phantom bottom space */ @media (min-width: 768px){ .fl-teen-mode .fl-placement-sidebar{ top: 24px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; max-height: calc(100% - var(--fl-footer-h, 68px) - 48px) !important; overflow: auto !important; padding-bottom: 0 !important; } } /* ✅ Only force full-height + safe-area padding in app mode */ body.fl-app-mode .fl-preview-root{ min-height: 100dvh; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* ✅ Normal site pages should NOT be forced to 100dvh */ body:not(.fl-app-mode) .fl-preview-root{ min-height: 0; padding-top: 0; padding-bottom: 0; } /* ========================================================== Teen Challenge: disable footer navigation (auto-advance owns flow) ========================================================== */ .fl-teen-mode.fl-arena-challenge [data-kids-prev], .fl-teen-mode.fl-arena-challenge [data-kids-next], .fl-teen-mode.fl-arena-challenge .fl-footer-progress, .fl-teen-mode.fl-arena-challenge [data-kids-counter-foot]{ display: none !important; } /* Collapse the empty middle area so layout doesn’t look broken */ .fl-teen-mode.fl-arena-challenge .fl-footer-center{ display: none !important; } /* ── Teen Smart Start: also hide Back/Next — cards auto-advance ── */ .fl-teen-mode:not(.fl-arena-challenge) [data-kids-prev], .fl-teen-mode:not(.fl-arena-challenge) [data-kids-next] { display: none !important; } /* ========================================================== Progress bar visibility (teen) ========================================================== */ /* ── Progress bar: full-width gold bar ───────────────────── */ /* Stretch footer-center to fill all available space */ .fl-teen-mode .fl-footer-center { flex: 1 1 auto !important; padding: 0 10px !important; justify-content: stretch !important; } /* Progress wrapper fills center */ .fl-teen-mode .fl-footer-progress { width: 100% !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; } /* Track: full width, taller, visible */ .fl-teen-mode .fl-progress-track { flex: 1 1 auto !important; height: 10px !important; min-width: 120px !important; background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.13) !important; border-radius: 999px !important; overflow: hidden !important; } /* Fill: warm gold with double glow */ .fl-teen-mode .fl-progress-fill { height: 100% !important; border-radius: 999px !important; background: linear-gradient(90deg, #c87c1a, #f4d488, #e8b84b) !important; box-shadow: 0 0 14px rgba(244,212,136,0.7), 0 0 4px rgba(200,124,26,0.9) !important; transition: width 0.4s ease !important; min-width: 6px !important; } /* ========================================================== Gap-fill: inline dropdown selects (Fix 6) ========================================================== */ .fl-gap-sentence--dropdown { line-height: 2.6; font-size: 17px; } .fl-gap-select { display: inline-block; margin: 0 4px; padding: 4px 8px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.10); color: inherit; font-size: 15px; font-family: inherit; cursor: pointer; appearance: auto; vertical-align: middle; transition: border-color 0.15s, background 0.15s; } .fl-gap-select:focus { outline: none; border-color: rgba(244,212,136,0.7); } .fl-gap-select.is-correct { border-color: rgba(46,160,67,0.8); background: rgba(46,160,67,0.12); } .fl-gap-select.is-wrong { border-color: rgba(220,53,69,0.7); background: rgba(220,53,69,0.08); } .fl-gap-select option { color: #111; background: #fff; } /* ========================================================== Cover slide: personalised greeting ========================================================== */ .fl-teen-cover-greeting { margin-top: 14px; font-size: 16px; color: var(--t-text-2, rgba(255,255,255,0.65)); font-weight: 500; } .fl-teen-cover-greeting strong { color: #f4d488; /* Florentis gold */ font-weight: 700; } /* ========================================================== Vocab Modes: Flashcards / Spelling / Challenge Words (teen-vocab-modes.js) ========================================================== */ .fl-vm-card { position: relative; } .fl-vm-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 16px !important; } .fl-vm-counter { font-size: 12px !important; font-weight: 600 !important; opacity: .6 !important; font-family: var(--t-mono) !important; } /* In-card mini progress bar */ .fl-vm-progress { margin: 16px 0 0 !important; } .fl-vm-prog-track { width: 100% !important; height: 5px !important; background: rgba(255,255,255,0.10) !important; border-radius: 999px !important; overflow: hidden !important; } .fl-vm-prog-fill { height: 100% !important; background: linear-gradient(90deg, #c87c1a, #f4d488) !important; border-radius: 999px !important; transition: width 0.4s ease !important; min-width: 4px !important; } /* Nav row (Back / Next) */ .fl-vm-nav { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 16px !important; } /* ── FLASHCARDS ─────────────────────────────────────────────── */ .fl-vm-flip-area { perspective: 900px !important; cursor: pointer !important; margin: 8px 0 !important; min-height: 260px !important; /* was 180px — more room for back content */ user-select: none !important; } .fl-vm-flipper { position: relative !important; transform-style: preserve-3d !important; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important; min-height: 260px !important; } .fl-vm-flipper.is-flipped { transform: rotateY(180deg) !important; } .fl-vm-face { position: absolute !important; inset: 0 !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 28px 28px !important; /* was 24px — more breathing room */ border-radius: 14px !important; text-align: center !important; overflow-y: auto !important; } .fl-vm-front { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.11) !important; } .fl-vm-back { background: rgba(39,83,122,0.15) !important; border: 1px solid rgba(107,163,203,0.25) !important; transform: rotateY(180deg) !important; } .fl-vm-word { font-size: 34px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--t-text) !important; margin-bottom: 6px !important; } .fl-vm-pos { font-size: 12px !important; font-style: italic !important; opacity: .5 !important; margin-bottom: 8px !important; } .fl-vm-tap-hint { font-size: 12px !important; opacity: .4 !important; margin-top: auto !important; padding-top: 12px !important; } .fl-vm-definition { font-size: 17px !important; font-weight: 600 !important; line-height: 1.5 !important; margin-bottom: 10px !important; } .fl-vm-example { font-size: 14px !important; font-style: italic !important; color: var(--t-text-2) !important; line-height: 1.5 !important; margin-bottom: 8px !important; } .fl-vm-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; margin-top: 4px !important; } .fl-vm-tag { font-size: 12px !important; background: rgba(255,255,255,0.07) !important; border-radius: 6px !important; padding: 3px 10px !important; opacity: .8 !important; } /* ── SPELLING ─────────────────────────────────────────────── */ .fl-vm-spell-listen { text-align: center !important; padding: 18px 0 6px !important; } .fl-vm-listen-btn { font-size: 16px !important; font-weight: 700 !important; padding: 14px 32px !important; border-radius: 14px !important; background: rgba(39,83,122,0.22) !important; border: 1px solid rgba(107,163,203,0.35) !important; color: var(--t-text) !important; cursor: pointer !important; transition: background 0.15s !important; letter-spacing: 0.02em !important; } .fl-vm-listen-btn:active { background: rgba(39,83,122,0.45) !important; transform: scale(0.97) !important; } .fl-vm-spell-hint { text-align: center !important; font-size: 13px !important; opacity: .6 !important; padding: 4px 0 10px !important; font-style: italic !important; } .fl-vm-spell-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; margin: 8px 0 !important; } .fl-vm-spell-input { width: 100% !important; max-width: 340px !important; padding: 14px 16px !important; font-size: 20px !important; font-weight: 600 !important; text-align: center !important; letter-spacing: 0.06em !important; background: rgba(255,255,255,0.07) !important; border: 1.5px solid rgba(255,255,255,0.16) !important; border-radius: 12px !important; color: var(--t-text) !important; outline: none !important; box-sizing: border-box !important; transition: border-color 0.15s !important; } .fl-vm-spell-input:focus { border-color: var(--t-blue-lt) !important; box-shadow: 0 0 0 3px rgba(39,83,122,0.20) !important; } .fl-vm-spell-feedback { text-align: center !important; min-height: 24px !important; margin-top: 10px !important; font-size: 15px !important; font-weight: 600 !important; } .fl-vm-ok { color: #a8c05a !important; } .fl-vm-bad { color: #e07070 !important; } /* Mobile */ @media (max-width: 480px) { .fl-vm-word { font-size: 26px !important; } .fl-vm-definition { font-size: 15px !important; } .fl-vm-flip-area, .fl-vm-flipper { min-height: 210px !important; } .fl-vm-spell-input { font-size: 18px !important; } .fl-vm-listen-btn { padding: 12px 24px !important; font-size: 15px !important; } } /* ========================================================== Challenge Words — question type badge + top row ========================================================== */ .fl-vm-cw-toprow { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 10px !important; } .fl-vm-cw-badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; padding: 3px 10px !important; border-radius: 99px !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.11) !important; color: var(--t-text-2) !important; } /* ========================================================== Saved Vocabulary Bank — footer action row + practice btn ========================================================== */ .fl-teen-mode .fl-words-footer-actions { display: flex !important; gap: 8px !important; align-items: center !important; margin-top: 14px !important; } .fl-teen-mode .fl-words-clear { /* Shrink so practice button can have more space */ width: auto !important; flex-shrink: 0 !important; padding: 8px 14px !important; font-size: 12px !important; text-align: center !important; color: var(--t-red-lt) !important; border-color: rgba(192,57,43,0.3) !important; background: var(--t-red-glow) !important; } .fl-teen-mode .fl-words-practice-btn { flex: 1 1 auto !important; display: block !important; text-align: center !important; padding: 10px 14px !important; border-radius: var(--t-r-sm) !important; /* Gold gradient matching XP rewards */ background: linear-gradient(135deg, rgba(200,124,26,0.22), rgba(244,212,136,0.10)) !important; border: 1px solid rgba(244,212,136,0.35) !important; color: #f4d488 !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; transition: background 0.15s, border-color 0.15s !important; letter-spacing: 0.01em !important; } .fl-teen-mode .fl-words-practice-btn:hover { background: linear-gradient(135deg, rgba(200,124,26,0.38), rgba(244,212,136,0.20)) !important; border-color: rgba(244,212,136,0.60) !important; }