/* Stránka Pomůcky: tři interaktivní lekce biatlonové střelby.
   Rozvržení stojí na Bootstrapu, tady jsou jen věci, které Bootstrap nemá:
   hero, lišta postupu, kresby mířidel, terč, praporky a dechový kruh. */

/* HERO */
.pomucky-hero {
    background: var(--g-900);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    position: relative;
    overflow: hidden;
    padding: var(--space-lg) var(--space-md) var(--space-lg);
}
.pomucky-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(135,210,47,0.12) 0%, transparent 70%),
        radial-gradient(circle at 15% 20%, rgba(135,210,47,0.06) 0%, transparent 50%);
}
.pomucky-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
}
.pomucky-hero h1 {
    color: white;
    font-size: clamp(2.8rem, 8vw, 5rem);
    line-height: 0.9;
    margin-bottom: var(--space-sm);
    font-family: 'Bebas Neue', sans-serif;
}
.pomucky-hero h1 em { color: var(--g-400); font-style: normal; }
.pomucky-hero-sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.65);
    max-width: 56ch;
    margin: 0;
    line-height: 1.6;
}

/* karty lekcí v hero: přehled obsahu, kotvy do sekcí */
.lesson-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: var(--space-md);
    text-align: left;
}
.lesson-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(135,210,47,0.25);
    text-decoration: none;
    color: #fff;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
    position: relative;
}
.lesson-card:hover {
    background: rgba(135,210,47,0.12);
    border-color: var(--g-400);
    transform: translateY(-4px);
    color: #fff;
}
.lesson-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lesson-card-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: var(--g-400);
}
.lesson-card-top .fa-solid {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.5);
}
.lesson-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    margin: 0;
    letter-spacing: 0.5px;
}
.lesson-card .lesson-card-done {
    display: none;
    position: absolute;
    top: -10px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--g-400);
    color: var(--g-900);
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.lesson-card.done .lesson-card-done { display: flex; }

/* LEPIVÁ LIŠTA POSTUPU */
.lesson-rail {
    position: sticky;
    top: 64px;
    z-index: 800;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0;
}
.lesson-rail-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    overflow-x: auto;
}
.rail-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: #64748b;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.rail-step:hover { background: #f1f5f9; color: #1e293b; }
.rail-step .rail-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex: 0 0 auto;
}
.rail-step.active { background: var(--g-900); color: #fff; }
.rail-step.active .rail-num { border-color: var(--g-400); color: var(--g-400); }
.rail-step.done .rail-num {
    background: var(--g-400);
    border-color: var(--g-400);
    color: var(--g-900);
}
.rail-sep {
    flex: 0 0 24px;
    height: 2px;
    background: #e2e8f0;
    border-radius: 2px;
}
.rail-progress-label {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    white-space: nowrap;
    padding-left: 12px;
}

/* SEKCE LEKCÍ */
.lesson-section {
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--space-lg) 20px;
    scroll-margin-top: 130px;
}
.lesson-section + .lesson-section { border-top: 1px solid #f1f5f9; }
.lesson-section h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    color: #1e293b;
    margin-bottom: var(--space-sm);
    line-height: 1;
}
.lesson-info { position: relative; }
@media (min-width: 992px) {
    .lesson-info-sticky { position: sticky; top: 140px; }
}
.lesson-info .desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

