/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    /* Colores de texto */
    --color-text: #172033;
    --color-heading: #172b4d;
    --color-heading-alt: #1c3557;
    --color-label: #34445c;
    /* Secondary text. Both stay readable (WCAG AA, 4.5:1 or better) on white AND on the page background
       (#eef1f7): #5f6f86 is 5.1:1 on white and 4.5:1 on the page. Never use a lighter grey for text. */
    --color-muted: #5f6f86;    /* small labels, answers of the FAQ */
    --color-subtle: #5f6f86;   /* descriptions of cards, test instructions, round counter (was #8492a6, 3.2:1) */

    /* Brand palette: 4 colors, each with one job. White text on every solid
       fill below meets WCAG AA (4.5:1 or better).
         blue   = main actions and structure
         pink   = brand accent (the color of the brain logo), secondary actions
         green  = correct answers and progress
         yellow = small highlights (dark text on it) */
    --color-primary: #3373c3;
    --color-primary-light: #8fb8e8;
    --color-primary-soft: #eef6ff;
    --color-primary-dark: #265a9c;   /* hover and the "chunky" button shadow */

    --color-accent: #d12a6a;
    --color-accent-dark: #a81f55;
    --color-accent-soft: #ffe6ef;

    --color-success: #1e7d34;
    --color-success-bright: #4cb944; /* decorative only (borders, stripe): too light for text */
    --color-success-soft: #e6f6ea;

    --color-highlight: #ffc800;      /* use with --color-text, never with white */
    --color-highlight-dark: #8a5a00; /* text on --color-highlight-soft */
    --color-highlight-soft: #fff4cc;

    /* Gold: the "Prize" tag and the gold egg. Text on --color-gold(-light) is --color-text; --color-gold-dark is text/borders on white */
    --color-gold: #f2b100;
    --color-gold-light: #ffe27a;
    --color-gold-dark: #7a4f00;

    --color-error: #c74440;
    --color-error-border: #e5726f;
    --color-error-soft: #fdecec;
    --color-error-dark: #9f3330;     /* hover and the "chunky" shadow of the danger button */

    /* Neutral grey: the circle behind the chick in the "My Profile" footer link */
    --color-neutral-soft: #e2e7ef;

    /* Level tags (basic / intermediate / advanced): green / yellow / pink of the brand palette above. The --level-a/b/c names
       are the colours of the three levels (a = basic, b = intermediate, c = advanced).
       solid = active filter button, soft = chip inside a game */
    --level-a: var(--color-success);          /* green  */
    --level-a-soft: var(--color-success-soft);
    --level-a-text: var(--color-success);
    --level-b: var(--color-highlight);        /* yellow: dark text, never white */
    --level-b-soft: var(--color-highlight-soft);
    --level-b-text: var(--color-highlight-dark);
    --level-c: var(--color-accent);           /* pink */
    --level-c-soft: var(--color-accent-soft);
    --level-c-text: var(--color-accent-dark);

    /* "Games for kids" page (list.html?list=for-kids): high contrast, like children's websites. Ink on the yellow
       page is 11:1 (WCAG AAA); the four bands only decorate the top of the cards. */
    --kids-page-bg: #ffd23f;
    --kids-ink: #14213d;
    --kids-band-1: #e63946;
    --kids-band-2: #1d7af3;
    --kids-band-3: #2a9d3f;
    --kids-band-4: #8e44ad;

    /* Fondos y bordes */
    --color-page-bg: #eef1f7;
    --color-bg: #ffffff;
    --color-border: #dbe7f5;
    --color-border-light: #e5edf6;
    --color-track: #edf3f9;

    /* Sombra sutil para la tarjeta de contenido */
    --shadow-card: 0 4px 24px rgba(23, 43, 77, 0.06);

    /* Otros */
    --radius-md: 12px;
    --radius-lg: 14px;
    --transition: all 0.2s ease;

    /* Stacking order: use these instead of loose numbers */
    --z-dropdown: 20;
    --z-bottom-nav: 40;
    --z-modal: 50;
    --z-menu-backdrop: 60;   /* side menu (js/core/shell.js): above the bottom bar and the modals */
    --z-menu: 61;
    --bottom-nav-height: 64px;

    /* Spacing scale: use these instead of loose pixel values */
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Motion (used by css/motion.css) */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Tabler Icons — default inline alignment/spacing
   ========================================================================== */

.ti {
    vertical-align: -2px;
    margin-right: 4px;
}

