.text-large{
    font-size:large;
}
.text-larger {
    font-size: larger;
}

.sidebar .nav-item .nav-link .img-profile, .topbar .nav-item .nav-link .img-profile {
    height: 4rem;
    width: 4rem;
}

/* Matthew (AI), 2026-07-31 13:17, Kid-friendly Blazor reconnect modal */
#np-reconnect-modal {
    display: none;
}

#np-reconnect-modal.components-reconnect-show,
#np-reconnect-modal.components-reconnect-retrying,
#np-reconnect-modal.components-reconnect-paused,
#np-reconnect-modal.components-reconnect-failed,
#np-reconnect-modal.components-reconnect-resume-failed,
#np-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 20000; /* above Telerik popups/windows */
    align-items: center;
    justify-content: center;
    background: rgba(20, 30, 60, 0.5);
    /* Hold off ~0.8s so a momentary blip never flashes at the child */
    animation: krm-fade-in 250ms ease-out 800ms both;
}

@keyframes krm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.krm-card {
    font-family: 'Andika', 'Nunito', sans-serif;
    background: #fff;
    border: 5px solid #5E93FD;
    border-radius: 1.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    padding: 2rem 2.5rem 2.25rem;
    margin: 1rem;
    max-width: 26rem;
    text-align: center;
    color: #22304d;
}

.krm-card h2 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    color: #5E93FD;
}

.krm-card p {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}

.krm-art .krm-book {
    display: inline-block;
    font-size: 3.5rem;
    animation: krm-bounce 1.2s ease-in-out infinite;
}

@keyframes krm-bounce {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-14px) rotate(4deg); }
}

.krm-dots {
    display: block;
    margin: 0.25rem 0 1rem;
}

.krm-dots i {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin: 0 0.2rem;
    border-radius: 50%;
    background: #5E93FD;
    animation: krm-pulse 1.2s ease-in-out infinite;
}

.krm-dots i:nth-child(2) { animation-delay: 0.2s; }
.krm-dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes krm-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

.krm-attempt {
    font-size: 0.95rem !important;
    color: #7a8699;
    margin-top: 0.75rem !important;
}

.krm-btn {
    font-family: inherit;
    font-size: 1.25rem;
    margin-top: 0.75rem;
    padding: 0.7rem 2.25rem;
    border: none;
    border-radius: 999px;
    background: #5E93FD;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 0 #3b6fd4;
}

.krm-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #3b6fd4;
}

/* Only one message block shows at a time, depending on the state class */
.krm-msg { display: none; }

#np-reconnect-modal.components-reconnect-show .krm-msg-retrying,
#np-reconnect-modal.components-reconnect-retrying .krm-msg-retrying,
#np-reconnect-modal.components-reconnect-paused .krm-msg-retrying { display: block; }

#np-reconnect-modal.components-reconnect-failed .krm-msg-retrying,
#np-reconnect-modal.components-reconnect-resume-failed .krm-msg-retrying,
#np-reconnect-modal.components-reconnect-rejected .krm-msg-retrying { display: none; }

#np-reconnect-modal.components-reconnect-failed .krm-msg-failed,
#np-reconnect-modal.components-reconnect-resume-failed .krm-msg-failed { display: block; }
#np-reconnect-modal.components-reconnect-rejected .krm-msg-rejected { display: block; }

#np-reconnect-modal.components-reconnect-failed .krm-art,
#np-reconnect-modal.components-reconnect-resume-failed .krm-art,
#np-reconnect-modal.components-reconnect-rejected .krm-art { display: none; }

@media (prefers-reduced-motion: reduce) {
    .krm-art .krm-book, .krm-dots i { animation: none; }
    #np-reconnect-modal.components-reconnect-show { animation-duration: 0s; }
}

/* Matthew (AI), 2026-07-31 13:17, Avatar picker page (/avatar) - styled to match the approved mockup */
.av-page {
    /* break out of MainLayout's bootstrap .container so the backdrop is full-bleed */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 1.75rem 1rem 2.25rem;
    background-image: url('/img/backgrounds/background-2.jpg');
    background-size: cover;
    background-position: center;
    font-family: 'Andika', 'Nunito', sans-serif;
}

.av-panel {
    max-width: 1240px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(12, 32, 70, 0.28);
    padding: 1.75rem 1.75rem 1.5rem;
}

.av-panel-head {
    background: linear-gradient(180deg, #DFF1FB 0%, #FFFFFF 100%);
    border-radius: 22px;
    padding: 1.5rem 1.75rem 1.75rem;
    margin-bottom: 1.25rem;
}

.av-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.25rem;
    font-size: 2.25rem;
    font-weight: 700;
    color: #17356E;
}

.av-star { color: #FFC53D; font-size: 1.9rem; }

.av-subtitle {
    margin: 0 0 0 2.9rem; /* line up under the title text, clear of the star */
    font-size: 1.05rem;
    color: #4A6FA5;
}

.av-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 3fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.av-card {
    background: #fff;
    border: 1px solid #E8EEF7;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(23, 53, 110, 0.06);
    padding: 1.25rem 1.5rem 1.5rem;
}

.av-label {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #17356E;
}

.av-label-blue { color: #3B82F6; }

.av-current { text-align: center; }

.av-current-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 148px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    border: 6px solid #F4F8FF;
    box-shadow: 0 6px 18px rgba(23, 53, 110, 0.12);
    overflow: hidden;
}

.av-current-img { width: 128px; height: 128px; object-fit: contain; }

.av-group-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.av-group {
    width: 116px;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
}

.av-group-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 116px;
    background: #fff;
    border: 2px solid #E5EAF2;
    border-radius: 18px;
    transition: border-color .15s, background-color .15s, transform .15s;
}

.av-group-thumb img { width: 88px; height: 88px; object-fit: contain; }

.av-group:hover .av-group-thumb { transform: translateY(-2px); border-color: #C7D9F7; }

.av-group.is-selected .av-group-thumb {
    border-color: #3B82F6;
    background: #EFF6FF;
    box-shadow: inset 0 0 0 1px #3B82F6;
}

.av-group-name {
    display: block;
    margin-top: 0.5rem;
    font-size: 1rem;
    color: #17356E;
}

.av-group.is-selected .av-group-name { color: #3B82F6; font-weight: 700; }

.av-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.85rem;
}

.av-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 0.4rem;
    background: #fff;
    border: 2px solid #EDF1F7;
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.av-tile img { width: 100%; height: 100%; object-fit: contain; }

.av-tile:hover {
    transform: translateY(-2px);
    border-color: #C7D9F7;
    box-shadow: 0 6px 14px rgba(23, 53, 110, 0.10);
}

.av-tile.is-selected { border-color: #3B82F6; }

.av-check {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #3B82F6;
    color: #fff;
    font-size: 0.75rem;
}

.av-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}

.av-tip {
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    background: #F1F7FF;
    color: #17356E;
    font-size: 1rem;
}

.av-tip b { margin-right: 0.3rem; }

.av-star-sm { color: #FFC53D; margin-right: 0.5rem; }

.av-done {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 2.2rem;
    border: none;
    border-radius: 999px;
    background: #3B82F6;
    color: #fff;
    font-family: inherit;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #2C63C9;
}

.av-done:active { transform: translateY(3px); box-shadow: 0 1px 0 #2C63C9; }

.av-done-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    font-size: 0.7rem;
}

@media (max-width: 900px) {
    .av-row { grid-template-columns: 1fr; }
    .av-title { font-size: 1.75rem; }
    .av-subtitle { margin-left: 0; }
}

/* Matthew (AI), 2026-07-31 13:17, Kids dashboard (/dashboard) - styled to match the approved mockup */
.dash {
    /* break out of MainLayout's .container-fluid padding so the scene is full-bleed */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.25rem 1.5rem 2rem;
    background-image: url('/img/backgrounds/background-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Andika', 'Nunito', sans-serif;
}

.dash-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-logo img { max-width: 170px; height: auto; }

.dash-top-right { display: flex; align-items: center; gap: 0.75rem; }

.dash-user {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.4rem 0.4rem 1.1rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(12, 32, 70, 0.18);
    font-family: inherit;
    cursor: pointer;
}

.dash-user-name { font-weight: 700; color: #17356E; font-size: 1.05rem; }

.dash-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.dash-logoff {
    padding: 0.45rem 1rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: #17356E;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.dash-logoff:hover { background: #fff; }

.dash-hello { text-align: center; margin-bottom: 2rem; }

.dash-hi {
    margin: 0;
    font-size: 4rem;
    font-weight: 700;
    color: #1B3A73;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.55);
}

.dash-sub {
    display: inline-block;
    margin: 0.25rem 0 0;
    padding-bottom: 0.35rem;
    font-size: 1.35rem;
    color: #2F4763;
    border-bottom: 4px solid #FFC53D;
    border-radius: 2px;
}

.dash-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 260px));
    justify-content: center;
    gap: 1.75rem;
    margin: 0 auto 2.5rem;
}

.dash-card {
    position: relative;
    padding: 3.5rem 1.5rem 1.75rem;
    border-radius: 26px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(12, 32, 70, 0.22);
    transition: transform .15s, box-shadow .15s;
}

.dash-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(12, 32, 70, 0.28); }

/* the dashed inner outline from the mockup */
.dash-card::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 2px dashed;
    border-radius: 18px;
    pointer-events: none;
}

