/* oefen_scoring.css: de oefenbalk boven het scoringsscherm.

   Alleen de oefenmodus gebruikt dit bestand. Het scherm eronder is hetzelfde
   als bij een echte wedstrijd en haalt zijn opmaak uit live_scoring.css; de
   kleuren hier komen uit dezelfde variabelen, zodat donker, licht en het
   kleurenblinde thema alle drie meteen kloppen. */

/*
   De achtergrond komt van de huisstijlregel voor .card.border-0.shadow-sm in
   main.css, die met !important werkt en per thema al klopt. Hier alleen de
   tekstkleur, zodat die met dezelfde thema-variabele meebeweegt.
*/
.oefen-kop {
    color: var(--ls-text);
}

.oefen-badge {
    background: linear-gradient(135deg, var(--ls-brand) 0%, var(--ls-brand-2) 100%);
    color: #fff;
    font-size: .78rem;
}

.oefen-ondertitel {
    color: var(--ls-text);
    opacity: .82;
    font-size: .9rem;
    font-weight: 600;
}

.oefen-intro {
    color: var(--ls-text);
    opacity: .9;
}

.oefen-klein {
    /* Niet var(--ls-muted): dat is een lichte doorschijnende kleur en haalt de
       leesbaarheidsnorm niet. De gewone tekstkleur iets doorschijnend maken
       geeft hetzelfde rustige beeld en blijft in elk thema leesbaar. */
    color: var(--ls-text);
    opacity: .82;
    font-size: .78rem;
}

.oefen-sectietitel {
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ls-text);
    opacity: .75;
    margin-bottom: .15rem;
}

/* ── Teller ───────────────────────────────────────────────────────────── */

/*
   De teller staat altijd op donkerblauw, ook in het lichte thema. De kleuren
   hieronder zijn daarom vast en niet uit de thema-variabelen: var(--ls-gold)
   wordt in het lichte thema donkerbruin en is op dit blauw niet te lezen.
*/
.oefen-teller-doos {
    background: linear-gradient(135deg, var(--ls-brand) 0%, var(--ls-brand-2) 100%);
    background-color: #1e3c72;
    border-radius: 1rem;
    padding: 1rem;
    color: #fff;
}

.oefen-teller-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .82);
}

.oefen-teller-cijfer {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    color: #f5c518;
}

.oefen-teller-uitleg {
    font-size: .75rem;
    color: rgba(255, 255, 255, .82);
}

/* De reeks is waar je het in een spel voor doet: hoeveel er achter elkaar in
   een keer goed gingen, en hoe ver je vandaag kwam. */
.oefen-reeks-rij {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin: .35rem 0 .3rem;
}

.oefen-reeks-vak {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .12rem .55rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .12);
}

.oefen-reeks-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .82);
}

.oefen-reeks-cijfer {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    display: inline-block;
}

/* Groeit de reeks, dan springt het cijfer even op. */
.oefen-reeks-groeit {
    animation: oefenReeksSprong .45s cubic-bezier(.2, .8, .3, 1.4);
}