/* ==========================================================================
   Base
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--color-page-bg);
    color: var(--color-text);
    min-height: 100vh;
    min-height: 100dvh;   /* phones: the visible height, not the one behind the browser bars */
}

/* Touch: no grey flash on tap and no double-tap-to-zoom delay on controls. */
a,
button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.container {
    width: 90%;
    max-width: 720px;
    margin: 0 auto;
    padding: 50px 0 60px;
}

/* ==========================================================================
   Site header (appears on every page)
   ========================================================================== */

.site-header {
    position: relative;   /* the menu button is placed in its corner */
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-light);
}

/* Reserved space for the blocks that scripts draw AFTER the first paint (js/core/shell.js, learning-language.js,
   egg-progress.js): on a slow phone the browser paints the page before the scripts run, and without these heights the
   content jumps down when they arrive (layout shift, CLS). Only while the placeholder is still empty (:empty), so the
   real block always keeps its own size. Measured at 412 px and 1280 px: if the header or the selector change size,
   measure again. Tag buttons of the home page: css/games.css. */
.site-header:empty { min-height: 77px; }
[data-learning-language-slot]:empty { min-height: 73px; }

@media (max-width: 600px) {
    .site-header:empty { min-height: 65px; }
    [data-learning-language-slot]:empty { min-height: 68px; }
}

/* Brand stripe: the four palette colors, always visible on every page. */
.site-header::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg,
        var(--color-primary) 0 25%,
        var(--color-accent) 25% 50%,
        var(--color-success-bright) 50% 75%,
        var(--color-highlight) 75% 100%);
}

.site-header-inner {
    position: relative;
    width: 90%;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 0;

    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--color-heading);
    text-decoration: none;
}

.site-logo-mark {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 22px;
    line-height: 1;
}

/* The initials "LP" next to the 🧠: only on phones and tablets (see the 1024px block). */
.site-logo-short {
    display: none;
}

/* hover only where a real pointer exists (no sticky hover on touch) */
@media (hover: hover) {
    .site-logo:hover {
        color: var(--color-accent);
    }
}


/* Right-hand group: language choice and the favourites heart.
   It sits in the normal flow (nothing is absolutely positioned), so the
   header can never overlap itself, whatever the language or the width. */
.site-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: var(--space-md);
    border-left: 1px solid var(--color-border-light);
}

/* Language toggle: a pill with a knob that slides under the active label.
   The knob follows <html lang>, which i18n.js keeps up to date, so it needs no script of its own. */
.language-switch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    border-radius: 999px;
    background: var(--color-track);
}

.language-switch::before {
    content: "";
    position: absolute;
    inset: 3px auto 3px 3px;
    width: calc(50% - 3px);
    border-radius: inherit;
    background: var(--color-primary);
    transition: transform 0.25s var(--ease-out);
}

:root[lang="es"] .language-switch::before {
    transform: translateX(100%);
}

.language-switch button {
    position: relative;   /* above the knob */
    min-width: 46px;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: inherit;
    background: none;
    color: var(--color-label);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.25s;
}

.language-switch .active {
    color: var(--color-bg);
}

.language-switch button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Favourites heart: a link to favorites.html that also shows the count. */
.site-favorites {
    position: relative;
    border-radius: 50%;
    text-decoration: none;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-subtle);
}

.site-favorites svg {
    width: 24px;
    height: 24px;
}

.site-favorites.has-favorites,
.site-favorites[aria-current="page"] {
    color: var(--color-accent);
}

.site-favorites:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* hover only where a real pointer exists (no sticky hover on touch) */
@media (hover: hover) {
    .site-favorites:hover {
        background: var(--color-accent-soft);
        color: var(--color-accent);
    }
}

.site-favorites.has-favorites svg {
    fill: currentColor;
}

.site-favorites-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;

    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-bg);   /* ring that separates it from the filled heart */
    color: var(--color-bg);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.site-favorites-count[hidden] {
    display: none;
}

/* "My Results" counter: same bubble as the heart's, on the corner of the menu icon. */
.site-nav a,
.footer-nav a {
    position: relative;
}

.nav-badge {
    position: absolute;
    top: -8px;
    left: 12px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;

    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-bg);
    color: var(--color-bg);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.nav-badge[hidden] {
    display: none;
}

/* Desktop nav links */

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-left: auto;   /* pushes the menu and the actions to the right of the logo */
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-label);
    text-decoration: none;
    transition: var(--transition);
}

.site-nav a.active {
    color: var(--color-primary);
}

/* hover only where a real pointer exists (no sticky hover on touch) */
@media (hover: hover) {
    .site-nav a:hover {
        color: var(--color-primary);
    }
}


