:root {
    --brand: #00809d;
    --bg: #f4f7fb;
    --text: #1b2430;
    --muted: #667085;
    --card: #fff;
    --ok: #0a7d42
}

/* 1) Kill default body margin */
html, body {
    margin: 0;
    padding: 0;
    background: #fafcff;
}

/* 2) Make the green section own its top spacing (prevents margin collapse) */
.full-bleed {
    /* your green background already */
    /* add one of these to stop collapse */
    padding-top: 1px; /* simplest */
    margin-top: -1px; /* cancel visual shift */
    /* or use either of the two lines below instead of the pair above */
    /* overflow: auto; */ /* or */
    /* display: flow-root; */
}

/* If your first child had a top margin, neutralize it */
.level1-rows > *:first-child {
    margin-top: 0;
}

/* 3) If the header has a border/shadow you don’t want, remove it */
.topbar, header, .site-header {
    border-bottom: none;
    box-shadow: none;
}


* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color: var(--text);
    background: var(--bg)
}


.big {
    font-size: 28px;
}

.exercise {
    background: #fafcff;
    padding: 12px;
    border-radius: 10px;
    border: 1px dashed #d8e1ec
}



    .topbar nav a {
        color: #fff;
        text-decoration: none;
        margin-left: 14px
    }

.page {
    padding: 24px;
    max-width: 1000px;
    margin: 0 auto
}

.card {
    background: var(--card);
    border-radius: 16px;
    padding: 16px;
    margin: 16px 0;
    box-shadow: 0 6px 20px rgba(0,0,0,.06)
}

    .card.success {
        border: 2px solid var(--ok)
    }

.grid.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

@media(max-width:800px) {
    .grid.two {
        grid-template-columns: 1fr
    }
}

.btn {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 600
}

    .btn.secondary {
        background: #0f172a
    }

.lead {
    color: var(--muted)
}

.input, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d7e3;
    border-radius: 10px;
}

.big {
    font-size: 32px
}

.muted {
    color: var(--muted)
}

.cta {
    display: flex;
    gap: 12px;
    margin: 12px 0 0
}

.statsrow {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    color: var(--muted)
}

.lesson {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px
}

.handtip {
    display: flex;
    gap: 8px;
    align-items: center
}

.handtag, .fingertag {
    background: #eef6ff;
    border: 1px solid #c7ddff;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 12px;
    color: #0f2b4a
}

.hand-left {
    background: #e8f6f8;
    border-color: #bfe9ee
}

.hand-right {
    background: #f8e8f1;
    border-color: #f0bfd8
}

/* Visual keyboard */
.kbd {
    display: inline-block;
    background: #0b172a0b;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #d8e1ec;
    margin-top: 10px
}

.kbd-row {
    display: flex;
    justify-content: center;
    margin: 6px 0
}

.kbd-key {
    min-width: 36px;
    text-align: center;
    padding: 8px 10px;
    margin: 0 3px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.05)
}

    .kbd-key.left {
        background: #e8f6f8
    }

    .kbd-key.right {
        background: #f8e8f1
    }

    .kbd-key.hit {
        outline: 3px solid var(--brand);
        font-weight: 700
    }

/* Invisible input to capture keystrokes */
.hidden-capture {
    opacity: 0;
    width: 1px;
    height: 1px;
    border: 0;
    padding: 0;
    position: absolute;
    left: -9999px;
}



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

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.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;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.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;
}

/* --- playful gradient background for the page area --- */
.level-header h2 {
    margin: .2rem 0 0;
    font-size: 28px
}

.level-header .emoji {
    font-size: 26px;
    margin-right: 6px
}

.level-header .sub {
    color: #667085;
    margin: .25rem 0 1rem
}

/* Control panel */
.panel {
    background: linear-gradient(135deg,#f7fbff 0%,#fef6ff 100%);
    border: 1px solid #e5e9f2;
    border-radius: 16px;
    padding: 12px;
    margin: 12px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.06)
}

.panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end
}

.panel-item label {
    display: block;
    font-size: 12px;
    color: #5b6b7b;
    margin: 0 0 6px
}

.panel-actions {
    display: flex;
    gap: 10px
}

.btn {
    background: #0ea5e9;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer
}

    .btn:hover {
        filter: brightness(1.05)
    }

    .btn.ghost {
        border: 10px solid #0f172a;
        background: #0f172a;
        color: #fff
    }

/* Arena */
.arena {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 12px
}

.arena-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg,#e0f2fe 0%,#fce7f3 100%);
    border-radius: 22px;
    padding: 24px;
    border: 1px solid #e6ecf5;
    box-shadow: 0 8px 24px rgba(0,0,0,.08)
}

.bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,#ffffff 0%,#fff 35%,#ffe4ec 36%,#ffd9f2 60%,#dff2ff 100%);
    box-shadow: 0 12px 30px rgba(14,165,233,.35), inset 0 0 0 6px rgba(255,255,255,.8)
}

.letter {
    font-size: 96px;
    line-height: 1;
    font-weight: 900;
    color: #0f172a;
    text-shadow: 0 3px 0 rgba(255,255,255,.8)
}

.tips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center
}

.chip {
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #d6e3f0;
    background: #eef6ff;
    color: #0b3a5e
}