@keyframes oefenReeksSprong {
    0%   { transform: scale(1);   color: #fff; }
    40%  { transform: scale(1.5); color: #f5c518; }
    100% { transform: scale(1);   color: #fff; }
}

.oefen-reeks-kwijt {
    display: inline-block;
    margin-left: .3rem;
    opacity: .85;
    font-style: italic;
}

/* ── Waar is dit voor? ────────────────────────────────────────────────── */

.oefen-doel {
    padding: .6rem .8rem;
    border-radius: .75rem;
    border-left: 3px solid var(--ls-gold);
    background: rgba(30, 60, 114, .1);
    color: var(--ls-text);
}

.oefen-doel-titel {
    font-weight: 700;
    font-size: .9rem;
}

.oefen-doel-uitleg {
    font-size: .78rem;
    opacity: .82;
    line-height: 1.35;
}

/* ── Manier van oefenen en niveau ─────────────────────────────────────── */

.oefen-modus-knop,
.oefen-niveau-knop {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 44px;
    padding: .7rem .9rem;
    border-radius: .85rem;
    border: 1px solid rgba(220, 232, 255, .18);
    background: rgba(30, 60, 114, .14);
    color: var(--ls-text);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.oefen-modus-knop:hover,
.oefen-niveau-knop:hover {
    background: rgba(30, 60, 114, .28);
}

.oefen-modus-knop.actief,
.oefen-niveau-knop.actief {
    border-color: var(--ls-gold);
    background: linear-gradient(135deg, var(--ls-brand) 0%, var(--ls-brand-2) 100%);
    background-color: #1e3c72;
    box-shadow: 0 0 0 .18rem var(--ls-gold-glow);
    /* Vast wit: de kaart is hier altijd donkerblauw, terwijl var(--ls-text) in
       het lichte thema donker wordt. Dat gaf donkere tekst op donkerblauw. */
    color: #fff;
}

.oefen-modus-knop.actief .oefen-modus-uitleg,
.oefen-niveau-knop.actief .oefen-niveau-uitleg {
    opacity: .9;
}

.oefen-modus-titel,
.oefen-niveau-titel {
    font-weight: 700;
    font-size: .95rem;
}

.oefen-modus-uitleg,
.oefen-niveau-uitleg {
    font-size: .75rem;
    opacity: .75;
    line-height: 1.3;
}

/* ── De opdrachtbalk ──────────────────────────────────────────────────── */

.oefen-opdracht-balk {
    position: sticky;
    top: 0;
    z-index: 1020;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--ls-brand) 0%, var(--ls-brand-2) 100%);
    background-color: var(--ls-brand);
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .28);
    color: #fff;
}

.oefen-opdracht-binnen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
}

.oefen-opdracht-tekst {
    flex: 1 1 16rem;
    min-width: 0;
}

.oefen-opdracht-kop {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .8;
}

.oefen-opdracht-zin {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
}

.oefen-opdracht-knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.oefen-opdracht-knoppen .btn {
    min-height: 44px;
}

/* Klaar met deze worp: de knop trekt de aandacht naar de volgende. */
.oefen-knop-klaar {
    box-shadow: 0 0 0 .2rem rgba(245, 197, 24, .45);
}

/* ── Terugkoppeling ───────────────────────────────────────────────────── */

.oefen-terugkoppeling {
    font-size: .85rem;
    line-height: 1.4;
    margin-top: .3rem;
}

.oefen-terugkoppeling:empty {
    display: none;
}