/* Menu icons: the flex gap above replaces the default icon margin. */
.site-nav .ti,
.footer-nav .ti {
    margin-right: 0;
    font-size: 1.2em;
    vertical-align: baseline;
}

/* ==========================================================================
   Page hero (title + intro, sits directly on the page background,
   visually separate from the white content card below it)
   ========================================================================== */

.header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.header h1 {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1.5px;
    color: var(--color-heading);
    margin-bottom: 16px;
}

.header p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-muted);
    max-width: 520px;
    margin: 0 auto;
}

/* ==========================================================================
   Placeholder / empty-state text (e.g. a language with no tests yet)
   ========================================================================== */

.learn-placeholder {
    font-size: 14px;
    color: var(--color-subtle);
    font-style: italic;
}

/* ==========================================================================
   Content card (the white "body" that groups everything below the hero)
   ========================================================================== */

.content-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-lg);
}

/* ==========================================================================
   Learning-language dropdown (built by js/core/learning-language.js)
   Same width as the white blocks below it. The whole box opens the list.
   ========================================================================== */

.learning-language {
    position: relative;
    width: 100%;
    margin-bottom: var(--space-md);
}

.learning-language-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 16px 22px;

    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);

    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.learning-language.is-open .learning-language-trigger {
    border-color: var(--color-primary-light);
}

/* hover only where a real pointer exists (no sticky hover on touch) */
@media (hover: hover) {
    .learning-language-trigger:hover {
        border-color: var(--color-primary-light);
    }
}


.learning-language-trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.learning-language-chevron {
    flex-shrink: 0;
    color: var(--color-heading);
    transition: transform 0.25s ease;
}

.learning-language.is-open .learning-language-chevron {
    transform: rotate(180deg);
}

.learning-language-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.learning-language-label {
    color: var(--color-subtle);
    font-size: 13px;
    font-weight: 600;
}

.learning-language-value {
    color: var(--color-heading);
    font-size: 19px;
    font-weight: 700;
}

/* The list: opens right under the box, over the content below it */
.learning-language-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);

    padding: 6px;
    list-style: none;

    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(23, 43, 77, 0.12);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.learning-language.is-open .learning-language-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.learning-language-list [role="option"] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 16px;
    border-radius: var(--radius-md);

    color: var(--color-text);
    font-size: 17px;
    cursor: pointer;
}

.learning-language-list [role="option"].is-active {
    background: var(--color-primary-soft);
}

.learning-language-list [role="option"][aria-selected="true"] {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.learning-language-list [role="option"][aria-selected="true"]::after {
    content: "\2713";   /* check mark */
}

/* ==========================================================================
   Card grid: games, tests and results, 2 columns x 2 rows per page.
   js/components/paged-grid.js fills .card-grid and the .pager under it.
   ========================================================================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* minmax(0, ...): long words wrap instead of widening a column */
    gap: var(--space-sm);
}

/* My Results: 3 columns on tablets and desktop; phones keep the 2 columns of the rule above (6 cards per page = 3 x 2 or 2 x 3). */
@media (min-width: 601px) {
    .card-grid--results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.grid-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 100%;
    padding: var(--space-md);

    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* A color band on top of every card of a grid, in the four colors of the stripe under the header (blue, pink, green,
   yellow), one after another. No dark shadow: the card keeps its soft look. Game cards sit inside .game-item, the
   others are direct children of the grid. "Games for kids" draws its own, bolder bands (css/games.css). */
.card-grid > :nth-child(4n+1) > .grid-card, .card-grid > .grid-card:nth-child(4n+1) { border-top: 6px solid var(--color-primary); }
.card-grid > :nth-child(4n+2) > .grid-card, .card-grid > .grid-card:nth-child(4n+2) { border-top: 6px solid var(--color-accent); }
.card-grid > :nth-child(4n+3) > .grid-card, .card-grid > .grid-card:nth-child(4n+3) { border-top: 6px solid var(--color-success-bright); }
.card-grid > :nth-child(4n+4) > .grid-card, .card-grid > .grid-card:nth-child(4n+4) { border-top: 6px solid var(--color-highlight); }

/* hover only where a real pointer exists (no sticky hover on touch) */
@media (hover: hover) {
    .grid-card:hover {
        border-color: var(--color-primary-light);
        box-shadow: 0 6px 20px rgba(50, 100, 160, 0.08);
        transform: translateY(-2px);
    }
}

.grid-card:active {
    transform: scale(0.985);
}

.grid-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.grid-card-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-heading-alt);
    overflow-wrap: anywhere;
}