.chip-left {
    background: #e8f6f8;
    border-color: #bfe9ee;
    color: #0b4950
}

.chip-right {
    background: #f8e8f1;
    border-color: #f0bfd8;
    color: #5c0b35
}

.chip-finger {
    background: #fff5db;
    border-color: #ffe4a3;
    color: #633f00
}

.arena-info {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 10px
}

.card-soft {
    background: #fff;
    border: 1px solid #e8edf6;
    border-radius: 14px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.05)
}

    .card-soft .label {
        font-size: 12px;
    }

/* --- Title on one line --- */
.level-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 32px;
    margin: 8px 0 6px;
}

    .level-title .emoji {
        font-size: 26px
    }

/* --- Panel (controls) on a single row --- */
.panel {
    background: linear-gradient(135deg,#f7fbff 0%,#fef6ff 100%);
    border: 1px solid #e5e9f2;
    border-radius: 16px;
    padding: 12px;
    margin: 12px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.06)
}

    .panel.panel-tight {
        padding: 12px 14px
    }

.panel-row.tight {
    display: grid;
    grid-template-columns: 260px 220px auto; /* name | sequence | buttons */
    gap: 12px;
    align-items: end;
}

.panel-item label {
    display: block;
    font-size: 12px;
    color: #5b6b7b;
    margin: 0 0 6px
}

.panel-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start
}

@media (max-width:900px) {
    .panel-row.tight {
        grid-template-columns: 1fr 1fr
    }

    .panel-actions {
        grid-column: 1/-1
    }
}

/* --- Buttons / Inputs --- */
.btn {
    background: #0ea5e9;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer
}

    .btn:hover {
        filter: brightness(1.05)
    }

    .btn.ghost {
        background: #0f172a;
        color: #fff
    }

.input, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d7e3;
    border-radius: 10px
}

/* --- Practice arena big & centered --- */
.arena {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 10px
}

.arena-inner {
    width: clamp(360px, 60vw, 860px);
    padding: 36px 28px;
    background: linear-gradient(135deg,#e0f2fe 0%,#fce7f3 100%);
    border-radius: 22px;
    border: 1px solid #e6ecf5;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(220px, 28vw, 320px);
    height: clamp(220px, 28vw, 320px);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,#ffffff 0%,#fff 35%,#ffe4ec 36%,#ffd9f2 60%,#dff2ff 100%);
    box-shadow: 0 12px 30px rgba(14,165,233,.35), inset 0 0 0 6px rgba(255,255,255,.8)
}

.letter {
    font-size: clamp(110px, 14vw, 180px);
    line-height: 1;
    font-weight: 900;
    color: #0f172a;
    text-shadow: 0 3px 0 rgba(255,255,255,.8)
}

.tips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px
}

/* --- Title row --- */
.level-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 32px;
    margin: 6px 0 8px;
}

    .level-title .emoji {
        font-size: 26px
    }

/* --- Controls row (single line, wraps on small screens) --- */
.row-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: linear-gradient(135deg,#f7fbff 0%,#fef6ff 100%);
    border: 1px solid #e5e9f2;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    margin-bottom: 12px;
}

.ctrl {
    justify-content:center;
    display: flex;
    flex-direction: column;
    min-width: 220px
}

    .ctrl label {
        font-size: 12px;
        color: #5b6b7b;
        margin: 0 0 6px
    }

    .ctrl.actions {
        display: flex;
        flex-direction: row;
        gap: 10px;
        min-width: fit-content;
        margin-top:15px;
    }

/* --- Buttons / inputs --- */
.btn {
    background: #0ea5e9;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer
}

    .btn:hover {
        filter: brightness(1.05)
    }

    .btn.ghost {
        background: #0f172a;
        color: #fff
    }

.input, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d7e3;
    border-radius: 10px
}

/* --- Practice arena row --- */
.row-arena {
    display: flex;
    justify-content: center;
    margin: 6px 0 10px
}

.arena-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(880px, 92vw);
    background: #C5FFB3;
    border-radius: 22px;
    padding: 36px 28px;
    border: 1px solid #e6ecf5;
    box-shadow: 0 8px 24px rgba(0,0,0,.08)
}

.bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(240px, 30vw, 360px);
    height: clamp(240px, 30vw, 360px);
    border-radius: 50%;
    background: radial-gradient(circle at center, #9CE282 0%, #348D13 100%);
    box-shadow: 0 14px 36px rgba(14,165,233,.35), inset 0 0 0 8px rgba(255,255,255,.85)
}

.letter {
    font-size: clamp(120px, 16vw, 200px);
    line-height: 1;
    font-weight: 900;
    color: white;
    text-shadow: 0 3px 0 rgba(255,255,255,.8)
}

.chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center
}

.chip {
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #d6e3f0;
    background: #eef6ff;
    color: #0b3a5e
}

.chip-left {
    background: #e8f6f8;
    border-color: #bfe9ee;
    color: #0b4950
}

.chip-right {
    background: #f8e8f1;
    border-color: #f0bfd8;
    color: #5c0b35
}

.chip-finger {
    background: #fff5db;
    border-color: #ffe4a3;
    color: #633f00;
}