.oefen-terugkoppeling-goed { color: #d6ffe4; }
.oefen-terugkoppeling-fout { color: #ffd9dc; }
.oefen-terugkoppeling-klaar { font-weight: 700; }
/* Niet goed en niet fout: er is even niets gevraagd. Zachtgeel, zodat het
   opvalt zonder als een misser te lezen. */
.oefen-terugkoppeling-wacht { color: #ffe9a8; }

.oefen-juiste-knop {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .5rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .18);
    font-weight: 700;
    white-space: nowrap;
}

/* ── Dobbelstenen ─────────────────────────────────────────────────────── */

.oefen-dobbel-doos {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.oefen-dobbel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: .6rem;
    background: #fdfdfd;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .3);
}

.oefen-oog {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #1a2740;
}

.oefen-dobbel-som {
    font-size: 1.4rem;
    font-weight: 900;
    color: #f5c518;   /* vast, zie de opmerking bij de teller */
    min-width: 1.6rem;
    text-align: center;
}

/* Tijdens het gooien tuimelen de stenen even. Wie prefers-reduced-motion aan
   heeft staan krijgt de uitkomst zonder beweging: de worp klopt dan nog steeds,
   alleen zonder het rollen. */
.oefen-dobbel.oefen-rolt {
    animation: oefenTuimel .28s linear infinite;
}

@keyframes oefenTuimel {
    0%   { transform: rotate(0deg)   scale(1); }
    25%  { transform: rotate(-12deg) scale(1.06); }
    50%  { transform: rotate(8deg)   scale(1); }
    75%  { transform: rotate(-6deg)  scale(1.04); }
    100% { transform: rotate(0deg)   scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .oefen-dobbel.oefen-rolt { animation: none; }
    .oefen-reeks-groeit { animation: none; }
}

/* ── Kleine schermen ──────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .oefen-opdracht-binnen {
        gap: .6rem;
        padding: .7rem .8rem;
    }

    .oefen-opdracht-zin {
        font-size: .95rem;
    }

    .oefen-dobbel {
        width: 40px;
        height: 40px;
        padding: 5px;
    }

    .oefen-opdracht-knoppen {
        width: 100%;
    }

    .oefen-opdracht-knoppen .btn {
        flex: 1 1 auto;
    }

    .oefen-teller-cijfer {
        font-size: 1.6rem;
    }
}

/* ── Knoppen die bij dit niveau nog niet horen ────────────────────────── */
/*
   Het attribuut hidden is hier niet genoeg: de tier-knoppen hebben d-flex van
   Bootstrap, en die zet display met !important. Deze regel staat later in de
   volgorde en wint daarom wel.
*/
.oefen-verborgen {
    display: none !important;
}

/* ── Je reeks doorsturen ──────────────────────────────────────────────── */
/*
   Staat in de altijd blauwe scoredoos, dus vaste kleuren. De knop verschijnt
   pas als er een reeks is om over te vertellen.
*/
.oefen-deel-knop {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    min-height: 38px;
}

.oefen-deel-knop:hover,
.oefen-deel-knop:focus {
    background: rgba(255, 255, 255, .16);
    border-color: #fff;
    color: #fff;
}

/* ── De volgorde van het scherm tijdens het oefenen ───────────────────── */

/*
   Bij een echte wedstrijd kijkt de scorer eerst naar de stand en dan naar de
   knoppen. Bij het oefenen is het andersom: er staat een opdracht, en het enige
   wat telt is de knop erbij vinden. Stonden het scorebord en de line score
   ertussen, dan moest de oefenaar bij elke worp een half scherm naar beneden.

   Daarom schuiven in de oefenmodus de tabbladen met de knoppen naar boven, vlak
   onder de opdrachtbalk, en zakken het scorebord en de line score eronder. Het
   scherm zelf verandert niet: alleen deze pagina hangt de blokken in een andere
   volgorde, want de kaarten zijn allemaal kinderen van dezelfde container.
*/
.oefen-schermvolgorde {
    display: flex;
    flex-direction: column;
}

.oefen-schermvolgorde > .ls-blok-kruimels  { order: 1; }
.oefen-schermvolgorde > .ls-blok-tabs      { order: 2; }
.oefen-schermvolgorde > #gameTabContent    { order: 3; }
.oefen-schermvolgorde > .ls-blok-scorebord { order: 4; }
.oefen-schermvolgorde > .ls-blok-linescore { order: 5; }

/* ── Na elke worp naar de knoppen springen ────────────────────────────── */

.oefen-keuze .form-check-input {
    /* Groot genoeg om op een telefoon te raken zonder te mikken. */
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1rem;
}

.oefen-keuze .form-check-input:checked {
    background-color: var(--ls-brand-2);
    border-color: var(--ls-brand-2);
}

.oefen-keuze .form-check-label {
    color: var(--ls-text);
    font-weight: 600;
    font-size: .9rem;
    padding-left: .2rem;
}

/* ── Count naast de knoppen ───────────────────────────────────────────── */

/*
   De count (ballen, slagen, uits) stond over de volle breedte boven de
   knoppen en duwde ze daarmee een half scherm naar beneden, terwijl hij zelf
   maar drie getallen laat zien. Naast de knoppen vult hij ruimte die er toch
   al was, en staat alles wat je tijdens een worp nodig hebt in één blik.

   Alleen vanaf een laptopbreedte: op een telefoon staat alles onder elkaar en
   hoort de count boven de knoppen te blijven, want daar kijk je eerst.
*/
@media (min-width: 992px) {
    .oefen-schermvolgorde .ls-live-links {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 1rem;
    }

    .oefen-schermvolgorde .ls-live-links > .bso-card {
        /* Smaller dan dit gaat "STRIKES" over twee regels breken. */
        flex: 0 1 20rem;
        margin-bottom: 0 !important;
    }

    .oefen-schermvolgorde .ls-live-links > .controls-card {
        flex: 1 1 22rem;
    }

    /* De werpersacties verschijnen pas als er een loper staat en horen dan
       onder de twee, over de volle breedte. Hetzelfde geldt voor de snelle
       acties, die sinds het scoringsscherm drie kolommen heeft onder de
       knoppen staan in plaats van naast het veld. */
    .oefen-schermvolgorde .ls-live-links > #pitcherActionsCard,
    .oefen-schermvolgorde .ls-live-links > .quick-actions-card {
        flex: 1 1 100%;
    }
}

/* ── De stand in de balk die blijft plakken ───────────────────────────── */

/*
   Het scorebord staat tijdens het oefenen onderaan, en dat betekende scrollen
   om te zien wat je zojuist had ingevoerd. Hier staat het in het klein, in de
   balk die toch al meeschuift: dan is de uitslag van je klik meteen zichtbaar
   zonder dat het scorebord de knoppen wegduwt.
*/
.oefen-stand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .7rem;
    border-radius: .7rem;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    flex-shrink: 0;
}

.oefen-stand-kant {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.oefen-stand-label {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .8);
}

.oefen-stand-cijfer {
    font-size: 1.35rem;
    font-weight: 900;
}

.oefen-stand-inning {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    padding: 0 .35rem;
    border-left: 1px solid rgba(255, 255, 255, .22);
    border-right: 1px solid rgba(255, 255, 255, .22);
    /* Zonder vaste breedte springt de balk bij elke wissel van Boven naar
       Onder, omdat die woorden niet even lang zijn. */
    min-width: 3.4rem;
}

.oefen-stand-helft {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .8);
}

.oefen-stand-nummer {
    font-size: 1.05rem;
    font-weight: 800;
}

/* Het cijfer springt even op als de stand verandert: dat is de bevestiging
   dat de knop die je koos ook echt een run opleverde. */
.oefen-stand-groeit {
    animation: oefenStandSprong .5s cubic-bezier(.2, .8, .3, 1.4);
}

@keyframes oefenStandSprong {
    0%   { transform: scale(1);    color: #fff; }
    40%  { transform: scale(1.35); color: #f5c518; }
    100% { transform: scale(1);    color: #fff; }
}

/* ══════════════════════════════════════════════════════════════════
   DE OEFENPAGINA HOUDT DE OUDE VOLGORDE

   Op het echte scoringsscherm staat de werperskaart vanaf 1200 pixels onder
   het veld: daar is een kolom die ruim is en onderaan leeg bleef. Daarom staat
   die kaart in het sjabloon nu achter de veldkaart.

   Deze pagina heeft die kolom niet. Alles staat hier onder elkaar, en dan
   hoort de werper meteen na de slagman te komen: dat zijn de twee spelers van
   dezelfde worp. De volgorde in het sjabloon is voor het scoringsscherm; hier
   wordt ze teruggedraaid.
══════════════════════════════════════════════════════════════════ */
.oefen-schermvolgorde .ls-live-rechts { display: flex; flex-direction: column; }
.oefen-schermvolgorde .ls-live-rechts .field-card { order: 1; }