.grid-card-title .ti {
    color: var(--color-primary);
}

/* At most 3 lines, so cards of one row keep a similar height. */
.grid-card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: 14px;
    color: var(--color-subtle);
}

.card-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: 600;
}

.card-status.status-none {
    background: var(--color-track);
    color: var(--color-subtle);
}

.card-status.status-progress {
    background: var(--color-highlight-soft);
    color: var(--color-highlight-dark);
}

.card-status.status-done {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* Tags of a test card side by side (Prize + In progress). */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Prize: golden and louder than the other tags, so it catches the eye. The check version ("earned") is quieter. */
.card-status.status-prize,
.card-status.status-prize-earned {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-status.status-prize {
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: var(--color-text);
}

.card-status.status-prize-earned {
    padding: 0.5px 9px;   /* the border takes the rest of the height */
    background: transparent;
    border: 1.5px solid var(--color-gold-dark);
    color: var(--color-gold-dark);
}

/* The gold egg: drawn with CSS (no image), egg-shaped, as tall as the text next to it. */
.gold-egg {
    flex: none;
    display: inline-block;
    width: 1em;
    height: 1.3em;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 35% 30%, var(--color-gold-light), var(--color-gold) 55%, var(--color-gold-dark));
}

/* Game numbers (My Results): one row per figure, label on the left and the number on the right. */
.card-stats {
    align-self: stretch;
    margin-top: 4px;
    font-size: 13px;
}

.card-stats > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid var(--color-border-light);
}

.card-stats dt {
    color: var(--color-subtle);
}

.card-stats dd {
    font-weight: 700;
    color: var(--color-heading-alt);
}

/* Pager (previous / next) under a grid; shown only when there is more than one page. */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-sm);
}

.pager[hidden] {
    display: none;
}

.pager-label {
    min-width: 72px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--color-label);
}

.pager-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;   /* comfortable touch target */
    height: 40px;
    padding: 0;

    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-primary);
    font-size: 20px;
    cursor: pointer;
    transition: var(--transition);
}

.pager-btn:disabled {
    color: var(--color-border);
    cursor: not-allowed;
}

.pager-btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* hover only where a real pointer exists (no sticky hover on touch) */
@media (hover: hover) {
    .pager-btn:not(:disabled):hover {
        border-color: var(--color-primary-light);
        background: var(--color-primary-soft);
    }
}

/* My Results: profile (chick + eggs) beside the language menu and the cards. */
.container--results {
    max-width: 960px;
}

.results-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    align-items: start;
}

.results-main {
    min-width: 0;   /* lets the card grid shrink instead of widening the page */
}

/* The profile card and, under it, the progress bar. */
.results-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.profile-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.profile-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    font-size: 40px;
    line-height: 1;
}

/* On My Results the avatar is a link to the profile page. */
a.profile-avatar {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

a.profile-avatar:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

@media (hover: hover) {
    a.profile-avatar:hover {
        box-shadow: 0 0 0 3px var(--color-primary-light);
    }
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;   /* a long nickname wraps instead of widening the card */
}

/* The nickname is the visitor's user name. */
.profile-nickname {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-heading);
    overflow-wrap: anywhere;
}

.profile-nickname-add {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
}

.profile-eggs {
    font-size: 16px;
    color: var(--color-label);
}

.profile-eggs-count {
    white-space: nowrap;
}

.profile-eggs-count strong {
    font-size: 20px;
    color: var(--color-heading);
}

/* Wide screens: the profile is a column on the left, like the sketch. */
@media (min-width: 900px) {
    .results-layout {
        grid-template-columns: 200px 1fr;
        gap: var(--space-md);
    }

    .profile-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-md) var(--space-sm);
    }

    .results-side {
        position: sticky;
        top: var(--space-sm);
    }

    .profile-avatar {
        width: 120px;
        height: 120px;
        font-size: 76px;
    }
}

/* My Results: Games and Tests, each a titled grid. */
.results-section + .results-section {
    margin-top: var(--space-lg);
}

.results-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    background: linear-gradient(135deg, var(--color-primary-soft), var(--color-accent-soft));
    border: 2px dashed var(--color-primary-light);
    border-radius: var(--radius-lg);
}

.results-empty[hidden] {
    display: none;
}

.results-empty-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-accent);
    font-size: 34px;
    box-shadow: var(--shadow-card);
}

.results-empty-icon .ti {
    margin: 0;
    vertical-align: 0;
}