/* --- Stats row (5 cards in one line) --- */
.row-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 10px;
    max-width: min(1000px, 92vw);
    margin: 0 auto 6px;
}
.stat {
    background: Transparent;
    border: 1px solid #e8edf6;
    border-radius: 14px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.05)
}

.s-label {
    font-size: 12px;
    color: #667085
}

.s-value {
    font-size: 20px;
    font-weight: 800;
    margin-top: 2px
}

.bar {
    position: relative;
    height: 8px;
    background: #eef2f7;
    border-radius: 999px;
    margin-top: 8px;
    overflow: hidden
}

.bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg,#34d399,#10b981);
    border-radius: 999px
}

@media (max-width:900px) {
    .row-stats {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

/* --- Tip row --- */
.row-tip {
    max-width: min(1000px,92vw);
    margin: 10px auto;
    color: #667085;
    text-align: center
}

/* --- Keyboard + image row --- */
.row-keyboard-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: min(1000px, 92vw);
    margin: 10px auto 18px;
}

.keyboard-slot {
    display: flex;
    justify-content: center;
    align-items: center
}

.image-slot {
    margin: 0;
    text-align: center
}

    .image-slot img {
        max-width: 100%;
        height: auto;
        border-radius: 14px;
        border: 1px solid #e6ecf5;
        box-shadow: 0 8px 18px rgba(0,0,0,.06)
    }

    .image-slot figcaption {
        font-size: 12px;
        color: #667085;
        margin-top: 6px
    }

@media (max-width:900px) {
    .row-keyboard-image {
        grid-template-columns: 1fr
    }
}

/* --- Finish card --- */
.finish-card {
    background: linear-gradient(135deg,#ecfeff 0%,#f5f3ff 100%);
    border: 1px solid #e4e7f1;
    border-radius: 22px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    margin-top: 12px
}

.finish-emoji {
    font-size: 64px
}

.finish-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    max-width: 620px;
    margin: 10px auto 0
}

    .finish-stats div {
        background: #fff;
        border: 1px solid #e6ecf5;
        border-radius: 14px;
        padding: 10px
    }

    .finish-stats span {
        display: block;
        font-size: 12px;
        color: #667085
    }

    .finish-stats b {
        font-size: 18px
    }

@media (max-width:900px) {
    .finish-stats {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

/* --- Animations & utilities --- */
@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.06)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes shake {
    0%,100% {
        transform: translateX(0)
    }
}
    /* ========= Base / variables ========= */
:root {
    --brand: #f79b72;
    --bg: #f4f7fb;
    --text: #0f172a;
    --muted: #667085;
    --card: #fff;
    --ok: #10b981;
}

    * {
        box-sizing: border-box
    }

    html,body {
        margin: 0;
        font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
        color: var(--text);
        background: var(--bg)
    }

    .page {
        padding: 24px;
        max-width: 1100px;
        margin: 0 auto
    }

    a {
        color: #0071c1
    }
    /* ========= Title (Row 1) ========= */
    .level-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 32px;
        margin: 6px 0 8px
    }

    .level-title .emoji {
        font-size: 26px
    }
    /* ========= Controls (Row 2) ========= */
.row-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: #E3F4FF;
    border: 1px solid #e5e9f2;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    margin-bottom: 12px;
}

.ctrl {
    display: flex;
    flex-direction: column;
    min-width: 220px;
}

    .ctrl label {
        font-size: 12px;
        color: #5b6b7b;
        margin: 0 0 6px
    }

    .ctrl.actions {
        display: flex;
        flex-direction: row;
        gap: 10px;
        min-width: fit-content
    }

    .input,select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #d0d7e3;
        border-radius: 10px
    }

    .btn {
        background: var(--brand);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 10px 16px;
        font-weight: 700;
        cursor: pointer
    }

    .btn:hover {
        filter: brightness(1.05)
    }

    .btn.ghost {
        background: #0f172a;
        color: #fff
    }
    /* ========= Practice arena (Row 3) ========= */
    .row-arena {
        display: flex;
        justify-content: center;
        margin: 6px 0 10px
    }

    .arena-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: min(880px,92vw);
        padding: 36px 28px;
        border-radius: 22px;
        background: linear-gradient(135deg,#e0f2fe 0%,#fce7f3 100%);
        border: 1px solid #e6ecf5;
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }

    .bubble {
        display: flex;
        align-items: center;
        justify-content: center;
        width: clamp(240px,30vw,360px);
        height: clamp(240px,30vw,360px);
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%,#ffffff 0%,#fff 35%,#ffe4ec 36%,#ffd9f2 60%,#dff2ff 100%);
        box-shadow: 0 14px 36px rgba(14,165,233,.35), inset 0 0 0 8px rgba(255,255,255,.85);
    }

    .letter {
        font-size: clamp(120px,16vw,200px);
        line-height: 1;
        font-weight: 900;
        color: #0f172a;
        text-shadow: 0 3px 0 rgba(255,255,255,.8)
    }

    .chips {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center
    }

    .chip {
        border-radius: 999px;
        padding: 6px 10px;
        font-weight: 700;
        font-size: 13px;
        border: 1px solid #d6e3f0;
        background: #eef6ff;
        color: #0b3a5e
    }

    .chip-left {
        background: #e8f6f8;
        border-color: #bfe9ee;
        color: #0b4950
    }

    .chip-right {
        background: #f8e8f1;
        border-color: #f0bfd8;
        color: #5c0b35
    }

    .chip-finger {
        background: #fff5db;
        border-color: #ffe4a3;
        color: #633f00
    }
    /* ========= Stats (Row 4) ========= */
    .row-stats {
        display: grid;
        grid-template-columns: repeat(5,minmax(160px,1fr));
        gap: 10px;
        max-width: min(1000px,92vw);
        margin: 0 auto 6px;
    }

    .stat {
        background: #fff;
        border: 1px solid #e8edf6;
        border-radius: 14px;
        padding: 10px;
        text-align: center;
        box-shadow: 0 6px 18px rgba(0,0,0,.05)
    }

    .s-label {
        font-size: 12px;
        color: var(--muted)
    }

    .s-value {
        font-size: 20px;
        font-weight: 800;
        margin-top: 2px
    }

    .bar {
        position: relative;
        height: 8px;
        background: #eef2f7;
        border-radius: 999px;
        margin-top: 8px;
        overflow: hidden
    }

    .bar-fill {
        position: absolute;
        inset: 0 auto 0 0;
        background: linear-gradient(90deg,#34d399,#10b981);
        border-radius: 999px
    }

    @media(max-width:900px) {
        .row-stats

{
    grid-template-columns: repeat(2,minmax(0,1fr))
}

}

/* ========= Tip (Row 5) ========= */
.row-tip {
    max-width: min(1000px,92vw);
    margin: 10px auto;
    color: var(--muted);
    text-align: center
}

/* ========= Keyboard + Image (Row 6) ========= */
.row-keyboard-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: min(1000px,92vw);
    margin: 10px auto 18px;
}

