/* Pamokos (/pamokos): žemėlapis, grotuvas, klaviatūra ir rankos. Spalvos tik per var(--…), pirštų spalvos – site.css --finger-*.
   Klases .lc, .lw, .kb-… ir .hand-… generuoja lesson.js, lesson-keyboard.js ir _Hands.cshtml – nekeisti. */

/* pirštų spalvos: klavišai ir SVG rankos naudoja tą pačią --finger-color */
[data-finger="lp"], [data-finger="rp"] { --finger-color: var(--finger-pinky); --finger-ink: var(--white); }
[data-finger="lr"], [data-finger="rr"] { --finger-color: var(--finger-ring); --finger-ink: var(--white); }
[data-finger="lm"], [data-finger="rm"] { --finger-color: var(--finger-middle); --finger-ink: var(--white); }
[data-finger="li"], [data-finger="ri"] { --finger-color: var(--finger-index); --finger-ink: var(--ink); }
[data-finger="lt"], [data-finger="rt"] { --finger-color: var(--finger-thumb); --finger-ink: var(--white); }

/* ---------- žemėlapis ---------- */
.lessons-how {
    margin-bottom: 1.5rem;
}

.lessons-how summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    gap: .5rem;
}

.how-steps {
    counter-reset: how;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    list-style: none;
    margin: 1rem 0 .75rem;
    padding: 0;
}

.how-steps li {
    background: var(--banana-soft);
    border-radius: var(--radius-ctl);
    counter-increment: how;
    line-height: 1.4;
    padding: .75rem .9rem .75rem 3rem;
    position: relative;
}

.how-steps li::before {
    background: var(--ink);
    border-radius: var(--radius-pill);
    color: var(--banana);
    content: counter(how);
    font-family: var(--font-display);
    font-weight: 800;
    height: 1.7rem;
    left: .8rem;
    line-height: 1.7rem;
    position: absolute;
    text-align: center;
    top: .75rem;
    width: 1.7rem;
}

.how-steps strong {
    display: block;
}

.how-notes p {
    margin: .35rem 0 0;
}
.lessons-progress {
    color: var(--muted-on-dark);
    font-weight: 700;
    margin-bottom: 1rem;
}

.lessons-progress strong {
    color: var(--banana);
}