.results-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-heading);
}

.results-empty-text {
    max-width: 420px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-label);
}

.results-empty-cta {
    display: inline-block;
    margin-top: 6px;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-bg);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 0 var(--color-primary-dark);
    transition: var(--transition);
}

.results-empty-cta:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--color-primary-dark);
}

.results-empty-cta:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* The title of a section with its controls on the right (the order of the games); they wrap under it when there is no room. */
.results-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: var(--space-sm);
}

.results-section-head h2 {
    margin-bottom: 0;
}

/* "Newest | Oldest": a segmented control; the chosen one is filled in blue. */
.results-order {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-primary-soft);
}

.results-order[hidden] { display: none; }

.results-order-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 4px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: var(--transition);
}

.results-order-button .ti { font-size: 18px; margin-right: 0; }

.results-order-button[aria-pressed="true"] {
    background: var(--color-primary);
    color: #ffffff;
}

.results-order-button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

@media (hover: hover) {
    .results-order-button[aria-pressed="false"]:hover {
        background: var(--color-bg);
    }
}

.results-section h2 {
    margin-bottom: var(--space-sm);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-heading-alt);
}

/* Phones keep the 2 columns, so the cards get tighter. */
@media (max-width: 600px) {
    .card-grid {
        gap: 10px;
    }

    .card-grid--info {
        grid-template-columns: 1fr;   /* the information cards hold more text than a game card */
    }

    .grid-card {
        padding: 12px;
        gap: 6px;
    }

    .grid-card-title {
        font-size: 15px;
    }

    .grid-card-text,
    .card-stats {
        font-size: 12px;
    }
}


/* ==========================================================================
   Purpose band (Practice page): a big brain on the left and the note on the
   right, inside a blue speech bubble. Each one is its own block, so on small
   screens the note moves under the brain (see the responsive section).
   ========================================================================== */

.purpose-band {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

/* Hidden for a learning language without a level test (js/pages/practice.js) */
.purpose-band[hidden] { display: none; }

.purpose-brain {
    flex: 0 0 auto;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 72px;
    line-height: 1;
    user-select: none;
}

.purpose-text {
    position: relative;
    flex: 1;
    min-width: 0;

    padding: var(--space-md);
    background: var(--color-primary-dark);
    border-radius: var(--radius-lg);
}

/* The bubble's tail, pointing at the brain. */
.purpose-text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    width: 16px;
    height: 16px;
    background: var(--color-primary-dark);
    border-radius: 3px;
    transform: translateY(-50%) rotate(45deg);
}

.purpose-text p {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--color-bg);
}

/* ==========================================================================
   Information cards (Practice page: "What will you see?" and "What can I do?").
   Same look as a .grid-card, but they do not link anywhere, so no hover lift, no pointer
   and the text is shown in full (no 3-line clamp). js/pages/practice.js draws them.
   ========================================================================== */

.grid-card--info {
    cursor: default;
}

@media (hover: hover) {
    .grid-card--info:hover {
        border-color: var(--color-border);
        box-shadow: none;
        transform: none;
    }
}

.grid-card--info:active {
    transform: none;
}

.grid-card--info .grid-card-text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    line-height: 1.6;
}

/* The example result bars inside the first card */
.grid-card--info .card-results {
    align-self: stretch;
    margin-top: 4px;
}

.grid-card--info .result-item + .result-item {
    margin-top: 12px;
}

/* Individual result */

.result-item {
    margin-bottom: 22px;
}

.result-item:last-child {
    margin-bottom: 0;
}

.result-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.result-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-label);
}

.result-percentage {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
}

/* Progress bar */

.bar-background {
    width: 100%;
    height: 10px;
    background: var(--color-track);
    border-radius: 20px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        var(--color-primary-light),
        var(--color-primary)
    );
    border-radius: 20px;

    transition: width 1s ease;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    text-align: center;
    margin-top: var(--space-xl);
    font-size: 13px;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px var(--space-md);
}

.footer-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
    transition: var(--transition);
}

.footer-nav a.active {
    color: var(--color-primary);
}

/* "My Profile": the chick in a grey circle instead of a Tabler icon (js/core/shell.js, avatar: true). */
.nav-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-neutral-soft);
    font-size: 14px;
    line-height: 1;
    transition: var(--transition);
}