.keyboard-slot {
    display: flex;
    justify-content: center;
    align-items: center
}

.image-slot {
    margin: 0;
    text-align: center
}

    .image-slot img {
        max-width: 100%;
        height: auto;
        border-radius: 14px;
        border: 1px solid #e6ecf5;
        box-shadow: 0 8px 18px rgba(0,0,0,.06)
    }

    .image-slot figcaption {
        font-size: 12px;
        color: var(--muted);
        margin-top: 6px
    }

@media(max-width:900px) {
    .row-keyboard-image {
        grid-template-columns: 1fr
    }
}

/* ========= Finish card ========= */
.finish-card {
    background: linear-gradient(135deg,#ecfeff 0%,#f5f3ff 100%);
    border: 1px solid #e4e7f1;
    border-radius: 22px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    margin-top: 12px;
}

.finish-emoji {
    font-size: 64px
}

.finish-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    max-width: 620px;
    margin: 10px auto 0
}

    .finish-stats div {
        background: #fff;
        border: 1px solid #e6ecf5;
        border-radius: 14px;
        padding: 10px
    }

    .finish-stats span {
        display: block;
        font-size: 12px;
        color: var(--muted)
    }

    .finish-stats b {
        font-size: 18px
    }

@media(max-width:900px) {
    .finish-stats {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

/* ========= KeyboardVisual (kept) ========= */
.kbd {
    display: inline-block;
    background: #0b172a0b;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #d8e1ec;
    margin-top: 10px
}

.kbd-row {
    display: flex;
    justify-content: center;
    margin: 6px 0
}

.kbd-key {
    min-width: 36px;
    text-align: center;
    padding: 8px 10px;
    margin: 0 3px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.05)
}

    .kbd-key.left {
        background: #e8f6f8
    }

    .kbd-key.right {
        background: #f8e8f1
    }

    .kbd-key.hit {
        outline: 3px solid var(--brand);
        font-weight: 700
    }

/* ========= Animations / utils ========= */
@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.06)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes shake {
    0%,100% {
        transform: translateX(0)
    }

    20% {
        transform: translateX(-6px)
    }

    40% {
        transform: translateX(6px)
    }

    60% {
        transform: translateX(-4px)
    }

    80% {
        transform: translateX(4px)
    }
}

.pulse-correct .bubble {
    animation: pulse .22s ease-in-out
}

.shake-wrong .bubble {
    animation: shake .22s ease-in-out
}

.hidden-capture {
    opacity: 0;
    width: 1px;
    height: 1px;
    border: 0;
    padding: 0;
    position: absolute;
    left: -9999px
}

.center {
    text-align: center
}

.muted {
    color: var(--muted)
}

    20% {
        transform: translateX(-6px)
    }

    40% {
        transform: translateX(6px)
    }

    60% {
        transform: translateX(-4px)
    }

    80% {
        transform: translateX(4px)
    }
}

.pulse-correct .bubble {
    animation: pulse .22s ease-in-out
}

.shake-wrong .bubble {
    animation: shake .22s ease-in-out
}

.hidden-capture {
    opacity: 0;
    width: 1px;
    height: 1px;
    border: 0;
    padding: 0;
    position: absolute;
    left: -9999px
}

.center {
    text-align: center
}

/* === FORCE ROW LAYOUT EVEN IF INSIDE AN OLD GRID === */
.row-controls,
.row-arena,
.row-stats,
.row-tip,
.row-keyboard-image {
    grid-column: 1 / -1 !important; /* span full width of any parent grid */
    width: 100%;
    display: block;
}