.lessons-guest {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.lessons-guest p {
    flex: 1 1 320px;
    font-weight: 600;
    margin: 0;
}

.lesson-module {
    margin-bottom: 2rem;
}

.lesson-module-head {
    align-items: center;
    display: flex;
    gap: .9rem;
    margin-bottom: .9rem;
}

.lesson-module-head .mode-icon {
    color: var(--ink);
    flex: none;
}

.lesson-module-head h2 {
    font-size: 1.35rem;
    margin: 0;
}

.lesson-module-head p {
    color: var(--muted-on-dark);
    font-weight: 600;
    margin: .1rem 0 0;
}

.lesson-module-head .pill {
    margin-left: auto;
}

.lesson-grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.lesson-node {
    align-items: flex-start;
    background: var(--cream);
    border: var(--border);
    border-radius: var(--radius-ctl);
    box-shadow: var(--shadow-card);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: .35rem;
    min-height: 132px;
    padding: .9rem 1rem;
    text-align: left;
    text-decoration: none;
    transition: transform .12s ease;
}

.lesson-node:hover:not(.is-locked),
.lesson-node:focus-visible {
    transform: translateY(-2px);
}

.lesson-node:focus-visible {
    outline: var(--focus);
    outline-offset: 3px;
}

.lesson-node.is-done {
    background: var(--banana-soft);
}

.lesson-node.is-locked {
    background: var(--soon);
    border-style: dashed;
    box-shadow: none;
    color: var(--brown);
}

.lesson-node-id {
    background: var(--ink);
    border-radius: var(--radius-pill);
    color: var(--banana);
    font-size: .75rem;
    font-weight: 800;
    padding: .1rem .6rem;
}

.lesson-node-title {
    font-weight: 800;
    line-height: 1.2;
}

.lesson-node-keys {
    color: var(--brown);
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem;
    font-weight: 700;
    gap: .25rem;
}

kbd {
    background: var(--white);
    border: 2px solid var(--ink);
    border-bottom-width: 4px;
    border-radius: 6px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: .85em;
    font-weight: 700;
    padding: 0 .4em;
}

.lesson-stars {
    display: flex;
    gap: .15rem;
    margin-top: auto;
}

.lesson-star.is-off {
    filter: grayscale(1);
    opacity: .3;
}

.lesson-star {
    height: 1.4rem;
    width: 1.4rem;
}

/* ---------- grotuvas ---------- */
.lesson-screen {
    margin: 0 auto;
    max-width: 960px;
}

.lesson-intro h2 {
    margin-top: .5rem;
}

.lesson-new {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-weight: 800;
    gap: .4rem;
    margin: 0 0 .6rem;
}

.lesson-new kbd {
    font-size: 1.2rem;
}

.lesson-intro-text {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.6;
    max-width: 62ch;
}

.lesson-options {
    margin: 1rem 0;
}

.lesson-pace {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.lesson-options-label {
    font-weight: 800;
    margin-right: .25rem;
}

.lesson-pace .btn[aria-pressed="true"] {
    background: var(--banana);
    box-shadow: inset 0 -3px 0 var(--banana-shadow);
}

.lesson-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
}

.lesson-guest-note {
    color: var(--brown);
    font-size: .9rem;
    font-weight: 600;
}

.lesson-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.lesson-chips[hidden] {
    display: none;
}

.lesson-chip {
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    font-weight: 800;
    overflow: hidden;
    padding: .2rem .8rem;
    position: relative;
}

.lesson-chip b {
    position: relative;
    z-index: 1;
}

.lesson-chip i {
    background: var(--banana-soft);
    inset: 0;
    position: absolute;
    transform: scaleX(var(--fill, 0));
    transform-origin: left;
    transition: transform .2s ease;
}

.lesson-chip.is-mastered i {
    background: var(--leaf-light);
}

.lesson-text {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 30px;
    line-height: 2;
    min-height: 3.6em;
    user-select: none;
}

.lw {
    display: inline-block;
}

.lc {
    border-radius: 4px;
    display: inline-block;
    opacity: .45;
}

.lc.is-ok {
    opacity: 1;
}

.lc.is-current {
    background: var(--banana-soft);
    box-shadow: inset 0 -3px 0 var(--leaf);
    opacity: 1;
}

.lc.is-miss {
    background: var(--error-soft);
    color: var(--error);
    opacity: 1;
}

.lc-space {
    min-width: .6ch;
}

.lesson-feedback {
    color: var(--brown);
    font-weight: 700;
    margin: .5rem 0 0;
    min-height: 1.5em;
}

/* ---------- klaviatūra ---------- */
.lesson-keys {
    display: grid;
    gap: .75rem;
}

.lesson-keys-body {
    display: grid;
    gap: .75rem;
}

.lesson-keys-body[hidden] {
    display: none;
}

.lesson-keys-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    justify-content: space-between;
}

.lesson-caption {
    flex: 1 1 220px;
    font-weight: 700;
    margin: 0;
    min-height: 1.5em;
}

.lesson-hint-btn {
    flex: none;
    font-size: .85rem;
    min-height: 38px;
    padding: .3rem .9rem;
}

.kb {
    display: grid;
    gap: 5px;
    margin: 0 auto;
    max-width: 760px;
}

.kb-row {
    display: flex;
    gap: 5px;
}

.kb-row-0 { padding-left: 0; }
.kb-row-1 { padding-left: 4.5%; }
.kb-row-2 { padding-left: 7%; }
.kb-row-4 { padding-left: 22%; padding-right: 22%; }

.kb-key {
    align-items: center;
    background: var(--white);
    border: 2px solid var(--ink-a18);
    border-bottom: 4px solid var(--finger-color, var(--ink-a18));
    border-radius: 8px;
    color: var(--ink);
    display: flex;
    flex: 1 1 0;
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 700;
    height: 44px;
    justify-content: center;
    min-width: 0;
    position: relative;
    transition: background .1s ease, transform .1s ease;
}