.footer-nav a.active .nav-avatar {
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* hover only where a real pointer exists (no sticky hover on touch) */
@media (hover: hover) {
    .footer-nav a:hover {
        color: var(--color-primary);
    }
}

/* ==========================================================================
   Phones and tablets (1024px or less): app-style layout
   - The menu leaves the header and becomes a bottom navigation bar that is
     always on screen (the footer, fixed): icon with a small label under it.
   - The header keeps the logo and the actions (language + favourites).
   - Why 1024px: it covers tablets in both orientations. Above it there is
     room for the top menu, as on a desktop.
   ========================================================================== */

@media (max-width: 1024px) {

    /* Phones and tablets: "🧠 LP". The full name stays for screen readers. */
    .site-logo-short {
        display: inline;
    }

    .site-logo-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* Room so the fixed bar never covers the end of the page. */
    body {
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    .container {
        padding-bottom: var(--space-lg);
    }

    .site-nav {
        display: none;   /* the same links live in the bottom bar */
    }

    .site-actions {
        margin-left: auto;
        padding-left: 0;
        border-left: none;
    }

    .footer {
        position: fixed;
        inset: auto 0 0 0;
        z-index: var(--z-bottom-nav);

        margin: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);   /* phones with a gesture bar */

        background: var(--color-bg);
        border-top: 1px solid var(--color-border-light);
        box-shadow: 0 -2px 12px rgba(23, 43, 77, 0.06);
    }

    .footer-nav {
        flex-wrap: nowrap;
        justify-content: space-around;
        gap: 0;
        max-width: 560px;   /* on tablets the items stay close together */
        margin: 0 auto;
    }

    .footer-nav a {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 2px;

        min-height: var(--bottom-nav-height);
        padding: 8px 4px;

        font-size: 11px;
        line-height: 1.2;
        text-align: center;
    }

    /* The icon sits in a pill that fills in for the current page. */
    .footer-nav .ti {
        padding: 4px 20px;
        border-radius: 999px;
        font-size: 24px;
        transition: var(--transition);
    }

    .footer-nav a.active .ti {
        background: var(--color-primary-soft);
    }

    /* Same height as the icon pills (24px icon + 2 x 4px padding), so every label lines up. */
    .footer-nav .nav-avatar {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .footer-nav a:active .nav-avatar {
        background: var(--color-border);
    }

    /* On the bottom bar the icon is centred, so the counter goes on its top-right corner. */
    .footer-nav .nav-badge {
        top: 4px;
        left: calc(50% + 10px);
    }

    .footer-nav a:active .ti {
        background: var(--color-border-light);
    }
}

/* 4 tabs in the bottom bar: on very narrow phones (320px) each one is 80px wide, so the labels shrink a little
   to stay on one line ("Mis resultados" is the longest). */
@media (max-width: 380px) {
    .footer-nav a {
        padding-inline: 2px;
        font-size: 10px;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {

    .learning-language-trigger {
        padding: 14px 18px;
    }

    .learning-language-value {
        font-size: 18px;
    }

    /* The note moves under the brain; the bubble's tail points up. */
    .purpose-band {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .purpose-brain {
        font-size: 64px;
    }

    .purpose-text {
        width: 100%;
        padding: 20px;
    }

    .purpose-text::before {
        top: -8px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }

    .site-header-inner {
        gap: 12px;
        padding: 10px 0;
    }

    .site-logo-mark {
        font-size: 30px;
    }

    /* Phones: thinner side margins (8px instead of 5 % of the screen), so the cards get the room. */
    .container {
        width: calc(100% - 16px);
        padding-top: var(--space-md);
    }

    .header {
        margin-bottom: var(--space-lg);
    }

    .header h1 {
        font-size: 38px;
    }

    .header p {
        font-size: 15px;
    }

    .content-card {
        padding: var(--space-sm) 10px;   /* the white block hugs its cards (it was 24px 20px) */
    }

}


/* ==========================================================================
   Side menu (js/core/shell.js): a drawer that slides in from the left on phones AND desktop.
   Opened by the menu button of the header; closed by the X, the dark backdrop, Esc or choosing a link.
   Colours come from the brand palette: blue head with white text, pink mark on the page you are in.
   ========================================================================== */

.menu-toggle {
    /* In the corner of the header, OUTSIDE the centred column: it takes no room from the logo and the links. */
    position: absolute;
    top: calc(50% + 2px);   /* the 4px stripe is above the row */
    left: 10px;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-primary);
    font-size: 26px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: var(--transition);
}

.menu-toggle:focus-visible,
.side-menu a:focus-visible,
.side-menu-close:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

@media (hover: hover) {
    .menu-toggle:hover {
        background: var(--color-primary-soft);
        border-color: var(--color-primary-light);
    }
}

/* Narrow screens: the column has no margin big enough for the button, so the row leaves room for it. */
@media (max-width: 840px) {
    .site-header-inner {
        padding-left: 50px;
    }
}

.side-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu-backdrop);
    background: rgba(23, 32, 51, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.side-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s;
}

.side-menu {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-menu);
    width: min(86vw, 320px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-bg);
    box-shadow: 8px 0 32px rgba(23, 43, 77, 0.2);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
}

.side-menu.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.25s var(--ease-out), visibility 0s;
}

/* The four brand colours, like the header stripe. */
.side-menu::before {
    content: "";
    flex: none;
    height: 4px;
    background: linear-gradient(90deg,
        var(--color-primary) 0 25%,
        var(--color-accent) 25% 50%,
        var(--color-success-bright) 50% 75%,
        var(--color-highlight) 75% 100%);
}

.side-menu-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 12px 16px 20px;
    background: var(--color-primary);
    color: #fff;
}