/* Title spacing */
.level-title {
    margin: 12px auto 10px !important;
    max-width: 1100px;
}

/* Controls row: one line, centered container */
.row-controls {
    max-width: 1100px;
    margin: 0 auto 14px !important;
    justify-content: flex-start; /* keep items left-aligned in the row */
}

/* Arena row: huge center bubble */
.row-arena {
    margin: 8px 0 12px !important;
}

.arena-card {
    margin: 0 auto;
}
/* center the big card */

/* Stats row in one line (wrap on small screens) */
.row-stats {
    max-width: 1100px;
    margin: 0 auto 8px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(160px, 1fr)) !important;
    gap: 12px !important;
}

.stat {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tip row centered */
.row-tip {
    max-width: 1000px;
    margin: 10px auto !important;
    text-align: center;
}

/* Keyboard + image row */
.row-keyboard-image {
    max-width: 1100px;
    margin: 12px auto 20px !important;
}

/* Make the bubble a bit larger on big screens */
.bubble {
    width: clamp(260px, 34vw, 380px);
    height: clamp(260px, 34vw, 380px);
}

.letter {
    font-size: clamp(130px, 18vw, 210px);
}

/* Number formatting is done in Razor, but ensure no inherited small font */
.s-value {
    font-size: 20px !important;
}

/* Progress bar look */
.bar {
    height: 8px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.bar-fill {
    background: linear-gradient(90deg,#34d399,#10b981);
}

/* Safety: hide any leftover old layout blocks */
.grid.two {
    display: contents !important;
}
/* neutralize old 2-column grid if still present */
 /* so absolute is relative to this area */

.hidden-capture{
  position: absolute;        /* not left:-9999px anymore */
  top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0; border: 0; padding: 0;

  /* This controls how far the browser leaves it from the top when focusing */
  scroll-margin-block-start: 160px;  /* try 80–160px to taste */
}
/* --- Force Level 1 into rows regardless of outer grids --- */
.level1-rows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
  
    width: 500px;
        margin-inline: auto; /* centers the block */
    padding-inline: 16px; /* optional breathing room */
}

.level1-rows-play {
    display: flexlevel2q-rows flex-direction: column;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-inline: auto; /* centers the block */
    padding-inline: 16px; /* optional breathing room */
}

    .level1-rows > * {
        width: 100%
    }

    /* If some parent is a grid with columns, make each row span across it */
    .level1-rows > .level-title,
    .level1-rows > .row-controls,
    .level1-rows > .row-arena,
    .level1-rows > .row-stats,
    .level1-rows > .row-tip,
    .level1-rows > .row-keyboard-image,
    .level1-rows > .finish-card {
        grid-column: 1 / -1 !important;
    }

    /* Neutralize any legacy 2-column wrapper around this page */
    .level1-rows .grid.two {
        display: contents !important
    }

.level1-rows {
    position: relative;
}
/* so absolute is relative to this area */

.hidden-capture {
    position: absolute; /* not left:-9999px anymore */
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: 0;
    padding: 0;
    /* This controls how far the browser leaves it from the top when focusing */
    scroll-margin-block-start: 120px; /* try 80–160px to taste */
}
/* Force Level 2 into rows just like Level 1 */
.level2-rows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    width: 500px;
    margin-inline: auto; /* centers the block */
    padding-inline: 16px; /* optional breathing room */
}

    .level2-rows > * {
        width: 500px;
    }

    .level2-rows > .level-title,
    .level2-rows > .row-controls,
    .level2-rows > .row-arena,
    .level2-rows > .row-stats,
    .level2-rows > .row-tip,
    .level2-rows > .row-keyboard-image,
    .level2-rows > .finish-card {
        grid-column: 1 / -1 !important
    }

/* Word bubble tweaks (word is wider than a single letter) */
.word-bubble .word {
    font-size: clamp(48px, 8vw, 110px);
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #0f172a;
    text-shadow: 0 3px 0 rgba(255,255,255,.8);
}

/* Make the typing input comfy under the bubble */
.input-large {
    max-width: 520px;
    margin-top: 8px;
    font-size: 18px;
    text-align: center;
}

/* Make Level 1 Quiz rows stack regardless of outer grids */
.level1q-rows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    width: 500px;
    margin-inline: auto; /* centers the block */
    padding-inline: 16px; /* optional breathing room */
}

    .level1q-rows > * {
        width: 500px;
    }

    .level1q-rows > .level-title,
    .level1q-rows > .row-controls,
    .level1q-rows > .row-arena,
    .level1q-rows > .row-stats,
    .level1q-rows > .row-tip,
    .level1q-rows > .finish-card {
        grid-column: 1 / -1 !important
    }

/* Timer chip tint */
.chip-timer {
    background: #ffe8e8;
    border-color: #ffcaca;
    color: #7a1c1c
}

/* Make Level 2 Quiz use row layout like other pages */
.level2q-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 500px;
}

    .level2q-rows > * {
        width: 100%
    }

    .level2q-rows > .level-title,
    .level2q-rows > .row-controls,
    .level2q-rows > .row-arena,
    .level2q-rows > .row-stats,
    .level2q-rows > .row-tip,
    .level2q-rows > .finish-card {
        grid-column: 1 / -1 !important
    }

