/*
 * SlimmeKids School – gedeelde stijl voor score- en eindkaarten, de Topschool-pil en de Top 10-knop (v1.0, 2026-10-03).
 * Zelfde huisstijl als /school/index.html en de schoolversies van Ballonrekenen en Letters:
 * systeemletter (--ui), inkt #1c3348, lijnen #d5dee7 / #e6edf3, papier #f3f6fa, hoeken 8px (knoppen) en 10px (kaarten),
 * geen zware schaduwen, kleine labels in hoofdletters (.7rem, .08em), gekozen = inkt, eigen school = oranje selectie + groen label.
 * Gebruikt door Kleurketting en Atlas Agent School; laden ná de eigen <style> van de pagina.
 * Klassen sk-fit-c1 / sk-fit-c2 / sk-fit-wide zet /school/sk-school-kaartfit.js als een kaart niet past (iPad staand, A–A groot).
 * © SlimmeKids – https://www.slimmekids.be
 */

/* ---------- knoppen (zelfde als de inlogknoppen van SlimmeKids School) ---------- */
.btn { border-radius: 8px; }
.btn.primary:hover, .btn.primary:active { background: #274865; border-color: #274865; }

/* ---------- kaarten over het speelveld: start, einde, gewonnen ---------- */
.card {
    background: #fff;
    border: 1px solid var(--line, #d5dee7);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(28, 51, 72, .06), 0 10px 28px rgba(28, 51, 72, .10);
    padding: clamp(1rem, 2vmin, 1.6rem) clamp(1.1rem, 2.4vmin, 1.9rem);
}
.card h2,
body.st-pro .card h2 {
    margin: 0 0 .35rem;
    font-family: var(--ui);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--ink);
    font-size: calc(clamp(1.3rem, 2.4vmin, 1.75rem) * var(--cz, 1));
}
.card p { margin: 0 0 .75rem; color: var(--text, #3e556b); line-height: 1.5; font-size: calc(clamp(.98rem, 1.6vmin, 1.15rem) * var(--cz, 1)); }
.card .big-score,
body.st-pro .card .big-score {
    margin: .1rem 0 .25rem;
    font-family: var(--ui);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--ink);
    font-size: calc(clamp(2.4rem, 6vmin, 3.8rem) * min(var(--cz, 1), 1.25));
}
.card .record {
    display: inline-block;
    margin: 0 0 .7rem;
    padding: .2rem .6rem;
    border-radius: 99px;
    background: #1f9d45;
    color: #fff;
    font-size: calc(.74rem * min(var(--cz, 1), 1.3));
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.card .school-result {
    margin: 0 auto .75rem !important;
    max-width: 34rem;
    padding: .5rem .75rem;
    border: 1px solid #e6edf3;
    border-radius: 8px;
    background: #f7fafc;
    color: var(--text, #3e556b) !important;
    font-weight: 500;
    line-height: 1.45;
}
.card .school-result.mine { border-color: #c9ead5; background: #f0faf3; color: #17663a !important; }
.card-btns { gap: .6rem; }
.card .btn,
body.st-pro .card .btn {
    min-height: calc(52px * min(var(--cz, 1), 1.3));
    padding: 0 1.2rem;
    font-size: calc(1.05rem * min(var(--cz, 1), 1.3));
}
.card .btn.sk-t10-btn .sk-t10-ico { font-size: 1em; }
.pick { border-radius: 8px; }

/* compact 1: minder witruimte (korte speelvelden, groot schuifje) */
.card.sk-fit-c1 { padding: .75rem 1rem .8rem; }
.card.sk-fit-c1 h2 { margin-bottom: .2rem; }
.card.sk-fit-c1 p { margin-bottom: .45rem; line-height: 1.4; }
.card.sk-fit-c1 .big-score { margin: 0 0 .15rem; font-size: calc(clamp(2rem, 5vmin, 3rem) * min(var(--cz, 1), 1.15)); }
.card.sk-fit-c1 .record { margin-bottom: .4rem; }
.card.sk-fit-c1 .school-result { margin-bottom: .5rem !important; padding: .35rem .6rem; }
.card.sk-fit-c1 .card-btns { gap: .45rem; }
.card.sk-fit-c1 .btn { min-height: calc(48px * min(var(--cz, 1), 1.2)); padding: 0 .9rem; }
.card.sk-fit-c1 .choose { margin-bottom: .5rem; }
.card.sk-fit-c1 .choose-label { margin-bottom: .25rem; }
.card.sk-fit-c1 .picks { gap: .4rem; margin-bottom: .55rem; }
.card.sk-fit-c1 .pick { min-height: calc(48px * min(var(--cz, 1), 1.2)); padding: .3rem .6rem; }
.card.sk-fit-c1 .legend { margin-bottom: .5rem; }
/* compact 2: nog kleiner (alleen als het echt nodig is) */
.card.sk-fit-c2 h2 { font-size: calc(1.2rem * min(var(--cz, 1), 1.3)); }
.card.sk-fit-c2 p { font-size: calc(.95rem * min(var(--cz, 1), 1.3)); }
.card.sk-fit-c2 .big-score { font-size: calc(2rem * min(var(--cz, 1), 1.15)); }
.card.sk-fit-c2 .btn { min-height: 48px; font-size: calc(1rem * min(var(--cz, 1), 1.2)); }
.card.sk-fit-c2 .pick { min-height: 48px; font-size: calc(.95rem * min(var(--cz, 1), 1.2)); }
.card.sk-fit-c2 .pick small { font-size: calc(.72rem * min(var(--cz, 1), 1.2)); }
.card.sk-fit-c2 .legend { display: none; }
/* breed: de kaart ligt over het hele speelgebied (onder de bovenbalk), met een lichte sluier */
.card.sk-fit-wide {
    position: fixed;
    left: 50%;
    top: calc(var(--sk-top, 64px) + (var(--sk-vh, 100vh) - var(--sk-top, 64px)) / 2);
    transform: translate(-50%, -50%);
    z-index: var(--sk-wide-z, 45);
    width: min(calc(100vw - 136px), 46rem);
    max-height: calc(var(--sk-vh, 100vh) - var(--sk-top, 64px) - 20px);
}
body.sk-card-wide::before {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: var(--sk-top, 64px);
    z-index: calc(var(--sk-wide-z, 45) - 1);
    background: rgba(243, 246, 250, .9);
}
/* sluier achter een kaart die op het speelveld zelf blijft */
.sk-has-card { position: relative; }
.sk-has-card::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(243, 246, 250, .55); pointer-events: none; }

/* ---------- uitleg- en meldingsvensters ---------- */
.modal-card { border: 1px solid var(--line, #d5dee7); border-radius: 10px; box-shadow: 0 12px 40px rgba(16, 32, 48, .18); }
.modal-card h2, body.st-pro .modal-card h2 { font-family: var(--ui); font-weight: 700; letter-spacing: -.01em; font-size: 1.4rem; color: var(--ink); }
.modal-card.rev-card, body.st-pro .modal-card.rev-card { border-top: 4px solid #fb8c00; border-radius: 10px; }
.modal-card.rev-card h2, body.st-pro .modal-card.rev-card h2 { font-size: calc(clamp(1.4rem, 2.8vmin, 1.9rem) * var(--cz, 1)); color: var(--ink); }
.modal-card.rev-card .rev-lead { font-size: calc(clamp(1.02rem, 1.7vmin, 1.2rem) * var(--cz, 1)); }
.rev-demo, body.st-pro .rev-demo { border-radius: 8px; }
.rev-btns .btn.primary { min-height: calc(56px * min(var(--cz, 1), 1.3)); font-size: calc(1.15rem * min(var(--cz, 1), 1.3)); }
.modal-card.rev-card.sk-fit-c1 { padding: .9rem 1.1rem .8rem; }
.modal-card.rev-card.sk-fit-c1 h2 { margin-bottom: .3rem; }
.modal-card.rev-card.sk-fit-c1 .rev-lead { margin-bottom: .6rem; }
.modal-card.rev-card.sk-fit-c1 .rev-demo { margin-bottom: .7rem; padding: .5rem .8rem; gap: .35rem; }
.modal-card.rev-card.sk-fit-c2 .rev-demo { display: none; }

/* ---------- zijpaneel: scores in dezelfde letter ---------- */
.score b, body.st-pro .score b { font-family: var(--ui); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.score.best b { color: #c25e00; }

/* ---------- Topschool-pil: rustig label zoals in de schoolapps ---------- */
.top-pill,
body.st-pro .top-pill {
    gap: .55rem;
    height: 48px;
    margin: 0;
    padding: 0 .85rem;
    border: 1px solid var(--line, #d5dee7);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 600;
    box-shadow: none;
}
.top-pill .tp-ico { display: none; }
.top-pill .tp-lbl {
    margin-right: .15rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted, #5b7084);
}
.top-pill .tp-score { padding-left: .6rem; border-left: 1px solid #e6edf3; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.top-pill.mine { border-color: #f0c08a; background: linear-gradient(165deg, #fff8f1 0%, #ffe2bd 100%); color: var(--ink); box-shadow: inset 0 -3px 0 #ff9a3c; }
.top-pill.mine .tp-score { color: var(--ink); border-left-color: rgba(28, 51, 72, .15); }
.top-pill.empty { border-color: var(--line, #d5dee7); background: #fff; color: var(--muted, #5b7084); font-weight: 500; box-shadow: none; }
.top-pill.sk-t10-pill:hover { filter: none; background: #f4f7fb; box-shadow: none; }
.top-pill.mine.sk-t10-pill:hover { background: linear-gradient(165deg, #fff8f1 0%, #ffd7a3 100%); box-shadow: inset 0 -3px 0 #ff9a3c; }