.kb-lt .kb-label {
    color: var(--brown);
}

.kb-sub {
    color: var(--ink-a60);
    font-size: .6rem;
    position: absolute;
    right: 5px;
    top: 2px;
}

.kb-home::after {
    background: var(--ink-a60);
    border-radius: 2px;
    bottom: 4px;
    content: "";
    height: 3px;
    position: absolute;
    width: 14px;
}

.kb-shift {
    flex: 1.9 1 0;
    font-size: .8rem;
}

.kb-space {
    flex: 1 1 auto;
}

.kb-key.is-new {
    background: var(--banana-soft);
}

.kb-key.is-target {
    background: var(--finger-color);
    border-color: var(--ink);
    color: var(--finger-ink, var(--ink));
    transform: translateY(2px);
}

.kb-key.is-target .kb-label,
.kb-key.is-target .kb-sub {
    color: var(--finger-ink, var(--ink));
}

.kb-key.is-hit {
    background: var(--leaf-light);
}

.kb-key.is-miss {
    background: var(--error-soft);
    border-color: var(--error);
}

/* ---------- rankos ---------- */
.lesson-hands {
    margin: 0 auto;
    max-width: 520px;
    width: 100%;
}

.lesson-keys.no-hands .lesson-hands {
    display: none;
}

.hands {
    display: block;
    height: auto;
    width: 100%;
}

.hand-palm {
    fill: var(--cream-2);
    stroke: var(--ink);
    stroke-width: 2;
}

.hand-finger {
    fill: var(--cream-2);
    stroke: var(--ink);
    stroke-width: 2;
    transition: fill .12s ease;
}

.hand-finger.is-active {
    fill: var(--finger-color);
}

/* ---------- rezultatai ---------- */
.lesson-result-stars {
    display: flex;
    gap: .35rem;
    justify-content: center;
    margin-bottom: .5rem;
}

.lesson-result-stars .lesson-star {
    height: 3rem;
    width: 3rem;
}

.lesson-touch-note {
    display: none;
}

@media (max-width: 640px) {
    .lesson-hands {
        display: none;
    }

    .lesson-text {
        font-size: 22px;
    }

    .kb-key {
        font-size: .75rem;
        height: 34px;
    }

    .kb-sub {
        display: none;
    }
}

@media (pointer: coarse) {
    .lesson-touch-note {
        color: var(--muted-on-dark);
        display: block;
        font-weight: 700;
    }
}

/* ---------- reklama: pagrindinis puslapis ir profilis ---------- */
.lesson-promo {
    align-items: center;
    background: var(--cream);
    border: var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--ink);
    display: grid;
    gap: 1rem 2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 24px 28px;
}

.lesson-promo-copy {
    display: grid;
    gap: .6rem;
    justify-items: start;
}

.lesson-promo h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
}

.lesson-promo p {
    font-weight: 600;
    max-width: 560px;
}

.lesson-promo-progress {
    align-items: center;
    display: flex;
    gap: .75rem;
    max-width: 420px;
    width: 100%;
}

.lesson-promo-progress .xp-track {
    flex: 1;
}

.lesson-promo-side {
    align-items: center;
    display: grid;
    gap: .9rem;
    justify-items: center;
}

.lesson-promo-keys {
    display: flex;
    gap: .4rem;
}

.lesson-promo-keys kbd {
    background: var(--finger-color);
    border: var(--border);
    border-radius: 10px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
    color: var(--finger-ink);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    min-width: 46px;
    padding: .5rem 0;
    text-align: center;
}

.profile-lessons {
    background: var(--banana-soft);
    border: var(--border);
    border-radius: var(--radius-ctl);
    color: var(--ink);
    display: grid;
    gap: .5rem;
    padding: .9rem 1rem;
    text-decoration: none;
}

.profile-lessons:hover {
    background: var(--banana);
}

.profile-lessons .profile-xp-label strong {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
}