/* Word bubble typography */
.word-bubble .word {
    font-size: clamp(48px, 8vw, 110px);
    font-weight: 900;
    letter-spacing: .06em;
    color: #0f172a;
    text-shadow: 0 3px 0 rgba(255,255,255,.8)
}

/* Big typing box under the bubble */
.input-large {
    max-width: 520px;
    margin-top: 8px;
    font-size: 18px;
    text-align: center
}

/* Timer chip tint */
.chip-timer {
    background: #ffe8e8;
    border-color: #ffcaca;
    color: #7a1c1c
}

/* === HOME PAGE STYLING === */
.home-container {

    min-height: calc(100vh - 58px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 16px 64px;
}
.full-bleed {
    width: 99.5vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    justify-content: center; /* horizontal */
    gap: 12px; /* optional */
}
.secondary {
    color: #F79B72;
    font-family: "Rammetto One", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.primary {
    color: #799EFF;
    font-family: "Rammetto One", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.game-title {
    font-size: clamp(40px, 6vw, 70px);
    font-weight: 900;
    color: #799EFF;
    margin-bottom: 10px;
    font-family: "Rammetto One", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.lead-text {
    font-size: 1.3rem;
    max-width: 700px;
    color: #026A8F;
    margin-bottom: 50px;
}

.play-zone {
    margin: 20px 0 40px 0;
}

.play-btn {
    display: inline-block;
    font-size: clamp(20px, 5vw, 38px);
    font-weight: 700;
    background: linear-gradient(to top, #FFC72F, #FFD435, #FFEF42);
    color: #BC8000;
    margin-top: -50px;
    padding: 25px 70px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 18px 0 #BC8000, 0 26px 24px rgba(0,0,0,.18);
    transition: all 0.25s ease-in-out;
}
.play-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 20px 0 #d39a00, 0 30px 28px rgba(0,0,0,.22);
        background: linear-gradient(to top, #FFC72F, #FFD435, #FFEF42);
}
.center-circle-image{
    height:200px;
    width:200px;
    margin: auto;
   }
.how-section {
    background: #E3F4FF;
    border-radius: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    padding: 25px 35px;
    max-width: 600px;
    text-align: left;
}

    .how-section h3 {
        text-align: center;
        color: #026A8F;
        margin-bottom: 15px;
    }

    .how-section ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .how-section li {
        color:#026A8F;
        background: #BDE5FF;
        padding: 10px 19px;
        margin: 8px 0px;
        border-radius: 50px;
        font-size: 1.1rem;
        position: relative;
    }

        .how-section li::before {
           /* content: "⭐";*/
            position: absolute;
            left: 8px;
            top: 8px;
        }

/* === PLAY HUB / LEVEL PICKER === */
.levels-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 40px);
    padding: 24px;
    text-align: center;
    color: #0f172a
}

    .levels-container .game-title {
        font-size: clamp(40px,6vw,70px);
        font-weight: 900;
        margin: 0 0 8px;
        text-shadow: 2px 2px 0 #fff
    }

    .levels-container .lead-text {
        font-size: 1.15rem;
        max-width: 800px;
        margin: 0 0 26px;
        color: #026A8F;
    }

/* grid of big tiles */
.levels-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2,minmax(260px, 1fr));
    width: min(980px,92vw);
    margin: 6px auto 12px
}

@media(max-width:800px) {
    .levels-grid {
        grid-template-columns: 1fr
    }
}

/* card base */
.level-card {
    text-decoration:none;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 22px;
    text-align: left;
    cursor: pointer;
    background: #E3F4FF;
    border: 1px solid #e6ecf5;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease
}

    .level-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 36px rgba(0,0,0,.12);
        filter: saturate(1.05)
    }

    .level-card[aria-disabled="true"], .level-card.lc-soon {
        cursor: default;
        opacity: .8
    }

.lc-icon {
    width:50px;
}

.lc-type{
    font-weight:bold;
    margin-bottom:5px;
}
.lc-title {
    color: #F79B72;
    font-weight: 900;
    font-size: 24px;
    margin-bottom: 4px
}

.lc-sub {
    color: #475569;
    margin-bottom: 14px
}

.lc-cta {
    display: inline-block;
    background: linear-gradient(to top, #F79B72, #F79B72, #FFD0BA);
    border:none;
    color: #A85935;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: 0 3px 0 #A85935, 0 3px 2px rgba(0,0,0,.18);
}

    .lc-cta.disabled {
        background: #94a3b8
    }



/* bottom link */
.levels-footer {
    margin-top: 14px
}

.back-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 700
}

    .back-link:hover {
        text-decoration: underline
    }

/* ===== Typing Race ===== */
.race-rows {
    display: flex;
    flex-direction: column;

}

    .race-rows > * {
        width: 500px;
    }

/* Reuse existing .level-title, .row-controls, .row-arena, .row-stats, .finish-card styles */

