html, body, button, input, textarea, select { font-family: 'Nunito', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--mud-palette-text-primary, #2C2C2E); font-feature-settings: "ss01", "cv11"; } html, body { font-weight: 500; letter-spacing: -0.005em; } h1, h2, h3, h4, h5, h6 { font-family: 'Nunito', 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; } /* ────────────────────────────────────────────────────────────── Duolingo-style 3D pressable buttons / tiles --duo-depth: the bottom "shelf" thickness --duo-fg / --duo-shadow: surface + the darker shelf tone ────────────────────────────────────────────────────────────── */ :root { --duo-depth: 4px; --duo-radius: 16px; /* Shared quiz-map palette — the single source of truth for every map implementation (SVG world map, MapLibre "Top 10" + "Place It", and anything added later). These MUST be concrete colours, not var()/color-mix indirection: the geojson maps resolve them to RGB by probing a throwaway element (see map-quiz.js), which can't follow theme-var references — so a color-mix() ocean came out black. Light + dark are SEPARATE variables (not a .mud-theme-dark override) because the maps read the palette at init via getComputedStyle, before the theme class is on the DOM — they pick the right one from localStorage (isDarkTheme()) instead. Values mirror the SVG quiz stage: ocean = SVG light stage (--mud-palette-background-gray, #f5f5f5) / SVG dark stage (#1a1a2e); land = the SVG world map's baked fill (#ececec, kept light in both themes so countries read against the dark ocean). */ /* Quiz map palette — kept identical to the SVG world map / arena so every map mode (Top 10 .mq-map, Place It .pq-map, SVG quizzes, arena) looks the same: countries #e3e5ec with a #c4c8d2 hairline border on the #f3f4f7 background. Maps read these at init via getComputedStyle. Dark mode keeps its own ocean value (countries stay light, mirroring the SVG world map's baked fill, so they read against the dark water). */ --quiz-map-ocean: #f3f4f7; --quiz-map-ocean-dark: #1a1a2e; --quiz-map-land: #e3e5ec; --quiz-map-border: #c4c8d2; } /* ────────────────────────────────────────────────────────────── Theme palette — self-defined (replaces MudThemeProvider's generated --mud-palette-* variables). Light is the default on :root; dark is activated by the `mud-theme-dark` class on (toggled from localStorage by the inline script in App.razor and the theme switch). ────────────────────────────────────────────────────────────── */ :root { /* The app-wide page background (body, app bar, page backdrops). Change it HERE and every non-quiz page + the app bar follow. Quiz gameplay surfaces (SVG stage, map ocean, arena panels) intentionally do NOT use this — they keep their own colors. */ --app-page-bg: #ffffff; --mud-palette-primary: #58CC02; --mud-palette-primary-darken: #46A302; --mud-palette-primary-hover: rgba(88, 204, 2, 0.10); --mud-palette-primary-rgb: 88, 204, 2; --mud-palette-secondary: #1CB0F6; --mud-palette-tertiary: #FF9600; --mud-palette-info: #1CB0F6; --mud-palette-success: #58CC02; --mud-palette-warning: #FF9600; --mud-palette-error: #FF4B4B; --mud-palette-error-lighten: #FF7575; --mud-palette-error-rgb: 255, 75, 75; --mud-palette-background: #f3f4f7; --mud-palette-background-gray: #F0F0F0; --mud-palette-surface: #FFFFFF; --mud-palette-text-primary: #3C3C3C; --mud-palette-text-secondary: #777777; --mud-palette-text-disabled: rgba(0, 0, 0, 0.38); --mud-palette-divider: #E5E5E5; --mud-palette-lines-default: #E5E5E5; --mud-palette-action-default-hover: rgba(0, 0, 0, 0.04); --mud-palette-dark: #2B2B35; } .mud-theme-dark { --app-page-bg: #131F24; --mud-palette-primary: #58CC02; --mud-palette-primary-darken: #46A302; --mud-palette-primary-hover: rgba(88, 204, 2, 0.15); --mud-palette-primary-rgb: 88, 204, 2; --mud-palette-secondary: #1CB0F6; --mud-palette-tertiary: #FF9600; --mud-palette-info: #1CB0F6; --mud-palette-success: #58CC02; --mud-palette-warning: #FFC800; --mud-palette-error: #FF4B4B; --mud-palette-error-lighten: #FF7575; --mud-palette-error-rgb: 255, 75, 75; --mud-palette-background: #131F24; --mud-palette-background-gray: #1A282F; --mud-palette-surface: #202F36; --mud-palette-text-primary: #F7F7F7; --mud-palette-text-secondary: #AFAFAF; --mud-palette-text-disabled: rgba(255, 255, 255, 0.30); --mud-palette-divider: #37464F; --mud-palette-lines-default: #37464F; --mud-palette-action-default-hover: rgba(255, 255, 255, 0.06); --mud-palette-dark: #2B2B35; } /* Base reset (previously provided by MudBlazor's stylesheet). */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--app-page-bg); color: var(--mud-palette-text-primary); } button { font-family: inherit; } /* Blazor's unhandled-error banner — hidden by default; the framework reveals it by setting an inline `display: block` when a real error occurs. (Previously hidden by MudBlazor's stylesheet + a scoped rule that wasn't being loaded; defined globally here so it works on every page/layout.) */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; padding: 0.6rem 1.25rem 0.7rem 1.25rem; background: lightyellow; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ── MudBlazor utility-class shim — only the helpers still used in markup ── */ .d-flex { display: flex; } .flex-column { flex-direction: column; } .flex-grow-1 { flex-grow: 1; } .align-center { align-items: center; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-space-between { justify-content: space-between; } .mx-auto { margin-left: auto; margin-right: auto; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mr-2 { margin-right: 8px; } .mr-3 { margin-right: 12px; } .ml-2 { margin-left: 8px; } .px-3 { padding-left: 12px; padding-right: 12px; } .py-4 { padding-top: 16px; padding-bottom: 16px; } .py-6 { padding-top: 24px; padding-bottom: 24px; } .py-8 { padding-top: 32px; padding-bottom: 32px; } .pa-0 { padding: 0; } .duo-btn, .duo-tile { --duo-fg: #58cc02; --duo-shadow: #58a700; --duo-text: #ffffff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border: none; border-radius: var(--duo-radius); background: var(--duo-fg); color: var(--duo-text); font-family: 'Nunito', 'Inter', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 var(--duo-depth) 0 0 var(--duo-shadow); transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.15s ease; line-height: 1.1; white-space: nowrap; } .duo-btn:hover, .duo-tile:hover { filter: brightness(1.04); } .duo-btn:active, .duo-tile:active, .duo-btn.is-pressed, .duo-tile.is-pressed { transform: translateY(var(--duo-depth)); box-shadow: 0 0 0 0 var(--duo-shadow); } .duo-btn:focus-visible, .duo-tile:focus-visible { outline: 3px solid rgba(88, 204, 2, 0.4); outline-offset: 3px; } .duo-btn[disabled], .duo-tile[disabled] { cursor: not-allowed; opacity: 0.55; filter: grayscale(0.2); } /* Neutral / outlined variant */ .duo-btn.duo-btn-ghost, .duo-tile.duo-tile-ghost { --duo-fg: #ffffff; --duo-shadow: #e5e5e5; --duo-text: #4b4b4b; border: 2px solid #e5e5e5; } /* Brand variants */ .duo-btn.duo-btn-blue, .duo-tile.duo-tile-blue { --duo-fg: #1cb0f6; --duo-shadow: #1899d6; } .duo-btn.duo-btn-purple, .duo-tile.duo-tile-purple { --duo-fg: #ce82ff; --duo-shadow: #a560cc; } .duo-btn.duo-btn-pink, .duo-tile.duo-tile-pink { --duo-fg: #ff4b8b; --duo-shadow: #d63a72; } .duo-btn.duo-btn-orange, .duo-tile.duo-tile-orange { --duo-fg: #ff9600; --duo-shadow: #e08600; } .duo-btn.duo-btn-red, .duo-tile.duo-tile-red { --duo-fg: #ff4b4b; --duo-shadow: #d63a3a; } .duo-btn.duo-btn-yellow, .duo-tile.duo-tile-yellow { --duo-fg: #ffc800; --duo-shadow: #e0af00; --duo-text: #4b3a00; } /* Dark theme: ghost variant needs darker neutral so it's still readable */ .mud-theme-dark .duo-btn.duo-btn-ghost, .mud-theme-dark .duo-tile.duo-tile-ghost { --duo-fg: #2b2b35; --duo-shadow: #1a1a22; --duo-text: #f3f4f6; border-color: #3a3a47; } /* Full-width button (e.g. form submit). */ .duo-btn-block { display: flex; width: 100%; } /* ────────────────────────────────────────────────────────────── Duolingo-style surface card. A rounded panel with a subtle 3D "shelf" underneath, matching the quiz menu tiles/cards. Use for sections, panels and list groups. --duo-card-accent (optional) tints the shelf + hover border. ────────────────────────────────────────────────────────────── */ .duo-card { --duo-card-accent: var(--mud-palette-lines-default); border-radius: 20px; background: var(--mud-palette-surface); border: 2px solid var(--mud-palette-lines-default); box-shadow: 0 4px 0 0 var(--mud-palette-lines-default); } /* Interactive variant — lifts and tints on hover, presses on click. */ .duo-card-interactive { cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.15s ease; } .duo-card-interactive:hover { border-color: var(--duo-card-accent); box-shadow: 0 4px 0 0 var(--duo-card-accent); transform: translateY(-1px); } .duo-card-interactive:active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--duo-card-accent); } /* Section heading row inside a duo-card. */ .duo-section-title { font-family: 'Nunito', 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.02em; } .highlightedSvgPath { fill: orange !important; stroke: red !important; stroke-width: 2px !important; transition: fill 0.3s ease; } a, .btn-link { color: #1cb0f6; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } /* ── Difficulty label (see ) ───────────────────────────────── One-word difficulty chip for the 1–5 scale (Beginner … Expert). The component sets --dl-color per level. Lives here (not a