/* číslované kroky "Jak na to" */
.howto-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    margin-bottom: 12px;
}
.howto-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: krok;
}
.howto-steps li {
    counter-increment: krok;
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}
.howto-steps li::before {
    content: counter(krok);
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--g-100);
    color: var(--g-600);
    font-weight: 800;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(4px);
}
.lesson-tip {
    display: flex;
    gap: 10px;
    align-items: baseline;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 0.9rem;
    color: #92400e;
    font-weight: 500;
    line-height: 1.5;
}
.lesson-tip .fa-solid { color: #d97706; }
.lesson-tip strong, .status-msg strong { font-weight: 800; }

.game-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.game-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.game-head .game-instruction {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

/* ťukací tlačítka: bez zoomu dvojitým ťuknutím na mobilu */
.game-btn, .theory summary, .video-details summary { touch-action: manipulation; }
/* web přepisuje .btn na průhledný rámeček, obrysová tlačítka by jinak splývala s pozadím */
.game-container .btn-outline-secondary { border-color: #cbd5e1; background: #fff; }
.game-container .btn-outline-secondary:hover { border-color: var(--g-500); background: var(--g-100); color: #1e293b; }
/* akční tlačítka lekcí: všechna stejně velká, v řadě stejně široká */
.game-actions > .btn { flex: 0 1 17rem; justify-content: center; }

/* LEKCE 1: MÍŘIDLA
   Obraz mířidel podle Obr. 26 učebnice Metodika střelby v biatlonu
   (MU Brno 2016). Poměrový model normalizovaný na průměr světlého
   kruhu dioptru D = 300 px:
   - tunel mušky:     vnější průměr 0,47 D = 141 px, kresba 0,06 D = 18 px
   - kruhová muška:   vnější průměr 0,14 D = 42 px, kresba 0,013 D = 4 px
   - terč:            průměr 0,058 D = 18 px, světýlko 0,013 D = 4 px
   - příčky:          síla 0,013 D = 4 px, jen mezi tunelem a muškou
   - sloupek:         0,065 D = 20 px nahoře, dole 0,16 D = 48 px
   - bílý pás terčů:  výška 0,126 D = 38 px, rozteč terčů 0,19 D = 57 px
   - žlutý štítek:    0,21 D = 64 px
   Plocha je vždy užší než displej, a protože má touch-action: manipulation,
   svislé tažení prstem přes ni posouvá stránku. */
.sights-stage {
    --sights-size: min(340px, calc(100vw - 84px));
    width: var(--sights-size);
    height: var(--sights-size);
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background: #000;
    cursor: crosshair;
    box-shadow: 0 0 0 10px #f1f5f9;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .25s ease;
}
.sights-stage:focus-visible { outline: 3px solid var(--g-500); outline-offset: 12px; }
.sights-stage.flash { filter: brightness(2.5); }
.sights-stage.ring-success { box-shadow: 0 0 0 10px #bbf7d0; }
.sights-stage.ring-warning { box-shadow: 0 0 0 10px #fef3c7; }
.sights-stage.ring-danger { box-shadow: 0 0 0 10px #fecaca; }
#sights-game-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 340px;
    height: 340px;
    transform-origin: 0 0;
    transform: scale(var(--sights-scale, 1));
    pointer-events: none;
}

/* vrstva 1: terčová stěna, bílý pás s černými terči a štítkem stanoviště */
.layer-targets {
    position: absolute;
    inset: -120px;
    background: #f2f2f0;
    z-index: 1;
    will-change: transform;
}
.sight-board {
    position: absolute;
    width: 64px;
    height: 64px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-100% - 19px));
    background: #f0b400;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 42px;
    font-family: Arial, sans-serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
}
.sight-band {
    position: absolute;
    width: 700px;
    height: 38px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid #b5b5b5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 39px;
}
.bi-target {
    width: 18px;
    height: 18px;
    background: #000;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* vrstva 2: mířidla, tunel s příčkami, kruhová muška, sloupek */
.layer-front-sight {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}
.sight-ring-outer {
    width: 141px;
    height: 141px;
    border: 18px solid #000;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* příčky drží kruhovou mušku, nepřetínají ji */
.sight-strut {
    position: absolute;
    width: 32px;
    height: 4px;
    background: #000;
    top: 50%;
    transform: translateY(-50%);
}
.sight-strut.left { left: 0; }
.sight-strut.right { right: 0; }
.sight-inner-element {
    width: 42px;
    height: 42px;
    border: 4px solid #000;
    border-radius: 50%;
    background: transparent;
}
/* sloupek: nahoře úzký, dolů se rozšiřuje (silueta tunelu a hlavně) */
.sight-post {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 210px;
    background: #000;
    clip-path: polygon(29% 0, 71% 0, 100% 100%, 0 100%);
}

/* vrstva 3: dioptr, světlý kruh měkce přecházející do černé. Clonka je
   pár cm od oka, takže ji oko nikdy nevidí ostře. Vrstva je záměrně
   velká, aby při krajní paralaxe nevyjela černá plocha z průhledu. */
.layer-rear-sight {
    position: absolute;
    inset: -40%;
    z-index: 3;
    background: radial-gradient(circle,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0)   23%,
        rgba(0,0,0,0.35) 28%,
        rgba(0,0,0,0.85) 33%,
        #000            39%);
    will-change: transform;
}

/* video jako rozbalovací detail */
.video-details, .theory {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.video-details { margin-top: var(--space-sm); }
.video-details summary, .theory summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 20px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .2s;
}
.video-details summary::-webkit-details-marker, .theory summary::-webkit-details-marker { display: none; }
.video-details summary:hover, .theory summary:hover { background: #f8fafc; }
.video-details summary .fa-solid, .theory summary .fa-solid { color: var(--g-600); }
.video-details summary .chev, .theory summary .chev { margin-left: auto; transition: transform .2s; color: #94a3b8; }
.video-details[open] summary .chev, .theory[open] summary .chev { transform: rotate(180deg); }
.video-details .ratio { border-radius: 0; }

/* TEORIE U LEKCE */
.theory { margin-top: var(--space-md); background: #fbfdf8; border-color: var(--g-200); }
.theory-body { padding: 4px 20px 18px; }
.theory-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 0.93rem;
    line-height: 1.6;
    color: #334155;
}
.theory-card p:last-child { margin-bottom: 0; }
.theory-h {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--g-600);
    margin-bottom: 10px;
}
.theory-h .fa-solid { margin-right: 4px; }
.theory-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 12px; font-family: 'DM Sans', Arial, sans-serif; }
.theory-svg-clock { max-width: 240px; }
.theory-list { padding-left: 1.1rem; margin: 0; }
.theory-list li + li { margin-top: 8px; }
.theory-src { font-size: 0.82rem; color: #64748b; margin: 12px 0 0; }
.theory-src a { color: var(--g-600); font-weight: 700; }
.wind-strengths { display: flex; flex-wrap: wrap; gap: 6px; }
.wind-strengths span {
    background: var(--g-100);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.82rem;
    color: #1e293b;
}

/* LEKCE 2: CVAKÁNÍ NA VÍTR */
.wind-scene { margin: 0; max-width: 460px; }
.wind-scene svg { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #e2e8f0; }
.wind-flag path { fill: #f97316; stroke: #c2410c; stroke-width: 0.8; }
.wind-flag.is-flying path {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: wind-flap var(--flap, 1s) ease-in-out infinite alternate;
}
@keyframes wind-flap {
    from { transform: skewY(-4deg) scaleX(0.94); }
    to   { transform: skewY(4deg) scaleX(1); }
}
.wind-label {
    margin-top: 6px;
    font-weight: 800;
    color: #1e293b;
    font-size: 0.95rem;
}
.wind-label .fa-solid { color: #f97316; }
.wind-target-wrap { width: min(260px, 100%); }
.wind-target { display: block; width: 100%; height: auto; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.wind-grid line { stroke: #94a3b8; stroke-width: 0.04; opacity: 0.8; }
.wind-grid line.axis { stroke-width: 0.07; opacity: 1; }
.wind-shot { fill: #ef4444; stroke: #fff; stroke-width: 0.12; transition: fill .3s ease, opacity .3s ease; }
.wind-shot.is-nastrel { fill: #2563eb; }
.wind-shot.is-old { fill: #94a3b8; opacity: 0.85; }
.wind-shot.is-prev-round { fill: #94a3b8; opacity: 0.35; }
.wind-scale-note { font-size: 0.75rem; color: #64748b; margin: 4px 0 0; }
.wind-dial {
    border-top: 1px solid #e2e8f0;
    padding-top: 14px;
    margin-top: 14px;
    max-width: 460px;
}

/* dioptr s kolečky: tlačítka leží přes polovinu kolečka a jeho písmeno */
.diopter { position: relative; width: 100%; max-width: 380px; }
.diopter-svg { display: block; width: 100%; height: auto; }
.dp-knurl { stroke: #5b6157; stroke-width: 1.3; }
.dp-edge { stroke: #000; stroke-width: 1.5; }
.dp-tick { stroke: #f6f7f4; stroke-width: 1.2; }
.dp-num { fill: #f6f7f4; font: 700 11px var(--font-body, sans-serif); text-anchor: middle; }
.dp-index { stroke: var(--g-400); stroke-width: 2; fill: var(--g-400); }
.dp-roll { transition: transform .18s cubic-bezier(.3, 1.4, .6, 1); }
.dp-knob.is-tick .dp-index { animation: dp-tick .22s ease-out; }
@keyframes dp-tick { 0% { stroke: #fff; fill: #fff; } 100% { stroke: var(--g-400); fill: var(--g-400); } }
.dp-zone {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--g-900);
    font-size: 0.95rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.dp-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    line-height: 1;
}
.dp-tag b { font-weight: 800; color: #c2410c; }
.dp-tag i { font-size: 0.8rem; }
.dp-zone:hover .dp-tag { border-color: var(--g-500); }
.dp-zone:hover { background: rgba(30, 70, 32, .08); }
.dp-zone:active { background: rgba(30, 70, 32, .16); }
.dp-zone:focus-visible { outline: 3px solid var(--g-600); outline-offset: 1px; }
/* polohy ve viewBoxu 340 x 230 */
.dp-zone-h, .dp-zone-t { top: 2.6%; height: 24.4%; width: 30.6%; }
.dp-zone-h { left: 10.6%; justify-content: flex-start; }
.dp-zone-t { left: 41.2%; justify-content: flex-end; }
.dp-zone-r, .dp-zone-l { left: 63.5%; width: 25.9%; justify-content: center; }
.dp-zone-r { top: 27.8%; height: 33.9%; align-items: flex-start; }
.dp-zone-l { top: 61.7%; height: 36.5%; align-items: flex-end; }
.dp-readout {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 6px;
    font-weight: 700;
    color: var(--g-900);
    font-variant-numeric: tabular-nums;
}
.dp-read-name { font-weight: 400; color: #4a5046; margin-right: 2px; }
.dp-read b { color: #c2410c; }
.breath-legend .dot-inhale { background: #38bdf8; }
.breath-legend .dot-exhale { background: #fb923c; }
.breath-legend .dot-pause { background: #87d22f; }
.wind-cheat { font-size: 0.78rem; color: #64748b; margin: 10px 0 0; line-height: 1.45; }

/* LEKCE 3: DECH */
#breathing-circle-wrap {
    width: min(300px, calc(100vw - 72px));
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#breathing-circle {
    width: 43%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    color: white;
    transition: background-color 0.4s ease, border-color 0.4s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
    border: 6px solid transparent;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 5;
}
#breathing-circle.flash { background-color: #fff; }
.breath-progress-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}
.progress-bg { fill: none; stroke: #e2e8f0; stroke-width: 12; }
.progress-inhale { fill: none; stroke: #38bdf8; stroke-width: 12; opacity: 0.3; }
.progress-exhale { fill: none; stroke: #fb923c; stroke-width: 12; opacity: 0.3; }
.progress-pause { fill: none; stroke: #87d22f; stroke-width: 12; opacity: 0.3; }
.progress-active {
    fill: none;
    stroke: var(--g-400);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke 0.4s ease;
}
.breath-inhale { background-color: #38bdf8; border-color: #0ea5e9; }
.breath-exhale { background-color: #fb923c; border-color: #f97316; }
.breath-pause { background-color: #87d22f; border-color: #6da324; box-shadow: 0 0 50px rgba(135,210,47,0.4) !important; }
.breath-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
}
.breath-legend span { display: inline-flex; align-items: center; gap: 6px; }
.breath-legend i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.breath-mini { width: 56px; height: 56px; flex: 0 0 56px; }

/* STAVOVÉ HLÁŠKY, ZÁVĚR */
.status-msg {
    font-weight: 500;
    margin-top: 12px;
    min-height: 40px;
    font-size: 0.98rem;
    padding: 10px 18px;
    border-radius: 12px;
    width: 100%;
    max-width: 460px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.status-msg:empty { padding: 0; min-height: 0; }
.breath-result .status-msg:empty { display: none; }
.status-msg.active-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.status-msg.active-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.status-msg.active-warning { background: #fffbeb; color: #b45309; border: 1px solid #fef3c7; }
.status-msg.active-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

.finish-band {
    background: var(--g-900);
    color: #fff;
    padding: var(--space-lg) 20px;
    margin-top: var(--space-lg);
}
.finish-band h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--space-sm);
}
.finish-band h2 em { color: var(--g-400); font-style: normal; }
.finish-checks {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}
.finish-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.45);
    font-weight: 700;
    font-size: 0.85rem;
}
.finish-check .fc-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.finish-check.done { color: #fff; }
.finish-check.done .fc-circle {
    background: var(--g-800, #1e4620);
    border-color: var(--g-400);
    color: var(--g-400);
}
.finish-band p { color: rgba(255,255,255,0.65); max-width: 50ch; margin: 0; }

.citation-footer {
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    padding: 60px 20px;
    scroll-margin-top: 130px;
}
.citation-content {
    max-width: 800px;
    margin: 0 auto;
    color: #64748b;
    text-align: left;
}
.citation-content h5 { color: #1e293b; margin-bottom: 20px; font-weight: 800; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.1em; }
.citation-content a { color: var(--g-600); font-weight: 700; text-decoration: none; }
.citation-content a:hover { text-decoration: underline; }

@media (max-width: 991px) {
    .lesson-info { margin-bottom: var(--space-sm); }
}
@media (max-width: 768px) {
    .lesson-cards { grid-template-columns: 1fr; }
    .lesson-card { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
    .lesson-card h3 { font-size: 1.3rem; }
    .lesson-card-top { gap: 10px; }
    .lesson-card-top .fa-solid { display: none; }
    .lesson-section { padding: var(--space-md) 16px; }
    .rail-progress-label { display: none; }
    .rail-sep { flex-basis: 12px; }
    .game-container { padding: 20px 14px; }
    .theory { margin-top: var(--space-sm); }
    .theory summary { padding: 12px 16px; }
    .theory-body { padding: 2px 12px 14px; }
}

/* omezený pohyb: bez dekorativních animací a přechodů */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .lesson-card, .rail-step, .finish-check .fc-circle, .sights-stage,
    .video-details summary .chev, .theory summary .chev, .wind-shot,
    #breathing-circle, .progress-active, .status-msg { transition: none; }
    .lesson-card:hover { transform: none; }
    .wind-flag.is-flying path, .dp-knob.is-tick .dp-index { animation: none; }
    .dp-roll { transition: none; }
}