/* Track */
.race-track {
    position: relative;
    width: min(1000px, 94vw);
    height: 220px;
    margin: 12px auto 6px;
    background: linear-gradient(180deg,#e2e8f0 0%, #f8fafc 100%);
    border: 1px solid #e5e9f2;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    overflow: hidden;
}

    .race-track .lane {
        position: relative;
        height: 50%;
        border-bottom: 1px dashed #cbd5e1;
    }

        .race-track .lane:last-child {
            border-bottom: none
        }

/* Finish line */
.finish-line {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px;
    width: 8px;
    background: repeating-linear-gradient( 45deg, #111 0 10px, #fff 10px 20px );
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}

    .finish-line span {
        position: absolute;
        top: 8px;
        right: -26px;
        font-size: 24px;
    }

/* Cars */
.car {
    position: absolute;
    top: calc(50% - 22px);
    transform: translateY(-50%);
    font-size: 32px;
    transition: transform .06s ease;
}

.lane:first-child .car {
    top: 50%
}

.lane:last-child .car {
    top: 50%
}

.car-player span {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
}

.car-ai span {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));
    opacity: .9
}

/* Word bubble tweaks (reuse from Level2) */
.word-bubble .word {
    font-size: clamp(48px, 8vw, 110px);
    font-weight: 900;
    letter-spacing: .06em;
    color: #0f172a;
    text-shadow: 0 3px 0 rgba(255,255,255,.8);
}

.input-large {
    max-width: 520px;
    margin-top: 8px;
    font-size: 18px;
    text-align: center
}

/* Chips */
.chip-timer {
    background: #ffe8e8;
    border-color: #ffcaca;
    color: #7a1c1c
}

/* ===== Falling Words ===== */
.fall-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
   
width:500px;
}

.fall-stage {
    position: relative;
    width: min(1000px, 94vw);
    height: 520px;
    margin: 6px auto 4px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #dfe6f3;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    background: linear-gradient(180deg,#e0f2fe 0%,#fce7f3 100%);
    cursor: pointer;
}

    .fall-stage .sky {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 86%;
        background: radial-gradient(circle at 30% 20%, #ffffff70 0%, #ffffff10 50%, transparent 70%);
        pointer-events: none;
    }

    .fall-stage .ground {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 14%;
        background: linear-gradient(180deg,#c7d2fe 0%,#93c5fd 100%);
        border-top: 2px solid #bcd0f5;
        pointer-events: none;
    }

.meteor {
    position: absolute;
    transform: translate(-50%,-50%);
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e6ecf5;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

    .meteor .word {
        font-weight: 900;
        letter-spacing: .02em;
        color: #0f172a;
    }

        .meteor .word.active {
            color: #0ea5e9;
            text-shadow: 0 1px 0 #fff;
        }

/* HUD */
.hud {
    position: absolute;
    left: 8px;
    top: 8px;
    display: flex;
    gap: 10px;
    background: #ffffffb3;
    border: 1px solid #e6ecf5;
    border-radius: 12px;
    padding: 6px 10px;
    font-weight: 700;
    color: #0f172a
}

.type-buffer {
    display: inline-block;
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 999px;
    padding: 6px 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,.06)
}

/* ===== Login page styles ===== */
.login-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-height: calc(100vh - 40px);
    padding: 20px;
    text-align: center;
}

.login-card {
    background: #E3F4FF;
    border: 1px solid #e6ecf5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 18px;
    width: min(520px, 92vw);
    text-align: left;
}

.input {
    background: #BDE5FF;
    border-radius: 18px;
    border: none;
    color: #026A8F;
}
.form-row {
    margin-bottom: 10px
}

    .form-row label {
        display: block;
        font-size: 12px;
        color: #5b6b7b;
        margin-bottom: 6px
    }

.val-msg {
    font-size: 12px;
    color: #b91c1c
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 6px
}

.actions .btn{
    border-radius:990px;
}
.btn.submit {
    background: #FFD435;
    color: #E3AE00;
    box-shadow: 0 5px 0 #BC8000, 0 4px 6px rgba(0,0,0,.18);
}
.btn.ghost {
    background: Transparent;
    color: #799EFF;
    box-shadow: 0 5px 0 #799EFF, 0 4px 6px rgba(0,0,0,.18);
    border: 5px;
    border-color: #799EFF;
}


.error-banner {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #7f1d1d;
    font-weight: 700
}

.hint {
    color: #475569
}

/* Header bits */
.brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    height: 32px;
    width: auto;
    display: block;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.welcome {
    color: #fff;
    opacity: .95;
    font-weight: 600;
}

/* Make header buttons readable on the brand bar */
.btn.small {
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
}

.topbar-btn {
    background: #fff;
    color: var(--brand);
}

    .topbar-btn.ghost {
        background: #0f172a;
        color: #fff;
    }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e2e2e2;
    color: #fff;
    padding: 10px 16px;
}

    .topbar .brand {
        display: flex;
        align-items: center;
        font-weight: 700;
    }

    .topbar .userbox {
        display: flex;
        gap: 10px;
        align-items: center;
    }

.btn-small {
    padding: 6px 10px;
    border-radius: 10px;
}

.btn-ghost {
    background: #0f172a;
    color: #fff;
    border: none;
    cursor: pointer;
}