/* First heading of the menu: the full name, because phones only show "LP" in the header. */
.side-menu-title {
    flex: 1;
    min-width: 0;
}

.side-menu-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

/* "Hello, <nickname>!" under the name: smaller, and it breaks a long nickname instead of widening the menu. */
.side-menu-greeting {
    margin: 6px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.side-menu-brand-mark {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 28px;
    line-height: 1;
}

.side-menu-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    touch-action: manipulation;
}

.side-menu-close:focus-visible {
    outline-color: #fff;
}

@media (hover: hover) {
    .side-menu-close:hover {
        background: rgba(255, 255, 255, 0.18);
    }
}

.side-menu-section {
    padding: 20px 12px 4px;
}

.side-menu-heading {
    margin: 0 8px 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* The submenus are always open: there is nothing to expand. */
.side-menu-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-menu-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    border-left: 4px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-heading);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.side-menu-list .ti {
    flex: none;
    font-size: 22px;
    color: var(--color-primary);
}

.side-menu-list a.active {
    border-left-color: var(--color-accent);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

@media (hover: hover) {
    .side-menu-list a:hover {
        background: var(--color-primary-soft);
        color: var(--color-primary-dark);
    }
}

/* The page behind the open menu does not scroll. */
body.menu-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .side-menu,
    .side-menu.is-open,
    .side-menu-backdrop,
    .side-menu-backdrop.is-open {
        transition: none;
    }
}


/* ==========================================================================
   Egg progress bar (js/core/egg-progress.js): 0 ... bar ... hatched chick, and the goal below.
   On My Results it is a card under the profile; on My Profile it sits inside the white panel (no card of its own).
   ========================================================================== */

.egg-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.egg-progress--card {
    padding: 14px var(--space-sm);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* Space for the bar while js/core/egg-progress.js has not drawn it (no layout shift; see "Reserved space" at the top). */
.egg-progress:empty { min-height: 64px; }
.egg-progress--card:empty { min-height: 92px; }

.egg-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.egg-progress-start {
    flex: none;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-heading);
}

.egg-progress-track {
    flex: 1;
    min-width: 0;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-track);
}

.egg-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
    transition: width 0.6s var(--ease-out);
}

.egg-progress-goal {
    flex: none;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 30px;
    line-height: 1;
    filter: grayscale(1);       /* the chick is "locked" until the goal is reached */
    opacity: 0.55;
    transition: var(--transition);
}

.egg-progress-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    color: var(--color-label);
}

.egg-progress.is-complete .egg-progress-fill { background: var(--color-success-bright); }
.egg-progress.is-complete .egg-progress-goal { filter: none; opacity: 1; }
.egg-progress.is-complete .egg-progress-text { font-weight: 700; color: var(--color-success); }

@media (prefers-reduced-motion: reduce) {
    .egg-progress-fill,
    .egg-progress-goal { transition: none; }
}

/* Avatar drawings (img/avatars/, js/core/egg-progress.js). They follow the font-size of their box, like the emojis they
   replace, so every place that sized an emoji avatar (profile, bottom bar, test banner, progress bar) keeps working. */
.avatar-drawing {
    position: relative;
    display: block;
    width: 1.3em;
    height: 1.3em;
}

.avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The eyelids of a drawing (EYES in js/core/egg-progress.js): open (flat) until the blink of css/motion.css closes them.
   An inner shadow at the bottom draws the line of the lashes. */
.avatar-lid {
    position: absolute;
    border-radius: 50%;
    background: var(--lid);
    box-shadow: inset 0 -0.025em 0 rgba(59, 30, 16, 0.45);
    transform: scaleY(0);
    transform-origin: 50% 0;
}