.profile-lessons-next {
    font-weight: 700;
}

@media (max-width: 700px) {
    .lesson-promo {
        grid-template-columns: minmax(0, 1fr);
        padding: 22px;
    }

    .lesson-promo-side {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        justify-content: space-between;
    }

    .lesson-promo-side .btn {
        flex: 1 1 auto;
    }

    .lesson-promo-keys kbd {
        min-width: 40px;
    }
}

/* ---------- Kompaktas: tekstas ir klaviatūra telpa į ekraną be slinkimo (kompiuteris) ---------- */
@media (min-width: 641px) {
    main:has(.lesson-screen) {
        padding-top: .5rem;
    }

    .lesson-screen {
        gap: .75rem;
    }

    /* viena eilutė: Atgal | pavadinimas | WPM, tikslumas, raundas */
    .lesson-screen .race-topbar {
        align-items: center;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .lesson-screen .race-leave {
        grid-column: auto;
    }

    .lesson-screen .race-title-wrap {
        gap: .25rem;
    }

    .lesson-screen .race-title-wrap h1 {
        font-size: 1.6rem;
    }

    .lesson-screen .stat-pill {
        min-width: 5.5rem;
        padding: .2rem .8rem;
    }

    .lesson-screen .stat-pill strong {
        font-size: 1.3rem;
    }

    /* klavišų žetonai ir atsiliepimas vienoje eilutėje, tekstas – po jais */
    .lesson-screen .lesson-text-card {
        gap: .5rem 1rem;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 1rem 1.5rem;
    }

    .lesson-chips {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
    }

    .lesson-text {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .lesson-feedback {
        align-self: center;
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .lesson-text {
        font-size: 28px;
        line-height: 1.8;
    }

    .lesson-feedback {
        margin-top: 0;
    }

    .lesson-keys {
        gap: .5rem;
        padding: 1rem 1.5rem;
    }

    .kb-key {
        height: 40px;
    }

    .lesson-hands {
        max-width: 380px;
    }
}

/* žemas langas: rankų paveikslėlis nebetelpa, lieka klaviatūra (Pagalba vis tiek rodo kitą klavišą) */
@media (min-width: 641px) and (max-height: 780px) {
    .lesson-hands {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kb-key, .hand-finger, .lesson-chip i, .lesson-node {
        transition: none;
    }
}

.lessons-path {
    margin-bottom: 1.5rem;
}

.lessons-path h2 {
    margin: 0 0 .25rem;
}

.lessons-path .lessons-progress {
    color: var(--ink);
    margin-bottom: .5rem;
}

.lessons-path .lessons-progress strong {
    color: var(--leaf);
}

.path-prizes {
    display: grid;
    gap: .4rem;
    list-style: none;
    margin: 1rem 0 .75rem;
    padding: 0;
}

.path-prizes li {
    align-items: center;
    color: var(--ink-a60);
    display: flex;
    gap: .5rem;
}

.path-prizes li.is-reached {
    color: var(--ink);
}

.path-prizes li.is-reached .ui-icon {
    color: var(--banana-shadow);
}

.path-prizes small {
    color: var(--ink-a60);
}

.path-note {
    color: var(--ink-a60);
    font-size: .9rem;
    margin: 0;
}

/* Mėnesio iššūkis (Views/Challenge/Index.cshtml): rašymo ekranas – įprastas Views/Race/Play.cshtml */
.challenge-page {
    margin: 0 auto;
    max-width: 760px;
}

.challenge-card {
    margin-bottom: 1.5rem;
}

.challenge-words {
    font-weight: 700;
    margin: .5rem 0 1rem;
    padding-left: 1.4rem;
    word-break: break-word;
}

.challenge-board {
    display: grid;
    gap: .5rem;
    margin: .75rem 0 0;
    padding-left: 1.4rem;
}

.challenge-board li::marker {
    font-weight: 800;
}

.challenge-board li {
    padding-left: .25rem;
}

.challenge-board li strong {
    margin-right: .5rem;
}

.challenge-board small {
    color: var(--ink-a60);
}