.dash-badge {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 5px solid #fff;
    color: #fff;
    font-size: 2.1rem;
    box-shadow: 0 6px 16px rgba(12, 32, 70, 0.25);
    overflow: hidden;
}

.dash-badge-avatar { padding: 0; }
.dash-badge-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dash-card-title { margin: 0 0 0.5rem; font-size: 2rem; font-weight: 700; }

.dash-card-text {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    color: #3E4C5E;
    line-height: 1.35;
}

.dash-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

/* --- Library --- */
.dash-card-library { background: #FDF8EC; }
.dash-card-library::after { border-color: #E9D9B5; }
.dash-card-library .dash-badge { background: #F5A623; }
.dash-card-library .dash-card-title { color: #E8791A; }
.dash-card-library .dash-btn { background: #F5871F; box-shadow: 0 4px 0 #C96A12; }

/* --- Games --- */
.dash-card-games { background: #F2F7E9; }
.dash-card-games::after { border-color: #CFE0B4; }
.dash-card-games .dash-badge { background: #86BC42; }
.dash-card-games .dash-card-title { color: #3E7A1E; }
.dash-card-games .dash-btn { background: #52A83E; box-shadow: 0 4px 0 #3C7E2D; }

/* --- Avatar --- */
.dash-card-avatar { background: #F7F2FD; }
.dash-card-avatar::after { border-color: #DCC9F2; }
.dash-card-avatar .dash-badge { background: #9C6ADE; }
.dash-card-avatar .dash-card-title { color: #7C3AED; }
.dash-card-avatar .dash-btn { background: #8B5CF6; box-shadow: 0 4px 0 #6A43C4; }

/* --- quick links bar --- */
.dash-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 840px;
    margin: 0 auto;
    padding: 1.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(251, 248, 241, 0.95);
    box-shadow: 0 10px 26px rgba(12, 32, 70, 0.22);
}

.dash-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0 0.5rem;
    text-decoration: none;
    border-right: 2px dashed #E2DCCF;
}

.dash-quick-item:last-child { border-right: none; }
.dash-quick-item:hover .dash-quick-icon { transform: translateY(-3px); }

.dash-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 0.35rem;
    border-radius: 50%;
    color: #fff;
    font-size: 1.4rem;
    transition: transform .15s;
}

.dash-quick-fav { background: #F06292; }
.dash-quick-ach { background: #4A90E2; }
.dash-quick-dis { background: #26A69A; }
.dash-quick-new { background: #F5A623; }

.dash-quick-title { font-weight: 700; color: #17356E; font-size: 1rem; }
.dash-quick-sub { color: #5B6B80; font-size: 0.85rem; }

/* --- log out confirm --- */
.dash-logout {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}

.dash-logout-card {
    max-width: 420px;
    padding: 1.75rem 2rem;
    border-radius: 22px;
    background: #fff;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.dash-logout-card h3 { color: #17356E; margin-top: 0; }

.dash-logout-no, .dash-logout-yes {
    margin: 0.5rem 0.35rem 0;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.dash-logout-no { background: #EDF1F7; color: #17356E; }
.dash-logout-yes { background: #3B82F6; color: #fff; }

/* Matthew (AI), 2026-08-02 13:46, the three main cards (Library/Games/Avatar) used to stack into a
   single 320px column below 900px, which pushed Games and Avatar off the bottom of a phone screen.
   They now stay side by side all the way down. The base grid needs no change - its minmax(0, 260px)
   tracks already shrink to fit the container - so only the gap and the card internals scale here.
   Every value is a clamp() whose vw term equals the desktop pixel size at exactly 900px, so nothing
   jumps as the breakpoint is crossed, and the badge, its overhang and the card's top padding are all
   derived from --dash-badge so they stay in proportion as they shrink. */
@media (max-width: 900px) {
    .dash-hi { font-size: 2.75rem; }
    .dash-quick { grid-template-columns: repeat(2, 1fr); border-radius: 28px; gap: 1rem 0; }
    .dash-quick-item:nth-child(2n) { border-right: none; }

    /* claw back some page gutter so the cards keep a usable width on a narrow phone */
    .dash {
        padding-left: clamp(0.6rem, 2.7vw, 1.5rem);
        padding-right: clamp(0.6rem, 2.7vw, 1.5rem);
    }

    .dash-cards { gap: clamp(0.45rem, 3.2vw, 1.75rem); }

    .dash-card {
        --dash-badge: clamp(44px, 9.6vw, 86px);
        padding: calc(var(--dash-badge) * 0.66) clamp(0.4rem, 2.7vw, 1.5rem) clamp(0.85rem, 3.2vw, 1.75rem);
        border-radius: clamp(14px, 2.9vw, 26px);
    }

    .dash-card::after {
        inset: clamp(5px, 1.1vw, 10px);
        border-radius: clamp(9px, 2vw, 18px);
    }

    .dash-badge {
        width: var(--dash-badge);
        height: var(--dash-badge);
        top: calc(var(--dash-badge) * -0.4);
        border-width: clamp(3px, 0.55vw, 5px);
        font-size: calc(var(--dash-badge) * 0.39);
    }

    .dash-card-title { font-size: clamp(1rem, 3.6vw, 2rem); }

    .dash-card-text {
        margin-bottom: clamp(0.6rem, 2.3vw, 1.25rem);
        font-size: clamp(0.7rem, 1.9vw, 1.05rem);
    }

    .dash-btn {
        gap: clamp(0.2rem, 1.1vw, 0.6rem);
        padding: clamp(0.4rem, 1.3vw, 0.7rem) clamp(0.55rem, 2.9vw, 1.6rem);
        font-size: clamp(0.7rem, 2vw, 1.1rem);
    }
}

/* Matthew (AI), 2026-08-02 13:46, below ~560px the card is too narrow for "Start Reading" plus its
   arrow on one line, so the arrow is dropped and the pill is allowed to wrap as a last resort. */
@media (max-width: 560px) {
    .dash-btn {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        line-height: 1.2;
        padding-left: clamp(0.4rem, 1.6vw, 1.6rem);
        padding-right: clamp(0.4rem, 1.6vw, 1.6rem);
    }

    .dash-btn i { display: none; }
}

/* Matthew (AI), 2026-07-31 13:17, Games and Activities list (/games) - styled to match the approved mockup */
.gm-page {
    /* break out of MainLayout's .container so the scene is full-bleed under the navbar */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.75rem 2rem 2.5rem;
    background-image: url('/img/backgrounds/background-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Andika', 'Nunito', sans-serif;
}

.gm-head { margin-bottom: 1.5rem; }

.gm-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.15rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: #17356E;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
}

.gm-star { color: #FFC53D; font-size: 2rem; }

.gm-sub {
    margin: 0 0 0 3.1rem;
    font-size: 1.15rem;
    color: #2F4763;
}

.gm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.gm-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1.5rem;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(12, 32, 70, 0.20);
    transition: transform .15s, box-shadow .15s;
}

.gm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(12, 32, 70, 0.26);
}

.gm-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 0.6rem;
    border-radius: 50%;
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 4px 10px rgba(12, 32, 70, 0.18);
}

.gm-badge-text { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; }

.gm-name {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #17356E;
}

.gm-desc {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.35;
    color: #3E4C5E;
}

/* illustration fills the middle so every card in a row ends up the same height */
.gm-art {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    margin-bottom: 1rem;
}

.gm-art img { max-width: 100%; max-height: 220px; object-fit: contain; }

.gm-play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    background: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(12, 32, 70, 0.14);
}

/* --- per game palettes --- */
.gm-wordfinder { background: #FDF1E3; }
.gm-wordfinder .gm-badge { background: #F5A623; }
.gm-wordfinder .gm-play { color: #F5871F; }

.gm-mathadventure { background: #EAF3FD; }
.gm-mathadventure .gm-badge { background: #2196F3; }
.gm-mathadventure .gm-play { color: #2196F3; }

.gm-simplespelling { background: #F3EDFC; }
.gm-simplespelling .gm-badge { background: #8B5CF6; }
.gm-simplespelling .gm-play { color: #8B5CF6; }

.gm-wordblend { background: #F4F7E6; }
.gm-wordblend .gm-badge { background: #4CAF50; }
.gm-wordblend .gm-play { color: #4CAF50; }

.gm-wordpairs { background: #FDEEF4; }
.gm-wordpairs .gm-badge { background: #EC6BA0; }
.gm-wordpairs .gm-play { color: #EC6BA0; }

@media (max-width: 720px) {
    .gm-page { padding: 1.25rem 1rem 2rem; }
    .gm-title { font-size: 1.9rem; }
    .gm-sub { margin-left: 0; }
}

/* Matthew (AI), 2026-07-31 13:17, Individual game pages - shared shell (see Components/GameShell.razor) */
.gs-page {
    /* break out of MainLayout's .container so the backdrop is full-bleed under the navbar */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem 1rem 2.25rem;
    background-image: url('/img/backgrounds/background-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Andika', 'Nunito', sans-serif;
}

.gs-panel {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.25rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 45px rgba(12, 32, 70, 0.28);
}

/* --- top panel: badge, name, subtitle, back link --- */
.gs-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: 22px;
    background: linear-gradient(180deg, #DFF1FB 0%, #FFFFFF 100%);
}

.gs-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(12, 32, 70, 0.20);
}

.gs-badge-text { font-size: 1.15rem; font-weight: 700; }

.gs-head-text { flex: 1; min-width: 0; }

.gs-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #17356E;
}

.gs-sub {
    margin: 0.1rem 0 0;
    font-size: 1.05rem;
    color: #4A6FA5;
}

.gs-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    background: #fff;
    color: #17356E;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(12, 32, 70, 0.14);
}

.gs-back:hover { background: #EFF6FF; color: #3B82F6; }

/* --- lower panel: the game itself. Padding kept modest so the games' own
       container/max-width rules still have room to breathe. --- */
.gs-body {
    padding: 1.25rem 1rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #E8EEF7;
    box-shadow: 0 4px 14px rgba(23, 53, 110, 0.06);
}

/* --- per game accents, matching the /games list --- */
.gs-wordfinder .gs-badge { background: #F5A623; }
.gs-mathadventure .gs-badge { background: #2196F3; }
.gs-simplespelling .gs-badge { background: #8B5CF6; }
.gs-wordblend .gs-badge { background: #4CAF50; }
.gs-wordpairs .gs-badge { background: #EC6BA0; }

@media (max-width: 720px) {
    .gs-head { flex-wrap: wrap; }
    .gs-title { font-size: 1.6rem; }
    .gs-back { width: 100%; justify-content: center; }
    .gs-body { padding: 1rem 0.5rem; }
}

/* Matthew (AI), 2026-07-31 17:05, /library page - styled to match the approved mockup */
.lib-page {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem 2.5rem 2.5rem;
    background-image: url('/img/backgrounds/background-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Andika', 'Nunito', sans-serif;
}

.lib-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lib-head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: #FFF3D6;
    border: 3px solid #F5C542;
    color: #E8890C;
    font-size: 1.9rem;
    box-shadow: 0 6px 16px rgba(12, 32, 70, 0.22);
}

.lib-head-text { flex: 1; min-width: 0; }

.lib-h1 {
    margin: 0;
    font-size: 2.6rem;
    font-weight: 700;
    color: #17356E;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.55);
}

.lib-sub { margin: 0; font-size: 1.1rem; color: #2F4763; }

.lib-all {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    background: #fff;
    color: #2F6FE0;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(12, 32, 70, 0.20);
}

.lib-all:hover { background: #EFF6FF; color: #17356E; }

/* --- book cards --- */
.lib-grid-wrap .k-listview,
.lib-grid-wrap .k-listview-content { background: transparent; border: 0; }

/* Matthew (AI), 2026-08-01 09:10, cards reduced ~10% (250px -> 225px). */
.lib-grid-wrap .k-listview-content {
    grid-template-columns: repeat(var(--book-cols, auto-fill), minmax(0, 225px));
    gap: 2rem 1.6rem;
    justify-content: center;
}

/* Matthew (AI), 2026-08-01 09:10, padding-bottom removed so the card is exactly the cover height - the
   action bar now sits flush inside the bottom of the cover instead of hanging below it. */
.lib-card {
    position: relative;
    width: 100%;
}

.lib-cover {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 14px 18px 18px 14px;
    overflow: hidden;
    cursor: pointer;
    background: #dfe7f5;
    /* spine on the left + lift, to read as a physical book */
    border-left: 7px solid rgba(23, 53, 110, 0.35);
    box-shadow: 0 14px 30px rgba(12, 32, 70, 0.35);
    transition: transform .15s, box-shadow .15s;
}

.lib-card:hover .lib-cover {
    transform: translateY(-5px);
    box-shadow: 0 20px 38px rgba(12, 32, 70, 0.42);
}

/* the cover markup comes from the DB as an <img class="img-fluid"> */
.lib-cover img.img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Matthew (AI), 2026-08-01 09:10, raised clear of the action bar, which now sits inside the cover's
   bottom edge (bar occupies roughly the lowest 3rem). */
.lib-cover .img-flag {
    max-width: 32px;
    top: auto;
    bottom: 3.4rem;
    left: 8px;
    border-radius: 4px;
}

/* Matthew (AI), 2026-08-01 09:10, .lib-title removed - the caption is gone from the card markup because the
   cover art already shows the title. Kept out rather than left dead. */

.lib-ribbon {
    position: absolute;
    top: -2px;
    left: 12px;
    width: 30px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    background: #FFC53D;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.lib-level {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* deterministic level colours (levelClass in BookDisplay.razor.cs) */
.lib-lvl-0 { background: #8B5CF6; }
.lib-lvl-1 { background: #2196F3; }
.lib-lvl-2 { background: #29A37A; }
.lib-lvl-3 { background: #EC6BA0; }
.lib-lvl-4 { background: #F5A623; }
.lib-lvl-5 { background: #EF5A5A; }

.lib-actions {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    /* Matthew (AI), 2026-08-01 09:10, inset from the cover's bottom edge rather than bottom:0 on a padded
       card, so the bar sits within the book instead of overlapping/hanging off the bottom. */
    bottom: 0.55rem;
    display: flex;
    justify-content: space-between;
    gap: 0.2rem;
    padding: 0.4rem 0.35rem;
    border-radius: 14px;
    background: #FFFDF6;
    box-shadow: 0 6px 16px rgba(12, 32, 70, 0.28);
}

.lib-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3rem 0.15rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #17356E;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.lib-btn:hover { background: #EFF6FF; }

.lib-i-read { color: #35A853; }
.lib-i-listen { color: #8B5CF6; }
.lib-i-quiz { color: #F5871F; }

/* Telerik pager -> round arrows + dots, closer to the mockup */
.lib-grid-wrap .k-listview-pager {
    background: transparent;
    border: 0;
    justify-content: center;
    margin-top: 0.75rem;
}

.lib-grid-wrap .k-listview-pager .k-pager-nav {
    background: #fff;
    border-radius: 50%;
    color: #2F6FE0;
    box-shadow: 0 4px 12px rgba(12, 32, 70, 0.25);
}

.lib-grid-wrap .k-listview-pager .k-pager-numbers .k-link {
    border-radius: 999px;
    color: #17356E;
}

.lib-grid-wrap .k-listview-pager .k-pager-numbers .k-link.k-selected {
    background: #2F6FE0;
    color: #fff;
}

@media (max-width: 900px) {
    .lib-page { padding: 1rem 1rem 2rem; }
    .lib-head { flex-wrap: wrap; }
    .lib-h1 { font-size: 1.9rem; }
    .lib-grid-wrap .k-listview-content { grid-template-columns: repeat(auto-fill, minmax(0, 190px)); }
}

/* Matthew (AI), 2026-07-31 17:05, /bookread page - kid reader chrome (BookRead kidstheme="true") */
.br-page {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem 1.5rem 2rem;
    background-image: url('/img/backgrounds/background-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Andika', 'Nunito', sans-serif;
}

/* the component sets a flat pink page background in its own <style>; undo it here */
.br-page .container,
.br-page .content,
.br-page #content { background-color: transparent !important; }

/* --- logo + Reader / Quiz / Ratings tabs (the shared navbar is hidden on this page) --- */
/* Matthew (AI), 2026-08-01 09:10, logo left, tabs centred. The spacer balances the logo so the tabs stay
   optically centred in the row rather than being pushed right by the logo's width. */
.br-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.br-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.br-logo img { height: 48px; width: auto; display: block; }

.br-topbar-spacer { flex: 0 0 auto; width: 150px; }

.br-tabs {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.br-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 14px;
    /* Matthew (AI), 2026-08-01 09:10, inactive tabs are now on the light sky backdrop, not the blue navbar,
       so white-on-translucent-white was invisible. Solid translucent white with navy text instead. */
    background: rgba(255, 255, 255, 0.55);
    color: #17356E;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.br-tab:hover { background: rgba(255, 255, 255, 0.8); }

.br-tab.is-active { background: #fff; color: #2F6FE0; box-shadow: 0 4px 12px rgba(12, 32, 70, 0.25); }

@media (max-width: 720px) {
    .br-topbar { flex-wrap: wrap; }
    .br-topbar-spacer { display: none; }
    .br-logo img { height: 38px; }
}

/* --- title bar --- */
.br-titlebar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.br-titlewrap { flex: 1; text-align: center; }

.br-title {
    margin: 0;
    font-size: 2.4rem !important;
    font-weight: 700;
    color: #17356E;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.55);
}

.br-title-rule {
    display: inline-block;
    width: 120px;
    height: 5px;
    margin-top: 0.2rem;
    border-radius: 999px;
    background: #FFC53D;
}

.br-titlebar-right { display: flex; align-items: center; gap: 0.6rem; }

.br-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.3rem;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #17356E;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(12, 32, 70, 0.20);
}

.br-pill:hover { background: #EFF6FF; }
.br-back { color: #2F6FE0; }
.br-i-home { color: #F5871F; }
.br-levelpill { cursor: default; font-weight: 400; }

.br-levelbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #EC6BA0;
    color: #fff;
    font-size: 0.95rem;
}

.debugpanel {
    background: silver;
    border-radius: 4px;
    margin-top: 10px;
    opacity: 0.7;
}
/* --- the open book --- */
.br-stage {
    align-items: center;
}

.br-bookframe {
    padding: 14px;
    border-radius: 16px;
    xbackground: linear-gradient(180deg, #2F6FE0 0%, #1F4FA8 100%);
    box-shadow: 0 20px 45px rgba(12, 32, 70, 0.40);
}

/* the two reader columns become facing pages */
.br-bookframe .right-gradient-box,
.br-bookframe .left-gradient-box {
    background: #FDF6E3;
    border: 0 !important;
    min-height: 520px;
}

.br-bookframe .right-gradient-box {
    border-radius: 10px 4px 4px 10px;
    box-shadow: inset -14px 0 22px -14px rgba(90, 60, 20, 0.45);
}

.br-bookframe .left-gradient-box {
    border-radius: 4px 10px 10px 4px;
    box-shadow: inset 14px 0 22px -14px rgba(90, 60, 20, 0.45);
}

.br-bookframe .pagenumberdiv {
    display: flex;
    justify-content: flex-end;
    padding: 0 1rem 0.75rem;
}

.br-bookframe .pagenumberdiv p {
    margin: 0;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    background: #fff;
    color: #17356E;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(12, 32, 70, 0.18);
}

/* --- page turn controls --- */
.br-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.br-nav-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #EC5A72;
    color: #fff;
    font-size: 1.7rem;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(12, 32, 70, 0.35);
    transition: transform .15s;
}

.br-nav:hover .br-nav-circle { transform: scale(1.06); }
.br-nav:active .br-nav-circle { transform: scale(0.96); }

.br-nav-label { font-size: 1rem; font-weight: 700; color: #17356E; }

/* --- bottom toolbar --- */
.br-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 780px;
    margin: 1.25rem auto 0;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 26px rgba(12, 32, 70, 0.25);
}

.br-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #17356E;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.br-tool:hover { background: #EFF6FF; }

.br-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
}

/* Matthew (AI), 2026-08-01 13:39, favourite toggle. Outline heart on a soft pink chip when not saved; solid
   white heart on full pink once it is, so the state reads at a glance. */
.br-t-fav { background: #FDE6EF; color: #EC5A8B; }
.br-tool-fav.is-fav .br-t-fav { background: #EC5A8B; color: #fff; }
.br-tool-fav.is-fav { color: #D63C72; }

.br-t-lang { background: #2F6FE0; }
.br-t-listen { background: #35A853; }
.br-t-listen2 { background: #8B5CF6; }
.br-t-alert { background: #F5871F; }

.br-tool-sep { width: 1px; height: 30px; background: #E2E8F2; }

.br-tool-font { gap: 0.5rem; cursor: default; }

.br-fontbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #2F6FE0;
    color: #fff;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.br-fontbtn:hover { background: #1F4FA8; }

@media (max-width: 900px) {
    .br-titlebar { flex-wrap: wrap; }
    .br-title { font-size: 1.7rem !important; }
    .br-nav-circle { width: 54px; height: 54px; font-size: 1.2rem; }
}

/* Matthew (AI), 2026-08-01 09:10, /bookread quiz + ratings panels. Card chrome matching the /avatar panels
   (.av-card), applied only under kidstheme so the other four apps that render BookRead are unaffected. */
.br-panel {
    max-width: 900px;
    margin: 0 auto 1rem;
    padding: 1.75rem 2rem 2rem;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #E8EEF7;
    box-shadow: 0 12px 30px rgba(12, 32, 70, 0.22);
    color: #22304d;
}

/* the panel is a bootstrap .row; keep its children in normal flow rather than as grid columns */
.br-panel > h2,
.br-panel > p { width: 100%; }

.br-panel h2 {
    margin: 0 0 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #17356E;
    line-height: 1.3;
}

/* --- quiz (Matthew (AI), 2026-08-01 09:10, rebuilt to the quiz mockup) --- */
/* [hidden] loses to display:flex/grid on these elements, so restore it explicitly */
.br-quiz [hidden] { display: none !important; }

.br-quiz-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}

.br-quiz-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #8B5CF6;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.br-quiz-head h2 { margin: 0; font-size: 2rem; }

.br-quiz-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 1.5rem 0.25rem;
}

.br-quiz-steps { display: flex; align-items: center; gap: 0; }

.br-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid #E2E2EA;
    background: #fff;
    color: #5B6B80;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.br-step-link {
    width: 34px;
    height: 0;
    border-top: 3px dashed #C9C9D6;
}

/* quiz state classes come from the component: btn-info = current, success/danger = marked */
.br-step.btn-info { background: #8B5CF6; border-color: #8B5CF6; color: #fff; }
.br-step.btn-success { background: #35A853; border-color: #35A853; color: #fff; }
.br-step.btn-danger { background: #EF5A5A; border-color: #EF5A5A; color: #fff; }

.br-checkbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2rem;
    border: none;
    border-radius: 999px;
    background: #FFD34E;
    color: #6B4E00;
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 0 #E0AE1B;
}

.br-checkbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #E0AE1B; }
.br-checkbtn.btn-success { background: #4ED07A; color: #10461F; box-shadow: 0 5px 0 #2F9B53; }

/* --- the question --- */
.br-question {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.5rem 1.75rem;
    border-radius: 16px;
    background: #F5F6FC;
}

.br-question-text {
    flex: 1;
    min-width: 12rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #17356E;
    line-height: 1.3;
}

.br-listen {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: 12px;
    background: #fff;
    color: #2F6FE0;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(12, 32, 70, 0.12);
}

.br-listen:hover { background: #EFF6FF; }

/* --- answers --- */
.br-answer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-radius: 16px;
    border: 2px solid #EDEDF5;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, transform .15s;
}

.br-answer:hover { border-color: #C9BDF5; transform: translateY(-1px); }

.br-answer-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid #B9A6F2;
    color: #7C3AED;
    font-size: 1.25rem;
    font-weight: 700;
}

.br-answer-text {
    flex: 1;
    font-size: 1.35rem;
    font-weight: 700;
    color: #22304d;
    line-height: 1.35;
}

.br-answer-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #EFF4FF;
    color: #2F6FE0;
    cursor: pointer;
}

.br-answer-play:hover { background: #DCE8FF; }

/* selected / marked states, driven by the component's @ansN classes */
.br-answer.btn-info { border-color: #8B5CF6; background: #F5F0FF; }
.br-answer.btn-info .br-answer-letter { background: #8B5CF6; border-color: #8B5CF6; color: #fff; }

.br-answer.btn-success { border-color: #35A853; background: #EFFAF1; }
.br-answer.btn-success .br-answer-letter { background: #35A853; border-color: #35A853; color: #fff; }

.br-answer.btn-danger { border-color: #EF5A5A; background: #FDF0F0; }
.br-answer.btn-danger .br-answer-letter { background: #EF5A5A; border-color: #EF5A5A; color: #fff; }

@media (max-width: 720px) {
    .br-quiz-head h2 { font-size: 1.5rem; }
    .br-question-text { font-size: 1.25rem; }
    .br-answer-text { font-size: 1.1rem; }
    .br-step-link { width: 18px; }
}

/* --- ratings: see .br-rate block below (Matthew (AI), 2026-08-01 09:10) --- */

@media (max-width: 900px) {
    .br-panel { padding: 1.25rem 1rem 1.5rem; }
    .br-panel h2 { font-size: 1.3rem; }
    .br-panel-rating .col-3 { margin-bottom: 0.5rem; }
}

/* Matthew (AI), 2026-08-01 09:10, /bookread ratings panel - styled to the rating mockup */
.br-rate-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.br-rate-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #FFF3D6;
    color: #F5B72E;
    font-size: 1.9rem;
}

.br-rate-head h2 { margin: 0 0 0.15rem; font-size: 2rem; }
.br-rate-sub { margin: 0; font-size: 1.1rem; color: #4A6FA5; }

.br-rate-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    margin-bottom: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 18px;
}

.br-rate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    font-size: 1.6rem;
    box-shadow: 0 3px 10px rgba(12, 32, 70, 0.14);
}

.br-rate-q {
    flex: 0 0 13rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #17356E;
    line-height: 1.3;
}

.br-rate-slider { flex: 1; min-width: 16rem; }

/* worded stops under the slider, aligned to the three tick positions */
.br-rate-scale {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.95rem;
    color: #3E4C5E;
}

.br-rate-scale span { flex: 1; text-align: center; }
.br-rate-scale span:first-child { text-align: left; }
.br-rate-scale span:last-child { text-align: right; }

/* per-question tints, matching the mockup */
.br-rate-like { background: #EEF5FF; }
.br-rate-like .br-rate-icon { color: #EF5A5A; }

.br-rate-interest { background: #EFF8F1; }
.br-rate-interest .br-rate-icon { color: #F5B72E; }

.br-rate-learn { background: #F3F0FC; }
.br-rate-learn .br-rate-icon { color: #F5B72E; }

/* the Telerik slider inside a rating row */
.br-rate-slider .k-slider { width: 100% !important; }
.br-rate-slider .k-slider .k-slider-track { background-color: #D6DBE4; }
.br-rate-slider .k-slider .k-slider-selection { background-color: #2F6FE0; }

.br-rate-slider .k-slider .k-draghandle {
    background-color: #2F6FE0;
    border-color: #fff;
    border-width: 3px;
    border-radius: 50%;
}

/* Matthew (AI), 2026-08-01 09:10, faces moved above the track. Telerik draws LabelTemplate content below the
   slider, which overlapped the worded stops - so the template is emptied and its label row collapsed here,
   and the icons are rendered as their own row on the same 3-stop grid as .br-rate-scale. */
.br-rate-icons {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    line-height: 1;
}

.br-rate-icons span { flex: 1; text-align: center; }
.br-rate-icons span:first-child { text-align: left; }
.br-rate-icons span:last-child { text-align: right; }

.br-rate-icons .fa-big { font-size: 1.75rem; }

/* collapse Telerik's own tick-label row (now an empty span) so it reserves no space */
.br-rate-slider .k-slider .k-slider-items,
.br-rate-slider .k-slider .k-label { display: none !important; }

.br-rate-nolabel { display: none !important; }

.br-rate-submit-wrap { text-align: center; margin-top: 1.5rem; }

.br-rate-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 2.5rem;
    border: none;
    border-radius: 999px;
    background: #FFD34E;
    color: #6B4E00;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 0 #E0AE1B;
}

.br-rate-submit:active { transform: translateY(3px); box-shadow: 0 2px 0 #E0AE1B; }

.br-rate-thanks {
    margin: 0.85rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #35A853;
}

@media (max-width: 900px) {
    .br-rate-q { flex: 1 1 100%; }
    .br-rate-head h2 { font-size: 1.5rem; }
}

/* Matthew (AI), 2026-08-01 09:34, unauthenticated home page (/) - dashboard-style backdrop + cards */
.home-page {
    /* break out of MainLayout's .container so the scene is full-bleed under the navbar */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.75rem 2rem 2.5rem;
    background-image: url('/img/backgrounds/background-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Andika', 'Nunito', sans-serif;
}

.home-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1240px;
    margin: 0 auto 1.75rem;
    padding: 1.5rem 2rem;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(223, 241, 251, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow: 0 14px 34px rgba(12, 32, 70, 0.25);
}

.home-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    border-radius: 22px;
    background: #FFF3D6;
    border: 3px solid #F5C542;
    color: #E8890C;
    font-size: 2rem;
    box-shadow: 0 6px 16px rgba(12, 32, 70, 0.18);
}

.home-h1 {
    margin: 0 0 0.2rem;
    font-size: 2.8rem;
    font-weight: 700;
    color: #17356E;
}

.home-sub { margin: 0; font-size: 1.2rem; color: #2F4763; }

.home-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    max-width: 1240px;
    margin: 0 auto;
}

.home-card {
    padding: 1.5rem 1.75rem 1.75rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(12, 32, 70, 0.25);
}

.home-card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #17356E;
}

.home-i-books { color: #35A853; }
.home-i-byob { color: #8B5CF6; }

.home-card-text { font-size: 1.05rem; color: #3E4C5E; margin: 0 0 1rem; }

.home-byob { display: flex; flex-direction: column; }

.home-byob-img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin-bottom: 1.25rem;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: auto;
    padding: 0.8rem 1.9rem;
    border-radius: 999px;
    background: #8B5CF6;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 0 #6A43C4;
}

.home-btn:hover { color: #fff; background: #7C4DE8; }
.home-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #6A43C4; }

.home-ack {
    max-width: 1240px;
    margin: 1.5rem auto 0;
    padding: 1rem 1.75rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    color: #3E4C5E;
    box-shadow: 0 8px 20px rgba(12, 32, 70, 0.18);
}

/* the sample-reader grid sits inside a card, so it needs no backdrop of its own */
.home-card .lib-grid-wrap .k-listview-content {
    grid-template-columns: repeat(auto-fill, minmax(0, 200px));
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .home-page { padding: 1.25rem 1rem 2rem; }
    .home-grid { grid-template-columns: 1fr; }
    .home-hero { flex-wrap: wrap; }
    .home-h1 { font-size: 2rem; }
}

/* Matthew (AI), 2026-08-01 09:34, /login and /signup - landscape two-column layout per the revised mockup */
.lg-page {
    /* break out of MainLayout's .container; the navbar is hidden on this route (chromeless) */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    /* Matthew (AI), 2026-08-01 09:34, scene moved up from .lg-shell so it covers the whole viewport rather than
       sitting inside a rounded frame. The shell is now just an invisible centring grid over the top. */
    background-image: url('/img/backgrounds/background-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Andika', 'Nunito', sans-serif;
}

.lg-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*  Matthew (AI), 2026-08-16 13:40, stretch, not center - the two panels are now cards and a card
        that stops short of its neighbour looks like a mistake rather than a choice. "center" sized each
        column to its own content and centred it in the row; "stretch" makes both fill the row, whose
        height is whichever panel is taller. The hero centres its own content vertically to compensate,
        so the shorter one does not end up as a tall box with everything bunched at the top. */
    align-items: stretch;
    gap: 1.5rem;
    width: 100%;
    max-width: 1180px;
    padding: 2rem;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* --- left: welcome panel over the scene --- */
/*  Matthew (AI), 2026-08-16 13:15, the welcome panel is now a card, not text floating on the photo.

    It previously sat transparent directly on background-1.jpg, which left the logo and artwork
    blending into whatever happened to be behind them - and the only thing holding the heading
    together was a text-shadow on .lg-title propping it up against the picture. Matching .lg-form's
    radius, fill and shadow makes the two columns read as a pair rather than as a card next to some
    loose text. */
.lg-hero {
    padding: 2rem 2.25rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 14px 34px rgba(12, 32, 70, 0.25);
    /*  Matthew (AI), 2026-08-16 13:40, flex column so the contents sit in the middle of whatever
        height the grid hands this panel. align-items:flex-start keeps the logo and heading left where
        they were - the default stretch would widen the logo anchor to the full panel width. The rule,
        blurb and artwork already centre themselves with auto margins on mobile, and auto margins work
        the same way on a flex cross axis, so that layout is unaffected. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.lg-logo { display: inline-block; margin-bottom: 1.25rem; }
.lg-logo img { height: 56px; width: auto; display: block; }

.lg-title {
    margin: 0;
    font-size: 3.2rem;
    font-weight: 700;
    color: #17356E;
    line-height: 1.05;
    /*  Matthew (AI), 2026-08-16 13:15, text-shadow dropped with the white panel behind it. A white
        glow existed to lift the heading off the photograph; over white it only softens the edges. */
}

.lg-rule {
    display: block;
    width: 150px;
    height: 6px;
    margin: 0.5rem 0 1rem;
    border-radius: 999px;
    background: #FFC53D;
}

.lg-blurb {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    line-height: 1.45;
    color: #2F4763;
}

.lg-art {
    display: block;
    width: 80%;
    max-width: 240px;
    height: auto;
}

/*  Matthew (AI), 2026-08-23 05:02, the adult-facing footer, moved out of the form card.

    Holds the "New to Litzi?" divider, the "ask your teacher" pill and the Safe & Secure panel. They
    were below the Login button and made the right-hand card too tall; none of it is part of signing
    in, so the left panel is where it belongs.

    ⚠️ align-self:stretch IS LOAD-BEARING. .lg-hero is a flex column with align-items:flex-start, so
    children are sized to their own content - and .lg-divider draws its two rules with flex:1
    pseudo-elements, which have nothing to divide up at content width and collapse to zero. Stretching
    the wrapper fixes all three children at once, and it also overrides the align-items:center the
    900px breakpoint puts on the hero, so the pill stays full width on a phone instead of shrinking.

    text-align:left is for that same breakpoint: the mobile hero centres its text, which would centre
    the Safe & Secure copy against its own left-hand icon. The pill centres itself via its own
    justify-content and is unaffected. */
.lg-hero-aside {
    align-self: stretch;
    text-align: left;
}

/*  The three blocks inside .lg-hero-aside. Matthew (AI), 2026-08-23 05:02, moved here verbatim from
    the form-card section further down - the rules are unchanged, only their neighbours are. */

.lg-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.5rem 0 1rem;
    color: #5B6B80;
    font-size: 1rem;
}

/*  The two rules either side of the label. flex:1 is why the wrapper has to stretch - at content
    width there is nothing for these to share out and they vanish. */
.lg-divider::before,
.lg-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E2E8F2;
}

.lg-newhere {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border: 2px solid #BFD6FA;
    border-radius: 999px;
    color: #2F6FE0;
    font-size: 1.1rem;
    font-weight: 700;
}

/*  Matthew (AI), 2026-08-27 08:49, "Try our sample tests" - sits directly under .lg-newhere.

    FILLED, WHERE THE PILL ABOVE IS OUTLINED, AND THAT IS THE WHOLE POINT. The two are deliberately
    the same shape and width so they read as a pair, and deliberately different weights so it is
    obvious which one you can click: .lg-newhere is guidance and is not a link at all (see the note
    on it in Login.razor), this is the only thing on that side of the page a visitor can act on.

    It must NOT out-shout .lg-login in the form card. That is the primary action, and it wins on
    three counts at once - bigger type, a heavier 5px drop shadow, and the green that is used
    nowhere else on the page. This is blue, flat, and a step smaller, which puts it clearly second
    without making it look disabled.

    margin-top matches the .lg-secure gap below it so the aside keeps an even rhythm. */
.lg-sample {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.8rem 1rem;
    border: 2px solid #2F6FE0;
    border-radius: 999px;
    background: #2F6FE0;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .1s;
}

/*  :hover and :focus-visible together - the keyboard path has to show the same affordance as the
    mouse one, and on a touch screen neither fires, which is why the resting state is already a
    filled button rather than something that only looks clickable once you point at it. */
.lg-sample:hover,
.lg-sample:focus-visible {
    background: #2559BD;
    border-color: #2559BD;
    color: #fff;
    text-decoration: none;
}

.lg-sample:active { transform: translateY(1px); }

.lg-secure {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: #F6F3FE;
}

.lg-secure-icon { color: #8B5CF6; font-size: 1.5rem; line-height: 1.2; }
.lg-secure-title { margin: 0 0 0.15rem; font-size: 1.05rem; font-weight: 700; color: #7C3AED; }
.lg-secure-sub { margin: 0; font-size: 0.95rem; color: #5B6B80; line-height: 1.35; }

/* --- right: form card --- */
.lg-form {
    padding: 2rem 2.25rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 14px 34px rgba(12, 32, 70, 0.25);
}

.lg-form-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.lg-form-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #EFE9FC;
    color: #8B5CF6;
    font-size: 1.5rem;
}

.lg-form-title { margin: 0; font-size: 1.8rem; font-weight: 700; color: #17356E; }

/* --- fields --- */
.lg-field {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
    padding: 0.65rem 1rem;
    border-radius: 14px;
    border: 2px solid #E6E6F5;
    background: #FBFBFF;
    text-align: left;
}

.lg-field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    font-size: 1.45rem;
}

.lg-i-user { color: #8B5CF6; }
.lg-i-lock { color: #2F6FE0; }

.lg-field-body { flex: 1; min-width: 0; display: block; }

.lg-field-label {
    display: block;
    margin-bottom: 0.05rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #7C3AED;
}

.lg-field:nth-of-type(2) .lg-field-label { color: #2F6FE0; }

/* strip the Telerik textbox chrome so the input sits inside the tinted field */
.lg-field .k-textbox,
.lg-field .k-input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.lg-field .k-input-inner {
    padding: 0 !important;
    font-size: 1.15rem;
    color: #22304d;
    background: transparent;
}

.lg-reveal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 2px solid #E6E6F5;
    border-radius: 50%;
    background: #fff;
    color: #2F6FE0;
    font-size: 1rem;
    cursor: pointer;
}

.lg-reveal:hover { background: #EFF6FF; }

/* --- actions --- */
.lg-row {
    display: flex;
    justify-content: flex-end;
    margin: 0.35rem 0 1rem;
}

.lg-forgot { color: #2F6FE0; font-size: 1.05rem; text-decoration: none; }
.lg-forgot:hover { text-decoration: underline; }

.lg-login {
    display: block;
    width: 100%;
    padding: 0.9rem 1rem;
    border: none;
    border-radius: 999px;
    background: #23A566;
    color: #fff;
    font-family: inherit;
    font-size: 1.35rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 0 #1A7D4D;
}

.lg-login:hover { background: #1F945B; }
.lg-login:active { transform: translateY(3px); box-shadow: 0 2px 0 #1A7D4D; }

/*  Matthew (AI), 2026-08-23 05:02, .lg-divider / .lg-newhere / .lg-secure used to be defined here.
    They moved up to the left-panel block with .lg-hero-aside when the markup did - leaving them
    filed under "right: form card" would have been a lie about where they are used. */

/*  Matthew (AI), 2026-08-22 19:35, emoji sign-in.

    Sized for a seven-year-old on a school tablet, which is the whole reason this feature exists.
    Everything is touch-first - no hover-only affordances, because on the devices this runs on there
    is no hover.

    Matthew (AI), 2026-08-23 05:02, TIGHTENED - the block was pushing the password field and the sign
    in button below the fold on a laptop, and a child who cannot see the button cannot finish.

    ⚠️ 44px IS THE FLOOR AND IT IS NOT NEGOTIABLE. Below about that a child's tap lands on the
    neighbouring picture, and a mis-tap here is a failed login they have no way to diagnose. The cells
    used to be ~88px on desktop; they are now ~54px, still comfortably clear of the floor. Anyone
    changing this has to re-measure rather than assume there is room left - the arithmetic lives on
    .lg-emoji-grid, whose track minimum is what actually decides the cell size. */

.lg-mode {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/*  Matthew (AI), 2026-08-23 05:02, icon BESIDE the label rather than stacked above it. Two lines of
    button cost ~28px of height for no added clarity - the pair still reads as two big targets, and
    the button itself stays well over the 44px tap floor. */
.lg-mode-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.5rem;
    border: 2px solid #E3E8F0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.lg-mode-btn:hover { border-color: #C7D2FE; }

/*  The selected mode is marked with colour AND weight, not colour alone - a colour-blind child (or a
    washed-out projector-lit classroom screen) needs the second signal. */
.lg-mode-btn.is-on {
    border-color: #7C3AED;
    background: #F5F3FF;
}

.lg-mode-emoji { font-size: 1.15rem; line-height: 1; color: #7C3AED; }
.lg-mode-text { font-size: 0.88rem; font-weight: 600; color: #3F4A5A; }
.lg-mode-btn.is-on .lg-mode-text { font-weight: 800; color: #7C3AED; }

.lg-emoji-wrap { margin-bottom: 0.75rem; }

.lg-emoji-help {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #5B6B80;
}

/*  The chosen sequence. Fixed-size slots so the row does not jump about as pictures are added - a
    layout that reflows under a child's finger causes the next tap to miss. */
.lg-emoji-picked {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

/*  Matthew (AI), 2026-08-23 05:02, 52px -> 42px. These slots are READ, not tapped - undo is a
    separate button - so the 44px tap floor that governs the grid does not apply to them. They only
    have to be big enough for a child to compare against the card in their hand. */
.lg-emoji-slot {
    width: 42px;
    height: 42px;
    border: 2px dashed #D8DEE9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFBFD;
}

.lg-emoji-slot.is-filled {
    border-style: solid;
    border-color: #7C3AED;
    background: #F5F3FF;
}

.lg-emoji-slot img { width: 32px; height: 32px; }

.lg-emoji-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.lg-emoji-undo,
.lg-emoji-clear {
    padding: 0.4rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid #D8DEE9;
    border-radius: 8px;
    background: #fff;
    color: #5B6B80;
    cursor: pointer;
}

.lg-emoji-undo:disabled,
.lg-emoji-clear:disabled { opacity: .45; cursor: default; }

/*  The 20 pictures, wrapped to whatever the container will take.

    Matthew (AI), 2026-08-23 05:02, ⚠️ THE TRACK MINIMUM IS WHAT SETS THE CELL SIZE, and it is the
    only number here worth arguing about. The cells have no dimensions of their own: tracks are 1fr
    and .lg-emoji-cell is aspect-ratio 1/1, so cell HEIGHT falls out of the container's WIDTH.
    Shrinking the images would do nothing at all - they are width:100% of whatever this rule decides.

    48px is measured, not guessed, against the two widths that actually occur - ~474px for the form
    column on desktop (.lg-shell 1180 max, two columns, minus .lg-form's 2.25rem padding) and ~280px
    on a 360px phone:

                        desktop 474px          phone 280px
        min 44/46px     9 across, 47.0px       5 across, 50.9px      cells too near the floor
        min 48px        8 across, 53.6px       5 across, 50.9px      <- this
        min 52px        8 across, 53.6px       4 across, 65.2px      costs a WHOLE EXTRA ROW on phones

    ⚠️ Note what 52px does: bigger minimum, fewer columns, five rows instead of four, and the block
    gets TALLER on the device with the least room. Raising this number is not the safe direction.

    Height on desktop goes 378px -> 174px; phones stay at ~223px, which is what the fixed 5-across
    layout already gave them. Cells stay above the 44px tap floor everywhere in between.

    ⚠️ THIS GIVES UP A FIXED COLUMN COUNT, deliberately, on request. The previous 5-across grid meant
    "mine is the second one on the top row" stayed true on every device; it no longer does. What does
    survive is the ORDER - the pictures are still 1..20 left to right, top to bottom, so a child
    scanning for theirs meets them in the same sequence and only the wrapping moves. If positional
    memory turns out to matter more than the height, this is the line to revert. */
.lg-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 0.4rem;
}

.lg-emoji-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border: 2px solid #E3E8F0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: transform .1s, border-color .15s, background .15s;
}

.lg-emoji-cell img { width: 100%; height: 100%; object-fit: contain; }

/*  Immediate physical feedback on press. On a tablet there is no hover state to confirm the tap
    registered, and without this a child taps twice - which, with second-tap-removes, would undo the
    pick they just made. */
.lg-emoji-cell:active { transform: scale(0.92); }

.lg-emoji-cell.is-picked {
    border-color: #7C3AED;
    background: #F5F3FF;
}

/*  Chosen pictures stay full strength - they are still readable and still tappable to undo. Only the
    ones locked out once five are chosen are dimmed. */
.lg-emoji-cell:disabled { opacity: .3; cursor: default; }

@media (max-width: 420px) {
    /*  Matthew (AI), 2026-08-23 05:02, the slot overrides that used to sit here are gone. They shrank
        52px to 44px, but the base is 42px now, so they had inverted into making the picked row LARGER
        on the narrowest screens. 42px fits a 360px phone unaided; only the gaps still need closing. */
    .lg-emoji-grid { gap: 0.3rem; }
    .lg-emoji-picked { gap: 0.3rem; }
}

@media (max-width: 900px) {
    .lg-shell { grid-template-columns: 1fr; padding: 1.25rem; }
    /*  Matthew (AI), 2026-08-16 13:40, align-items follows the text-align once stacked. The hero is a
        flex column now, so text-align alone no longer centres the logo - it is a flex item, and
        flex-start would pin it to the left of a centred panel. */
    .lg-hero { text-align: center; align-items: center; }
    .lg-rule { margin-left: auto; margin-right: auto; }
    .lg-blurb { margin-left: auto; margin-right: auto; }
    .lg-art { max-width: 220px; margin: 0 auto; }
    .lg-title { font-size: 2.2rem; }
    /* Matthew (AI), 2026-08-16 13:15, the hero is a card now, so it takes the same tightened
       padding as the form once the two columns stack. */
    .lg-hero { padding: 1.5rem 1.25rem; }
    .lg-form { padding: 1.5rem 1.25rem; }
}

/* Matthew (AI), 2026-08-01 09:34, Blazored Toast restyled to match the dashboard logout dialog (.dash-logout-card)
   - white rounded card, deep soft shadow, navy text, Andika. LitziKids only; the other four apps that render
   BlazoredToasts keep the stock look because these rules live in naplansite.css.
   Selectors are prefixed with .blazored-toast-container so they outrank Blazored's own scoped CSS, which the
   Razor SDK compiles to `.blazored-toast[b-xxxxx]` (specificity 0,2,0) inside LitziKids.styles.css. */
.blazored-toast-container {
    padding: 1.25rem;
    gap: 0.75rem;
}

.blazored-toast-container .blazored-toast {
    align-items: center;
    width: 22rem;
    margin-bottom: 0.9rem;
    padding: 1.1rem 1.35rem;
    border-radius: 20px;
    /* the stock look is a 6px slab across the top; a left accent sits better on a rounded card */
    border-top: none;
    border-left: 7px solid #C7D9F7;
    background: #fff;
    color: #22304d;
    font-family: 'Andika', 'Nunito', sans-serif;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.blazored-toast-container .blazored-toast-message {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
    color: #22304d;
}

.blazored-toast-container .blazored-toast-icon {
    justify-content: center;
    padding-right: 1rem;
    font-size: 1.5rem;
}

/* --- level accents --- */
.blazored-toast-container .blazored-toast-info { border-left-color: #2F6FE0; }
.blazored-toast-container .blazored-toast-info .blazored-toast-icon { color: #2F6FE0; }

/* Matthew (AI), 2026-08-01 09:34, MainLayout sets SuccessClass="success-toast-override", which REPLACES the
   default blazored-toast-success class - and that class was never defined anywhere in the solution, so success
   toasts had no accent colour at all. Defined here (both names, so it survives either setting). */
.blazored-toast-container .blazored-toast-success,
.blazored-toast-container .success-toast-override { border-left-color: #23A566; }
.blazored-toast-container .blazored-toast-success .blazored-toast-icon,
.blazored-toast-container .success-toast-override .blazored-toast-icon { color: #23A566; }

.blazored-toast-container .blazored-toast-warning { border-left-color: #F5A623; }
.blazored-toast-container .blazored-toast-warning .blazored-toast-icon { color: #F5A623; }

.blazored-toast-container .blazored-toast-error { border-left-color: #EF5A5A; }
.blazored-toast-container .blazored-toast-error .blazored-toast-icon { color: #EF5A5A; }

/* --- close button, echoing the login page's round icon button --- */
.blazored-toast-container .blazored-toast-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid #E6E6F5;
    border-radius: 50%;
    background: #fff;
    color: #5B6B80;
    cursor: pointer;
}

.blazored-toast-container .blazored-toast-close:hover { background: #EFF6FF; color: #2F6FE0; }

/* --- progress bar, rounded and tinted to the level --- */
.blazored-toast-container .blazored-toast-progressbar {
    height: 5px;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: #EDF1F7;
    overflow: hidden;
}

.blazored-toast-container .blazored-toast-progressbar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #2F6FE0;
}

.blazored-toast-container .blazored-toast-success .blazored-toast-progressbar span,
.blazored-toast-container .success-toast-override .blazored-toast-progressbar span { background: #23A566; }
.blazored-toast-container .blazored-toast-warning .blazored-toast-progressbar span { background: #F5A623; }
.blazored-toast-container .blazored-toast-error .blazored-toast-progressbar span { background: #EF5A5A; }

@media (max-width: 560px) {
    .blazored-toast-container .blazored-toast { width: auto; max-width: 92vw; }
}

/* Matthew (AI), 2026-08-01 09:34, kid-friendly Bootstrap alerts, matching the toast / logout-dialog language
   (rounded card, left level accent, Andika, navy text). LitziKids only - these live in naplansite.css, so the
   other apps keep stock Bootstrap alerts.
   Selectors are prefixed with `body` deliberately: sb-admin-2.min.css redefines .alert (padding, border,
   border-radius) and is linked AFTER naplansite.css in _Host.cshtml, so a bare `.alert` rule would lose the tie.
   `body .alert` is 0,1,1 and wins regardless of order. */
body .alert {
    position: relative;
    padding: 1.1rem 1.35rem;
    margin-bottom: 1rem;
    border: none;
    border-left: 7px solid #C7D9F7;
    border-radius: 18px;
    background: #F7FAFF;
    color: #22304d;
    font-family: 'Andika', 'Nunito', sans-serif;
    font-size: 1.05rem;
    line-height: 1.45;
    box-shadow: 0 6px 18px rgba(12, 32, 70, 0.14);
}

body .alert h1, body .alert h2, body .alert h3,
body .alert h4, body .alert h5, body .alert .alert-heading {
    margin-top: 0;
    color: #17356E;
    font-weight: 700;
}

body .alert p:last-child { margin-bottom: 0; }

body .alert a, body .alert .alert-link { color: #2F6FE0; font-weight: 700; }

/* --- level accents, same palette as the toasts --- */
body .alert-success {
    border-left-color: #23A566;
    background: #EFFAF3;
    color: #14532d;
}

body .alert-info,
body .alert-primary {
    border-left-color: #2F6FE0;
    background: #EFF6FF;
    color: #17356E;
}

body .alert-warning {
    border-left-color: #F5A623;
    background: #FFF8EC;
    color: #6B4E00;
}

body .alert-danger {
    border-left-color: #EF5A5A;
    background: #FDF0F0;
    color: #7A1F1F;
}

body .alert-secondary,
body .alert-light,
body .alert-dark {
    border-left-color: #B9C3D4;
    background: #F5F7FA;
    color: #3E4C5E;
}

/* dismiss button, echoing the toast close control */
body .alert-dismissible { padding-right: 3.5rem; }

body .alert-dismissible .btn-close,
body .alert-dismissible .close {
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    opacity: 1;
}

body .alert-dismissible .btn-close:hover,
body .alert-dismissible .close:hover { background-color: #fff; }

/* Matthew (AI), 2026-08-01 13:39, pink variant of the library header badge, used on /favourites */
.lib-head-fav {
    background: #FDE6EF;
    border-color: #EC5A8B;
    color: #EC5A8B;
}

/* Matthew (AI), 2026-08-01 13:39, empty state for the library-themed book grids (/favourites, /library,
   /discover). Mirrors the /avatar panels (.av-card) so it reads as a card on the scene backdrop rather
   than loose text. */
.lib-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 860px;
    margin: 0 auto;
    padding: 2.25rem 2.5rem;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #E8EEF7;
    box-shadow: 0 12px 30px rgba(12, 32, 70, 0.22);
    font-family: 'Andika', 'Nunito', sans-serif;
}

.lib-empty-text { flex: 1 1 18rem; min-width: 0; }

.lib-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 0.85rem;
    border-radius: 50%;
    background: #FDE6EF;
    color: #EC5A8B;
    font-size: 1.6rem;
}

.lib-empty h3 {
    margin: 0 0 0.6rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #17356E;
}

.lib-empty p {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    line-height: 1.45;
    color: #3E4C5E;
}

.lib-empty p:last-child { margin-bottom: 0; }

.lib-empty-img {
    flex: 0 1 260px;
    max-width: 260px;
    height: auto;
}

/* the non-favourites empty state (library / discover) keeps the blue book badge */
.lib-grid-wrap .lib-empty .lib-empty-icon:has(.fa-book-open) {
    background: #EFF6FF;
    color: #2F6FE0;
}

@media (max-width: 720px) {
    .lib-empty { padding: 1.5rem 1.25rem; gap: 1.25rem; text-align: center; }
    .lib-empty-icon { margin-left: auto; margin-right: auto; }
    .lib-empty-img { flex-basis: 180px; max-width: 180px; margin: 0 auto; }
}

/* Matthew (AI), 2026-08-01 13:39, /achievements stat cards */
.lib-head-ach { background: #FFF3D6; border-color: #F5C542; color: #E8890C; }

.ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 1240px;
    margin: 0 auto;
}

.ach-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.25rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #E8EEF7;
    box-shadow: 0 12px 30px rgba(12, 32, 70, 0.22);
    font-family: 'Andika', 'Nunito', sans-serif;
}

.ach-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 0.85rem;
    border-radius: 50%;
    font-size: 1.8rem;
}

.ach-number {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.05;
    color: #17356E;
}

.ach-label {
    margin-top: 0.25rem;
    font-size: 1.1rem;
    color: #3E4C5E;
}

/* one colour per statistic, reusing the palette from the dashboard cards */
.ach-books .ach-icon { background: #FDF1E3; color: #E8790C; }
.ach-pages .ach-icon { background: #EFF6FF; color: #2F6FE0; }
.ach-fav   .ach-icon { background: #FDE6EF; color: #EC5A8B; }
.ach-games .ach-icon { background: #F2F7E9; color: #4CAF50; }
.ach-tried .ach-icon { background: #F3EDFC; color: #8B5CF6; }
.ach-quiz  .ach-icon { background: #E9F6F4; color: #26A69A; }

.ach-nudge {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1240px;
    margin: 1.5rem auto 0;
    padding: 1.25rem 1.5rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #E8EEF7;
    box-shadow: 0 8px 20px rgba(12, 32, 70, 0.18);
    font-family: 'Andika', 'Nunito', sans-serif;
}

.ach-nudge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #FFF3D6;
    color: #F5B72E;
    font-size: 1.5rem;
}

.ach-nudge-title { margin: 0 0 0.15rem; font-size: 1.2rem; font-weight: 700; color: #17356E; }
.ach-nudge-sub { margin: 0; font-size: 1rem; color: #3E4C5E; }

@media (max-width: 720px) {
    .ach-number { font-size: 2.2rem; }
    .ach-card { padding: 1.25rem 1rem; }
}

/* Matthew (AI), 2026-08-02 09:00, "please log in" prompt on the signed-out home page */
.home-clickable { cursor: pointer; transition: transform .15s; }
.home-clickable:hover { transform: scale(1.02); }

.home-prompt {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 30, 60, 0.5);
}

.home-prompt-card {
    max-width: 26rem;
    padding: 2rem 2.25rem 1.75rem;
    border-radius: 26px;
    background: #fff;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    font-family: 'Andika', 'Nunito', sans-serif;
    color: #22304d;
}

.home-prompt-icon { font-size: 3rem; line-height: 1; }

.home-prompt-card h3 {
    margin: 0.6rem 0 0.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #17356E;
}

.home-prompt-card p { margin: 0 0 1.25rem; font-size: 1.1rem; line-height: 1.45; }

.home-prompt-go {
    display: inline-block;
    padding: 0.8rem 2.2rem;
    border-radius: 999px;
    background: #23A566;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 0 #1A7D4D;
}

.home-prompt-go:hover { background: #1F945B; color: #fff; }
.home-prompt-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #1A7D4D; }

.home-prompt-close {
    display: block;
    margin: 0.9rem auto 0;
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #5B6B80;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.home-prompt-close:hover { background: #F1F5FA; }

/* Matthew (AI), 2026-08-02 13:46, small-screen page gutters. With the top navbar halved to 3.25rem
   (see MainLayout.razor) the generous desktop padding on each page wrapper is the next biggest waste
   of vertical space, so every full-bleed page wrapper drops to the same tight box. Deliberately
   placed at the end of the file: .lib-page, .home-page and .gm-page already have padding overrides in
   earlier @media blocks (at 900px, 900px and 720px), and these need to win on document order.
   .dash is the exception - it is chromeless and its left/right gutters are already fluid from the
   900px block, so only its top/bottom are touched here. WhatsNew is still a bootstrap .container stub
   and has no wrapper class of its own yet. */
@media (max-width: 768px) {
    .av-page,          /* /avatar */
    .gm-page,          /* /games */
    .gs-page,          /* individual game shell */
    .lib-page,         /* /library, /favourites, /achievements, /discover */
    .br-page,          /* /bookread */
    .home-page,        /* signed-out / */
    .lg-page {         /* /login */
        padding: 0.75rem 1rem 0.25rem;
    }

    .dash { padding-top: 0.75rem; padding-bottom: 0.75rem; }
}