/* My Profile at the hen stage: the big avatar is a button (hen <-> rooster). */
.profile-avatar.is-switchable {
    cursor: pointer;
    transition: var(--transition);
}

.profile-avatar.is-switchable:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

@media (hover: hover) {
    .profile-avatar.is-switchable:hover {
        box-shadow: 0 0 0 3px var(--color-primary-light);
    }
}

/* ==========================================================================
   The golden egg animation (js/components/gold-egg.js): a metallic egg with a soft glow and four little stars turning
   around it. The box is square (--box); the egg takes 72 % of its height. The movement is in css/motion.css.
   Sizes: "banner" (results of a test), "thumb" (My collection), "stage" (the big view of My collection).
   ========================================================================== */
.gold-egg-anim {
    --box: 64px;
    position: relative;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--box);
    height: var(--box);
}

.gold-egg-anim--thumb { --box: 88px; }
.gold-egg-anim--stage { --box: 210px; }

.gold-egg-svg {
    width: calc(var(--box) * 0.56);
    height: calc(var(--box) * 0.72);
    overflow: visible;
    filter: drop-shadow(0 0 calc(var(--box) * 0.08) rgba(245, 187, 56, 0.65));
}

.gold-egg-orbit {
    position: absolute;
    inset: 0;
}

.gold-egg-star {
    position: absolute;
    width: calc(var(--box) * 0.16);
    height: calc(var(--box) * 0.16);
    fill: var(--color-gold);
}

.gold-egg-star svg { display: block; width: 100%; height: 100%; }
.gold-egg-star--1 { top: 2%; left: 10%; }
.gold-egg-star--2 { top: 14%; right: 4%; width: calc(var(--box) * 0.12); height: calc(var(--box) * 0.12); fill: #fff3b0; }
.gold-egg-star--3 { bottom: 6%; right: 12%; }
.gold-egg-star--4 { bottom: 16%; left: 2%; width: calc(var(--box) * 0.11); height: calc(var(--box) * 0.11); fill: #fff3b0; }

/* ==========================================================================
   The "Love" animation (js/components/love-heart.js): a glossy heart in rings of light, little hearts rising and
   sparkles. Vertical (4:5), like the golden egg. Sizes: "thumb" (My collection) and "stage" (the big view).
   The movement is in css/motion.css.
   ========================================================================== */
.love-anim {
    --box: 88px;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: calc(var(--box) * 0.8);
    height: var(--box);
}

.love-anim--banner { --box: 64px; }
.love-anim--stage { --box: 240px; }

.love-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.love-heart,
.love-ring,
.love-bubble,
.love-spark {
    transform-box: fill-box;
    transform-origin: center;
}

.love-heart {
    filter: drop-shadow(0 4px 6px rgba(165, 13, 61, 0.35));
}

/* ==========================================================================
   The "Magic Christmas" animation (js/components/xmas-tree.js): a Christmas tree in a night scene, with the title in the
   big view. Vertical (4:5), like Love. Sizes: "banner" (results of a test), "thumb" (My collection, Shop) and "stage".
   The movement is in css/motion.css.
   ========================================================================== */
.xmas-anim {
    --box: 88px;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: calc(var(--box) * 0.8);
    height: var(--box);
}

.xmas-anim--banner { --box: 64px; }
.xmas-anim--stage { --box: 300px; }

.xmas-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 10px rgba(5, 11, 20, 0.3));
}

.xmas-title {
    font-family: system-ui, sans-serif;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 2px;
}

.xmas-subtitle {
    font-family: system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
}

.xmas-sway,
.xmas-topstar,
.xmas-bulb,
.xmas-bauble,
.xmas-twinkle,
.xmas-gift,
.xmas-star {
    transform-box: fill-box;
    transform-origin: center;
}

.xmas-sway { transform-origin: 50% 95%; }           /* the foot of the trunk */
.xmas-bauble { transform-origin: top center; }       /* hangs from its string */
.xmas-gift { transform-origin: center bottom; }
.xmas-garland {
    fill: none;
    stroke: #ffe6a0;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 5 5;
}

.xmas-star { opacity: 0.5; }
/* A still tree (and "reduce motion") shows the snow spread over the scene; while it moves, each flake falls from the top. */
.xmas-flake { transform: translate(0, var(--y)); opacity: 0.85; }

/* Text only for screen readers (e.g. the header of the speaker column of the Vocabulary page). The same rule lives in
   css/profile.css for My Profile, which loads it too. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}