.page {
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.bubble1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(240px, 30vw, 360px);
    height: clamp(240px, 30vw, 360px);
    border-radius: 50%;
    background: radial-gradient(circle at center, #9CE282 0%, #348D13 100%);
    box-shadow: 0 14px 36px rgba(14,165,233,.35), inset 0 0 0 8px rgba(255,255,255,.85)
}
.stat1 {
    background: #DDFFD3;
    color: #446E37;
}
.letter1{
    color:black;
}
.arena-card1 {
    background: #C5FFB3;
    border:none;
    box-shadow:none;
}
.btn.ghost {
    border: 1px solid #799EFF;
    background: transparent;
    color: #799EFF
}
.arena-card2 {
    background: #E3F4FF;
    border: none;
    box-shadow: none;
}
.stat2 {
    background: #E3F4FF;
}
.row-controls3 {
    background: #E3F4FF;
    margin:0,-50px,0,-50px
}
.row-controls4 {
    background: #FFFAFF;
}
.ctrl4{
    background: #FFDEFC;
}
.arena-card4 {
    background: #FFFAFF;
}
.word-bubble4 {
    background: #FFFAFF;
    color:white;
}
.word-bubble .word4 {
    color: #fff;
    text-shadow: -2px -2px 0 #000, 
    2px -2px 0 #8D4F87, 
    -2px 2px 0 #8D4F87, 
    2px 2px 0 #8D4F87; 
}
.row-controls5 {
    background: #E5E6FF;
}
.ctrl5 {
    background: #CDCEFF;
}
.row-controls6 {
    background: #E3F4FF;
}
.ctrl6 {
    background: #BDE5FF;
}
/* 1) Color the entire page, not just a div */
html, body, #app { /* #app = Blazor root */
    height: 100%;
    min-height: 100dvh; /* use dvh to avoid mobile address-bar jumps */
    margin: 0;
    background: var(--bg); /* your #f4f7fb */
}

/* 2) Let your page wrapper stretch to full height */
.page {
    min-height: 100%;
    /* If your .page currently has a white bg, make it transparent so the body color shows edge-to-edge: */
    background: transparent;
    /* keep your existing padding etc. */
    padding: 24px;
    /* optional: keep footer at bottom if you have one */
    display: flex;
    flex-direction: column;
}

/* 3) Keep cards white inside */
.card {
    background: var(--card); /* #fff */
    border-radius: 16px;
}

/* 4) Prevent accidental horizontal scroll causing white side slivers */
html, body {
    overflow-x: hidden;
}

/* 5) iOS safe-area (prevents thin white bars around notches) */
:root {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}

body {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}


/* Shell & toolbar (matches other pages’ vibe) */
.fallgame-shell {
    width: 100%;
    min-height: 100vh;
    background: #F8F9F9;
    display: flex;
    flex-direction: column;
}

.studio-toolbar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    background: #ffffff;
    border-bottom: 1px solid #eceff1;
}

.studio-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.studio-title {
    margin: 0 8px 0 0;
    font-size: 18px;
    font-weight: 700;
}

/* Buttons/pills */
.btn-primary {
    padding: 8px 14px;
    border: none;
    border-radius: 10px;
    background: #3b82f6;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

    .btn-primary:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.btn-ghost {
    padding: 8px 14px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
}

    .btn-ghost:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.level-pill {
    padding: 6px 10px;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    border-radius: 999px;
    font-size: 12px;
}

/* Rows container: FULL viewport, centered, no scroll */
.fallgame-rows {
    width: 100%;
    height: calc(100vh - 60px); /* subtract toolbar height (~60px) */
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 16px;
    box-sizing: border-box;
}

/* Arena centered */
.row-arena {
    position: relative;
    max-width: 900px;
    width: 100%;
    margin-inline: auto; /* center horizontally */
    height: 60vh; /* visible height */
    min-height: 380px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.04);
    overflow: hidden; /* hide falling word overflow */
}

/* Stage keeps the falling word perfectly centered horizontally */
.fall-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

/* The falling word is centered horizontally with translateX(-50%) */
.fall-word {
    position: absolute;
    top: -20%; /* start slightly above the view */
    left: 50%;
    transform: translateX(-50%);
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 6px 14px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    white-space: nowrap;
}

/* Animate fall (duration must match Timer in code: 5s) */
.falling {
    animation: ed_fall 5s linear forwards;
}

@keyframes ed_fall {
    0% {
        top: -20%;
    }

    100% {
        top: 100%;
    }
}

/* Countdown overlay */
.countdown-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: grid;
    place-items: center;
    z-index: 5;
}

    .countdown-overlay .count {
        font-size: 96px;
        font-weight: 900;
        color: #ffffff;
        text-shadow: 0 6px 18px rgba(0,0,0,.35);
    }

/* Finish overlay */
.finish-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: grid;
    place-items: center;
    z-index: 6;
}

.finish-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
    width: min(420px, 90%);
    text-align: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

    .finish-card h2 {
        margin: 0 0 8px 0;
        font-size: 28px;
    }

/* Input row */
.row-input {
    max-width: 900px;
    width: 100%;
    margin: 16px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.type-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 18px;
    outline: none;
}

    .type-input:disabled {
        background: #f8fafc;
    }

.tip {
    font-size: 13px;
    color: #64748b;
}

/* Small utility */
.save-loader {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #c7d2fe;
    border-top-color: #4338ca;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}