html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

html, body {
    min-height: 100%;
    margin: 0;
    background: #fbfaff;
    color: #292343;
    font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible, a:focus-visible {
    outline: 4px solid #6d5bd0;
    outline-offset: 4px;
}

.app-shell {
    min-height: 100vh;
}

.learning-app {
    display: flex;
    min-height: 100vh;
    max-width: 1240px;
    flex-direction: column;
    margin: 0 auto;
    padding: 0 48px;
}

.topbar {
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eeebf7;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #332957;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    background: #fff0c1;
    color: #f3a927;
    font-size: 1.35rem;
}

.brand-accent {
    color: #795fe0;
}

.topbar-note, .streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #77718d;
    font-size: 0.88rem;
    font-weight: 700;
}

.streak-pill {
    padding: 10px 15px;
    border: 1px solid #f1e8c9;
    border-radius: 99px;
    background: #fffaf0;
    color: #8c691f;
}

.sound-toggle {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #e7e0f4;
    border-radius: 99px;
    background: #fff;
    color: #716294;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.sound-toggle:hover {
    transform: translateY(-1px);
    border-color: #c9bcef;
    background: #f8f5ff;
}

.sound-toggle[aria-pressed="true"] {
    border-color: #c5e7db;
    background: #effaf5;
    color: #348268;
}

.learning-main {
    flex: 1;
}

.welcome-section {
    position: relative;
    display: flex;
    min-height: 340px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 38px 7.5%;
    border-radius: 0 0 30px 30px;
    background: linear-gradient(110deg, #f1edff 2%, #f8f3ff 56%, #f0fbff 100%);
}

.welcome-copy {
    z-index: 1;
}

.eyebrow {
    color: #8372c7;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.welcome-copy h1, .chapter-heading h1, .ready-card h1, .results-card h1 {
    margin: 13px 0 10px;
    color: #292343;
    font-size: clamp(2.15rem, 4vw, 3.35rem);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 1.08;
}

.gradient-text {
    color: #7960dc;
}

.welcome-copy p, .chapter-heading p, .ready-card > p {
    margin: 12px 0 0;
    color: #77718d;
    font-size: 1.05rem;
}

.welcome-stars {
    margin-top: 21px;
    color: #f4bb4c;
    font-size: 1.45rem;
}

.hero-art {
    position: relative;
    display: grid;
    width: 275px;
    height: 235px;
    flex: 0 0 275px;
    place-items: center;
}

.hero-sun {
    position: absolute;
    width: 205px;
    height: 205px;
    border-radius: 48% 52% 43% 57%;
    background: #fff1bd;
    transform: rotate(-12deg);
}

.hero-book {
    z-index: 1;
    font-size: 7rem;
    filter: drop-shadow(0 13px 10px #d5c9f2);
    animation: book-float 3s ease-in-out infinite;
}

.hero-spark {
    position: absolute;
    z-index: 2;
    color: #ecaa37;
    font-size: 2rem;
    animation: sparkle 2.4s ease-in-out infinite;
}

.spark-one { top: 24px; left: 32px; }
.spark-two { top: 47px; right: 12px; color: #a48fe9; animation-delay: 0.5s; }
.spark-three { bottom: 25px; left: 37px; color: #ef8ca2; animation-delay: 1s; }

.subject-section, .chapter-view, .quiz-view, .results-view {
    padding: 44px 0 58px;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 22px;
}

.section-heading h2 {
    margin: 7px 0 0;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.chapter-count, .question-count {
    color: #908aa5;
    font-size: 0.88rem;
    font-weight: 700;
}

.subject-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.subject-card {
    position: relative;
    display: flex;
    min-height: 166px;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    padding: 25px;
    border: 2px solid transparent;
    border-radius: 23px;
    color: #292343;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.subject-card:hover, .chapter-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px #42346516;
}

.maths-card { border-color: #e7e1ff; background: #f5f2ff; }
.english-card { border-color: #dceff0; background: #f0fbfa; }
.geography-card { border-color: #cfe8ee; background: #effaff; }
.nature-card { border-color: #d7edda; background: #f1fbf2; }
.science-card { border-color: #f0dfc5; background: #fff8ed; }

.subject-icon {
    z-index: 1;
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    border-radius: 22px;
    background: #fff;
    font-size: 2.3rem;
    box-shadow: 0 8px 18px #3a315214;
}

.subject-card-copy, .chapter-card-copy {
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.subject-label {
    color: #7862cf;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.english-card .subject-label { color: #3c9b8e; }
.geography-card .subject-label { color: #32829a; }
.nature-card .subject-label { color: #4a9a58; }
.science-card .subject-label { color: #bb7930; }

.subject-card-copy strong {
    font-size: 1.3rem;
    font-weight: 900;
}

.subject-card-copy > span:last-child, .chapter-card-copy > span {
    color: #817c95;
    font-size: 0.9rem;
}

.card-arrow {
    z-index: 1;
    margin-left: auto;
    align-self: flex-start;
    color: #8071c1;
    font-size: 1.45rem;
}

.subject-decoration {
    position: absolute;
    right: 12px;
    bottom: -5px;
    color: #8472d21a;
    font-size: 2.3rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.site-footer {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #9993a9;
    font-size: 0.82rem;
    font-weight: 700;
}

.site-footer span { color: #ef9db1; }

.site-footer a {
    color: #7669b3;
    text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #7669b3;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.chapter-heading {
    align-items: center;
    margin: 34px 0 25px;
}

.chapter-heading h1 { font-size: clamp(2rem, 3vw, 2.7rem); }

.chapter-mascot {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    border-radius: 28px;
    background: #fff3d4;
    font-size: 3rem;
    transform: rotate(4deg);
}

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.chapter-card {
    display: flex;
    min-height: 105px;
    align-items: center;
    gap: 16px;
    padding: 17px 19px;
    border: 1px solid #efecf6;
    border-radius: 18px;
    background: #fff;
    color: #292343;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.chapter-emoji {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border-radius: 17px;
    background: #f4f0ff;
    font-size: 1.7rem;
}

.chapter-card-copy strong { font-size: 1rem; font-weight: 900; }
.chapter-card-copy > span { line-height: 1.35; }

.chapter-play {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    margin-left: auto;
    border-radius: 50%;
    background: #f3efff;
    color: #7964d1;
    font-size: 1.25rem;
    font-weight: 900;
}

.ready-card, .results-card {
    display: flex;
    max-width: 650px;
    flex-direction: column;
    align-items: center;
    margin: 32px auto 0;
    padding: 42px 38px;
    border: 1px solid #eeebf7;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 16px 42px #362c5910;
    text-align: center;
}

.ready-illustration {
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 31px;
    background: #fff4d8;
    font-size: 3.6rem;
    animation: book-float 3s ease-in-out infinite;
}

.ready-card h1, .results-card h1 { font-size: 2.6rem; }
.ready-card .ready-detail { max-width: 400px; margin: 22px 0 27px; font-size: 0.95rem; line-height: 1.6; }

.primary-button, .secondary-button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 23px;
    border: 0;
    border-radius: 15px;
    background: #765ed8;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 7px 15px #765ed833;
    transition: transform 160ms ease, background 160ms ease;
}

.primary-button:hover:not(:disabled) { background: #674dce; transform: translateY(-2px); }
.primary-button:disabled { background: #c7c1d9; box-shadow: none; cursor: not-allowed; }

.secondary-button {
    border: 1px solid #e6e1f1;
    background: #fff;
    color: #6e6392;
    box-shadow: none;
}

.secondary-button:hover { background: #f8f6ff; }

.quiz-view { max-width: 820px; margin: 0 auto; }

.quiz-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 28px 0 10px;
}

.progress-track {
    height: 10px;
    overflow: hidden;
    border-radius: 99px;
    background: #eeeaf6;
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9d83ed, #65c5ae);
    transition: width 350ms ease;
}

.quiz-card {
    margin-top: 22px;
    padding: clamp(22px, 5vw, 42px);
    border: 1px solid #efecf6;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 16px 42px #362c5910;
}

.quiz-card-top { display: flex; align-items: center; justify-content: space-between; }
.quiz-doodle { font-size: 2.4rem; }
.question-tag { color: #9a92b1; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; }

.quiz-card h1 {
    margin: 23px 0;
    color: #302748;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.3;
}

.story-text {
    padding: 16px 20px;
    border-left: 4px solid #8e7ae4;
    border-radius: 0 12px 12px 0;
    background: #f7f4ff;
    color: #59516f;
    font-size: 1.05rem;
    line-height: 1.7;
}

.answer-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin: 26px 0;
}

.answer-option, .order-tile, .match-option {
    min-height: 58px;
    padding: 12px 16px;
    border: 2px solid #ece8f5;
    border-radius: 15px;
    background: #fff;
    color: #39324f;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.answer-option:hover:not(:disabled), .order-tile:hover:not(:disabled), .match-option:hover:not(:disabled) {
    border-color: #b7a9ef;
    background: #faf8ff;
    transform: translateY(-2px);
}

.answer-option.is-selected, .order-tile.is-selected, .match-option.is-selected {
    border-color: #8069df;
    background: #f3efff;
    color: #5846a9;
}

.interaction-hint { margin: 8px 0 18px; color: #817b94; font-size: 0.9rem; }

.order-options {
    display: flex;
    min-height: 100px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 22px 0;
    padding: 17px;
    border: 2px dashed #ded8ef;
    border-radius: 18px;
    background: #fbfaff;
}

.order-tile { min-width: 70px; touch-action: manipulation; }
.match-activity { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(130px, 0.8fr); gap: 18px; margin: 22px 0; }
.match-column, .match-options { display: flex; flex-direction: column; gap: 10px; }

.match-target {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 13px;
    border: 2px dashed #dcd5ef;
    border-radius: 14px;
    background: #fbfaff;
    color: #39324f;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.match-target strong { color: #7460ca; font-size: 0.9rem; }
.match-target.is-selected { border-color: #8069df; background: #f3efff; }
.match-option { min-height: 52px; }

.answer-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    padding: 14px 16px;
    border-radius: 14px;
    font-weight: 800;
    animation: feedback-pop 220ms ease-out;
}

.feedback-correct { background: #eaf8ef; color: #328354; }
.feedback-try-again { background: #fff5e3; color: #926b27; }
.quiz-actions { display: flex; justify-content: flex-end; margin-top: 24px; }

.results-view { display: grid; min-height: 550px; place-items: center; }
.results-card { width: min(100%, 580px); margin: 0; }
.results-confetti { margin-bottom: 12px; font-size: 3.4rem; animation: sparkle 1.5s ease-in-out infinite; }
.results-chapter { margin: 0; color: #817b94; font-weight: 700; }

.score-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 4px;
    color: #765ed8;
}

.score-number { font-size: 5rem; font-weight: 900; letter-spacing: -0.08em; line-height: 1; }
.score-divider, .score-total { color: #a29bb6; font-size: 2.2rem; font-weight: 800; }
.results-message { max-width: 380px; color: #77718d; font-size: 1.05rem; line-height: 1.55; }
.results-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 17px; }

@keyframes book-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes sparkle {
    0%, 100% { opacity: 0.72; transform: scale(0.94) rotate(-6deg); }
    50% { opacity: 1; transform: scale(1.08) rotate(6deg); }
}

@keyframes feedback-pop {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    .learning-app { padding: 0 24px; }
    .welcome-section { min-height: 300px; padding: 30px 6%; }
    .hero-art { width: 210px; height: 200px; flex-basis: 210px; }
    .hero-sun { width: 170px; height: 170px; }
    .hero-book { font-size: 5.8rem; }
    .subject-grid { gap: 14px; }
    .subject-card { min-height: 145px; gap: 13px; padding: 18px; }
    .subject-icon { width: 58px; height: 58px; flex-basis: 58px; font-size: 1.9rem; }
    .subject-card-copy strong { font-size: 1.1rem; }
    .subject-card-copy > span:last-child { font-size: 0.8rem; }
    .chapter-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .learning-app { padding: 0 17px; }
    .topbar { min-height: 72px; }
    .brand { font-size: 1.2rem; }
    .brand-mark { width: 32px; height: 32px; }
    .topbar-note { display: none; }
    .streak-pill { padding: 8px 10px; font-size: 0.75rem; }
    .sound-toggle { min-height: 38px; gap: 6px; padding: 7px 10px; font-size: 0.78rem; }
    .welcome-section { min-height: 270px; padding: 27px 22px; }
    .welcome-copy h1 { font-size: 2.2rem; }
    .welcome-copy p { max-width: 230px; font-size: 0.92rem; line-height: 1.5; }
    .hero-art { position: absolute; right: -56px; bottom: -28px; width: 165px; height: 155px; opacity: 0.78; }
    .hero-sun { width: 135px; height: 135px; }
    .hero-book { font-size: 4.7rem; }
    .spark-one { left: 7px; }
    .spark-three { left: 8px; }
    .subject-section, .chapter-view, .quiz-view, .results-view { padding: 34px 0 42px; }
    .section-heading h2 { font-size: 1.3rem; }
    .subject-grid { grid-template-columns: 1fr; gap: 12px; }
    .subject-card { min-height: 125px; }
    .chapter-count { font-size: 0.75rem; }
    .chapter-heading { margin-top: 25px; }
    .chapter-mascot { width: 62px; height: 62px; border-radius: 22px; font-size: 2.3rem; }
    .chapter-card { gap: 12px; padding: 14px; }
    .chapter-card-copy strong { font-size: 0.92rem; }
    .chapter-card-copy > span { font-size: 0.78rem; }
    .ready-card, .results-card { padding: 30px 21px; }
    .ready-card h1, .results-card h1 { font-size: 2.15rem; }
    .quiz-progress-row { margin-top: 20px; }
    .quiz-card { padding: 21px 17px; }
    .answer-options { gap: 9px; }
    .answer-option { min-height: 54px; padding: 9px; font-size: 0.92rem; }
    .match-activity { grid-template-columns: minmax(0, 1fr); gap: 13px; }
    .match-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .match-target { min-height: 55px; }
    .match-target strong { font-size: 0.8rem; }
    .quiz-actions .primary-button { width: 100%; }
    .results-actions { width: 100%; flex-direction: column; }
    .results-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.subject-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.subject-card {
    font: inherit;
    text-decoration: none;
}

.playground-card {
    border-color: #f5e1b8;
    background: #fff9eb;
}

.playground-card .subject-label { color: #b78330; }

.playground-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 0 58px;
}

.playground-heading {
    margin-bottom: 30px;
    text-align: center;
}

.playground-heading h1, .arcade-heading h1 {
    margin: 10px 0;
    color: #292343;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.05em;
}

.playground-heading p, .arcade-heading p {
    margin: 0;
    color: #77718d;
    font-size: 1rem;
    line-height: 1.55;
}

.playground-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.game-card {
    display: flex;
    min-height: 190px;
    align-items: center;
    gap: 18px;
    padding: 23px;
    border: 2px solid #e8e2f5;
    border-radius: 22px;
    background: #f7f4ff;
    color: #302748;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px #42346516;
}

.snake-game { border-color: #d7eee1; background: #f1fbf4; }
.snake-game .subject-label { color: #398664; }

.game-card-icon {
    display: grid;
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    place-items: center;
    border-radius: 22px;
    background: #fff;
    font-size: 2.2rem;
    box-shadow: 0 8px 18px #3a315214;
}

.game-card-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
}

.game-card-copy strong { font-size: 1.25rem; font-weight: 900; }
.game-card-copy > span:last-child { color: #817c95; font-size: 0.9rem; line-height: 1.45; }
.game-card-arrow { color: #8071c1; font-size: 1.5rem; font-weight: 900; }
.playground-home-link { text-decoration: none; }

.arcade-game {
    max-width: 920px;
    margin: 0 auto;
    padding: 32px 0 48px;
}

.arcade-heading {
    margin: 28px 0 22px;
    text-align: center;
}

.arcade-heading h1 { font-size: clamp(2rem, 4vw, 2.6rem); }

.arcade-layout {
    display: grid;
    grid-template-columns: 300px minmax(230px, 320px);
    align-items: start;
    justify-content: center;
    gap: 25px;
}

.snake-layout { grid-template-columns: 360px minmax(230px, 320px); }

.arcade-board-wrap {
    overflow: hidden;
    padding: 10px;
    border: 1px solid #e8e3f2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px #362c5910;
}

.arcade-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #e8e3f2;
    border-radius: 12px;
    outline-offset: 5px;
    touch-action: none;
}

.block-drop-canvas { width: 300px; }
.snake-canvas { width: 360px; }

.arcade-side-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid #eeebf7;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px #362c590a;
}

.arcade-score-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.arcade-score-panel > div {
    display: flex;
    min-height: 75px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    border-radius: 14px;
    background: #f5f2ff;
    text-align: center;
}

.arcade-score-panel strong { color: #624ec1; font-size: 1.5rem; font-weight: 900; }
.snake-score-panel > div { background: #f0faf3; }
.snake-score-panel strong { color: #36825f; }
.arcade-stat-label { color: #908aa5; font-size: 0.67rem; font-weight: 900; letter-spacing: 0.12em; }

.arcade-status {
    min-height: 45px;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #fff8e9;
    color: #806327;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}

.arcade-game-actions { display: grid; gap: 9px; }
.arcade-game-actions button { width: 100%; min-height: 44px; }

.arcade-instructions {
    display: grid;
    gap: 7px;
    padding-top: 5px;
    color: #77718d;
    font-size: 0.82rem;
}

.arcade-instructions strong { margin-bottom: 2px; color: #40375c; font-size: 0.9rem; }

.game-touch-controls {
    display: grid;
    width: min(100%, 300px);
    grid-template-columns: repeat(5, minmax(42px, 1fr));
    gap: 8px;
    margin: 16px auto 0;
}

.game-touch-controls button {
    min-height: 48px;
    border: 1px solid #e2dcf1;
    border-radius: 13px;
    background: #fff;
    color: #55458d;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 900;
    touch-action: manipulation;
    cursor: pointer;
}

.game-touch-controls button:active { background: #f1edff; }

.snake-touch-controls {
    width: 200px;
    grid-template-columns: repeat(3, 58px);
    justify-content: center;
}

.snake-touch-controls button { min-height: 54px; }

@media (max-width: 760px) {
    .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .arcade-layout, .snake-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .arcade-side-panel { width: min(100%, 380px); }
}

@media (max-width: 540px) {
    .subject-grid { grid-template-columns: 1fr; }
    .playground-page { padding: 34px 0 42px; }
    .playground-grid { grid-template-columns: 1fr; gap: 13px; }
    .game-card { min-height: 145px; gap: 13px; padding: 18px; }
    .game-card-icon { width: 58px; height: 58px; flex-basis: 58px; font-size: 1.9rem; }
    .game-card-copy strong { font-size: 1.1rem; }
    .game-card-copy > span:last-child { font-size: 0.82rem; }
    .arcade-game { padding: 24px 0 38px; }
    .arcade-heading { margin: 21px 0 17px; }
    .arcade-heading p { font-size: 0.92rem; }
    .arcade-board-wrap { padding: 7px; }
    .arcade-side-panel { padding: 15px; }
}

.memory-game-card {
    border-color: #e7dff5;
    background: #f7f2ff;
}

.memory-game-card .subject-label { color: #8062bf; }

.builder-game-card {
    border-color: #efddc4;
    background: #fff8ed;
}

.builder-game-card .subject-label { color: #ae783d; }

.builder-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}

.builder-stat {
    display: flex;
    min-width: 120px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 15px;
    border-radius: 14px;
    background: #fff5e5;
}

.builder-stat strong { color: #a76b29; font-size: 1.2rem; font-weight: 900; }

.builder-reset { min-height: 48px; }

.builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 0 auto 10px;
}

.builder-tool {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 2px solid #e8e2f5;
    border-radius: 13px;
    background: #fff;
    color: #514968;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.builder-tool.is-selected {
    border-color: #7964c7;
    background: #f5f2ff;
    box-shadow: 0 0 0 2px #7964c733;
}

.builder-block-swatch {
    width: 25px;
    height: 25px;
    border: 2px solid #00000014;
    border-radius: 6px;
    background: var(--block-color);
    box-shadow: inset 0 -4px 0 #00000012;
}

.builder-eraser-icon { color: #7964c7; font-size: 1.3rem; }
.builder-instructions { min-height: 25px; margin: 4px auto; }

.builder-board {
    display: grid;
    width: min(100%, 620px);
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
    margin: 12px auto;
    padding: 10px;
    border: 2px solid #d5dced;
    border-radius: 15px;
    background: #edf3fa;
    box-shadow: 0 8px 22px #42346512;
}

.builder-cell {
    display: grid;
    aspect-ratio: 1;
    min-width: 0;
    place-items: center;
    padding: 3px;
    border: 1px solid #d6deea;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 120ms ease, background 120ms ease;
}

.builder-cell.is-empty:hover { background: #e7f2ff; }
.builder-cell.has-block { border-color: #00000012; background: var(--block-color); }
.builder-cell.has-block span { width: 100%; height: 100%; border-radius: 3px; box-shadow: inset 0 -5px 0 #00000012, inset 0 3px 0 #ffffff35; }
.builder-cell:active { transform: scale(0.94); }
.builder-tip { margin: 12px 0 0; color: #817c95; font-size: 0.85rem; text-align: center; }

.memory-status-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 12px;
}

.memory-stat {
    display: flex;
    min-width: 105px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 15px;
    border-radius: 14px;
    background: #f5f2ff;
}

.memory-stat strong { color: #624ec1; font-size: 1.2rem; font-weight: 900; }
.memory-status { max-width: 460px; margin: 0 auto; }

.memory-board {
    display: grid;
    width: min(100%, 520px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(7px, 1.8vw, 13px);
    margin: 18px auto;
}

.memory-card {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    padding: 4px;
    border: 2px solid #dcd2f2;
    border-radius: 17px;
    background: linear-gradient(145deg, #f1eaff, #e8e1ff);
    color: #7862c2;
    font: inherit;
    font-size: clamp(1.6rem, 5vw, 2.8rem);
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 160ms ease, background 180ms ease, border-color 180ms ease;
}

.memory-card:not(:disabled):hover {
    transform: translateY(-2px) rotate(-2deg);
    border-color: #a894e3;
}

.memory-card.is-revealed {
    border-color: #e9d99b;
    background: #fff9e8;
    transform: rotateY(0deg);
}

.memory-card.is-matched {
    border-color: #bce3ce;
    background: #eaf8ef;
    cursor: default;
}

.memory-card:disabled { opacity: 1; }

.memory-win {
    width: fit-content;
    max-width: 100%;
    margin: 16px auto;
    padding: 14px 18px;
    border-radius: 14px;
    background: #eaf8ef;
    color: #328354;
    font-weight: 900;
    text-align: center;
}

.memory-actions { display: flex; justify-content: center; margin-top: 20px; }

@media (max-width: 540px) {
    .memory-game .arcade-heading { margin-top: 19px; }
    .memory-board { gap: 7px; }
    .memory-card { border-radius: 12px; }
    .builder-status-row { flex-wrap: wrap; }
    .builder-tool { min-height: 44px; padding: 6px 9px; font-size: 0.8rem; }
    .builder-board { gap: 3px; padding: 6px; }
    .builder-cell { padding: 2px; border-radius: 4px; }
}