/* ==========================================================================
   busibot.css - de stijl van BusiBot.eu
   Gebouwd voor de telefoon eerst; de bredere schermen krijgen er ruimte bij.
   Het donkerblauwe verloop met de cyaan gloed is de bestaande BusiBot-stijl.

   Lokaal : C:\dev\busibot.eu\site\assets\busibot.css
   Server : /public_html/assets/busibot.css
   ========================================================================== */

:root {
    --inkt:        #eaf2ff;
    --inkt-zacht:  rgba(234, 242, 255, 0.72);
    --inkt-flauw:  rgba(234, 242, 255, 0.52);
    --cyaan:       #37e6ff;
    --cyaan-diep:  #0a9fd8;
    --glas:        rgba(255, 255, 255, 0.045);
    --glas-op:     rgba(255, 255, 255, 0.09);
    --rand:        rgba(255, 255, 255, 0.13);
    --rand-op:     rgba(55, 230, 255, 0.42);
    --diep:        rgba(6, 14, 26, 0.72);
    --schaduw:     0 18px 45px rgba(0, 0, 0, 0.30);
    --rond:        20px;
    --rond-klein:  13px;
    --raak:        50px;           /* alles wat je aanraakt is minstens zo hoog */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Het verloop hoort op html EN op body.
   Staat het alleen op body, dan geeft de browser dat door aan het doek en
   schildert hij het maar zo hoog als het venster: op een lange bladzijde wordt
   alles onder de eerste schermhoogte wit. Gemeten op 02-09-2026. */
html {
    -webkit-text-size-adjust: 100%;
    min-height: 100%;
    background-color: #07111f;
    background-image:
        radial-gradient(circle at 12% 6%,  rgba(0, 255, 255, 0.10), transparent 32%),
        radial-gradient(circle at 88% 94%, rgba(0, 153, 255, 0.18), transparent 36%),
        linear-gradient(135deg, #07111f 0%, #0d1b2f 45%, #132742 100%);
}

body {
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--inkt);
    background: transparent;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* het fijne raster op de achtergrond, net als op de oude pagina */
.sterren {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
}

.blad {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
}

.vw {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------- kopbalk */
.kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: var(--glas);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--schaduw);
}

.kop-logo { display: inline-flex; align-items: center; }
.kop-logo img {
    height: 42px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.18));
}

.kop-taal select {
    min-height: 44px;
    max-width: 44vw;
    padding: 8px 10px;
    border-radius: var(--rond-klein);
    border: 1px solid var(--rand);
    background: var(--diep);
    color: var(--inkt);
    font-size: 15px;
    font-family: inherit;
}
.kop-taal select:focus-visible { outline: 2px solid var(--cyaan); outline-offset: 2px; }

.leus {
    text-align: center;
    font-size: clamp(18px, 5vw, 26px);
    font-weight: 800;
    letter-spacing: 0.4px;
    margin: 4px 0 18px;
    text-shadow: 0 0 16px rgba(0, 255, 255, 0.20);
}

/* ------------------------------------------------------------------ vak */
.vak {
    padding: 18px 15px 20px;
    margin-bottom: 16px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: var(--glas);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--schaduw);
}

.vak-titel {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: clamp(18px, 4.6vw, 23px);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 6px;
}
.vak-teken { font-size: 1.15em; line-height: 1; }

.vak-uitleg {
    color: var(--inkt-zacht);
    font-size: 15px;
    margin-bottom: 14px;
}

/* ---------------------------------------------------------- invoerbalk */
.balk {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
}

.balk-veld {
    grid-column: 1 / -1;
    min-height: var(--raak);
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    background: var(--diep);
    color: var(--inkt);
    font-size: 16px;              /* 16px voorkomt inzoomen op iPhone */
    font-family: inherit;
}
.balk-veld::placeholder { color: var(--inkt-flauw); }
.balk-veld:focus-visible { outline: 2px solid var(--cyaan); outline-offset: 1px; border-color: transparent; }

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--raak);
    padding: 0 22px;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    color: #04121c;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--cyaan) 0%, var(--cyaan-diep) 100%);
    box-shadow: 0 10px 26px rgba(10, 159, 216, 0.30);
    transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}
.knop:hover { transform: translateY(-2px); filter: brightness(1.07); }
.knop:active { transform: translateY(0); }
.knop:disabled { opacity: 0.5; cursor: default; transform: none; }
.knop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.knop-hoofd { flex: 1; }

.knop-licht {
    color: var(--inkt);
    background: var(--glas-op);
    border-color: var(--rand-op);
    box-shadow: none;
}

.micro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--raak);
    min-height: var(--raak);
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    background: var(--glas-op);
    color: var(--inkt);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.micro svg { width: 23px; height: 23px; fill: currentColor; }
.micro:hover { background: rgba(255, 255, 255, 0.15); }
.micro:focus-visible { outline: 2px solid var(--cyaan); outline-offset: 2px; }
.micro.luistert {
    border-color: var(--rand-op);
    color: var(--cyaan);
    animation: pols 1.25s ease-in-out infinite;
}
@keyframes pols {
    0%, 100% { box-shadow: 0 0 0 0 rgba(55, 230, 255, 0.42); }
    60%      { box-shadow: 0 0 0 12px rgba(55, 230, 255, 0); }
}

.microstand {
    margin-top: 9px;
    font-size: 14px;
    color: var(--cyaan);
}

/* ------------------------------------------------------- het personage */
.toneel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    margin: 4px 0 18px;
}

.vierkant {
    position: relative;
    width: min(78vw, 320px);
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--rand-op);
    background: radial-gradient(circle at 50% 35%, rgba(55, 230, 255, 0.12), rgba(7, 17, 31, 0.9) 70%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 22px 50px rgba(0, 0, 0, 0.42),
                0 0 60px rgba(55, 230, 255, 0.10);
    flex: none;
}

.speler {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: translateX(26%) scale(0.94);
    transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.9, 0.3, 1);
    will-change: opacity, transform;
}
.speler-op  { opacity: 1; transform: translateX(0) scale(1); }
.speler-weg { opacity: 0; transform: translateX(-26%) scale(0.94); }

[dir="rtl"] .speler      { transform: translateX(-26%) scale(0.94); }
[dir="rtl"] .speler-op   { transform: translateX(0) scale(1); }
[dir="rtl"] .speler-weg  { transform: translateX(26%) scale(0.94); }

.naamplaat {
    position: absolute;
    inset-inline: 10px;
    bottom: 10px;
    padding: 7px 12px;
    border-radius: 12px;
    background: rgba(5, 12, 22, 0.78);
    border: 1px solid var(--rand);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-align: start;
}
.naamplaat strong { display: block; font-size: 16px; letter-spacing: 0.3px; }
.naamplaat span {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    color: var(--inkt-flauw);
}

/* het peinzen terwijl er gewacht wordt */
.peinst {
    position: absolute;
    inset-inline-end: 12px;
    top: 12px;
    display: flex;
    gap: 5px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(5, 12, 22, 0.8);
    border: 1px solid var(--rand-op);
}
.peinst i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cyaan);
    animation: wip 1.2s ease-in-out infinite;
}
.peinst i:nth-child(2) { animation-delay: 0.16s; }
.peinst i:nth-child(3) { animation-delay: 0.32s; }
@keyframes wip {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-5px); }
}

/* de tekstballon onder het vierkant */
.ballon {
    position: relative;
    width: 100%;
    max-width: 520px;
    padding: 14px 16px;
    border: 1px solid var(--rand);
    border-radius: 18px;
    background: var(--diep);
    box-shadow: var(--schaduw);
}
.ballon::before {
    content: "";
    position: absolute;
    top: -9px;
    inset-inline-start: 34px;
    width: 16px; height: 16px;
    background: var(--diep);
    border-inline-start: 1px solid var(--rand);
    border-block-start: 1px solid var(--rand);
    transform: rotate(45deg);
}
.ballon p { font-size: 16px; line-height: 1.55; }
.ballon.komt { animation: ballonop 0.34s ease both; }
@keyframes ballonop {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------- uitslag */
.uitslag { margin-top: 16px; }

.uitslag-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--inkt-flauw);
}
.uitslag-kop img {
    width: 34px; height: 34px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--rand);
}
.uitslag-kop strong { color: var(--inkt); font-size: 15px; }

.tekst { font-size: 16px; line-height: 1.68; overflow-wrap: anywhere; }
.tekst > * + * { margin-top: 11px; }
.tekst h3 { font-size: 17px; font-weight: 800; }
.tekst h4 { font-size: 16px; font-weight: 700; color: var(--inkt-zacht); }
.tekst ul, .tekst ol { padding-inline-start: 22px; }
.tekst li + li { margin-top: 5px; }
.tekst strong { color: #fff; }
.tekst code {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 0.92em;
}
.tekst a { color: var(--cyaan); }

.verwijzing {
    display: inline-block;
    min-width: 20px;
    padding: 0 5px;
    margin: 0 1px;
    border-radius: 6px;
    background: rgba(55, 230, 255, 0.16);
    border: 1px solid rgba(55, 230, 255, 0.3);
    color: var(--cyaan);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    line-height: 18px;
    text-align: center;
    vertical-align: 1px;
}
.verwijzing:hover { background: rgba(55, 230, 255, 0.3); }

/* de tabel met live cijfers */
.live {
    margin-top: 14px;
    border: 1px solid var(--rand-op);
    border-radius: var(--rond-klein);
    background: rgba(55, 230, 255, 0.05);
    overflow: hidden;
}
.live-kop {
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--cyaan);
    background: rgba(55, 230, 255, 0.09);
}
.live-rij {
    display: grid;
    grid-template-columns: minmax(96px, 40%) 1fr;
    gap: 10px;
    padding: 8px 13px;
    font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.live-rij dt { color: var(--inkt-flauw); }
.live-rij dd { overflow-wrap: anywhere; }
.live-rij dd a { color: var(--cyaan); }

/* bronnen */
.bronnen { margin-top: 16px; }
.bronnen h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--inkt-flauw);
    margin-bottom: 8px;
}
.bronnen ol { list-style: none; display: grid; gap: 6px; }
.bronnen li { display: flex; gap: 9px; align-items: baseline; font-size: 14px; }
.bronnen .nr {
    flex: none;
    min-width: 21px;
    height: 21px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--rand);
    color: var(--inkt-flauw);
    font-size: 12px;
    text-align: center;
    line-height: 19px;
}
.bronnen a { color: var(--inkt); text-decoration: none; overflow-wrap: anywhere; }
.bronnen a:hover { color: var(--cyaan); text-decoration: underline; }
.bronnen .domein { color: var(--inkt-flauw); font-size: 12px; }

.gemeten {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--inkt-flauw);
}

/* ---------------------------------------------------------- pil-knoppen */
.voorbeelden, .vervolg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}
.voorbeelden-kop, .vervolg-kop {
    width: 100%;
    font-size: 13px;
    color: var(--inkt-flauw);
    margin-bottom: 1px;
}
.pil {
    min-height: 40px;
    padding: 7px 14px;
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--glas-op);
    color: var(--inkt-zacht);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    text-align: start;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.pil:hover { background: rgba(55, 230, 255, 0.13); border-color: var(--rand-op); color: var(--inkt); }
.pil:focus-visible { outline: 2px solid var(--cyaan); outline-offset: 2px; }

/* ------------------------------------------------------------- wachten */
.wacht {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    font-size: 15px;
    color: var(--inkt-zacht);
}
.stipjes { display: inline-flex; gap: 5px; }
.stipjes i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cyaan);
    animation: wip 1.2s ease-in-out infinite;
}
.stipjes i:nth-child(2) { animation-delay: 0.16s; }
.stipjes i:nth-child(3) { animation-delay: 0.32s; }

.melding {
    padding: 12px 14px;
    border-radius: var(--rond-klein);
    border: 1px solid rgba(255, 170, 90, 0.35);
    background: rgba(255, 170, 90, 0.09);
    font-size: 15px;
}

/* -------------------------------------------------------------- onderaan */
.onderregel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.tekstknop {
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--inkt-flauw);
    font-size: 14px;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.tekstknop:hover { color: var(--cyaan); }

.oproep {
    text-align: center;
    padding: 22px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: linear-gradient(135deg, rgba(55, 230, 255, 0.09), rgba(10, 159, 216, 0.05));
}
.oproep h2 { font-size: clamp(17px, 4.4vw, 21px); font-weight: 800; margin-bottom: 6px; }
.oproep p { color: var(--inkt-zacht); font-size: 15px; margin-bottom: 15px; }

.voet { text-align: center; padding: 8px 0 4px; font-size: 14px; }
.voet a { color: var(--inkt-zacht); text-decoration: none; }
.voet a:hover { color: var(--cyaan); text-decoration: underline; }
.voet span { margin: 0 8px; color: var(--inkt-flauw); }
.voet-klein { margin-top: 5px; font-size: 12.5px; color: var(--inkt-flauw); }

/* ------------------------------------------------------- bredere schermen */
@media (min-width: 620px) {
    .blad { padding: 24px 24px 40px; }
    .kop { padding: 12px 18px; }
    .kop-logo img { height: 52px; }
    .vak { padding: 24px 24px 26px; }
    .balk { grid-template-columns: 1fr auto auto; }
    .balk-veld { grid-column: auto; }
    .knop-hoofd { flex: none; }
    .vierkant { width: 330px; }
    .live-rij { grid-template-columns: 210px 1fr; }
}

@media (min-width: 900px) {
    .toneel {
        flex-direction: row;
        align-items: flex-start;
        gap: 22px;
    }
    .vierkant { width: 300px; }
    .ballon { margin-top: 22px; }
    .ballon::before {
        top: 28px;
        inset-inline-start: -9px;
        border-block-start: none;
        border-inline-end: none;
        border-inline-start: 1px solid var(--rand);
        border-block-end: 1px solid var(--rand);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Advertenties
   Twee regels, allebei hard: een eenheid krijgt PRECIES de plaats die ze
   vraagt (nooit bijknippen, dat verbieden de voorwaarden van Google), en de
   balk onderaan bedekt nooit iets, want de bladzijde houdt er evenveel
   ruimte voor vrij.
   ========================================================================== */

:root {
    --ad-rail-b: 300px;      /* large skyscraper */
    --ad-rail-h: 600px;
    --ad-balk:    78px;      /* de balk onderaan op een telefoon */
}

/* --- de zijrails ---------------------------------------------------------- */
.bb-rail {
    display: none;                 /* pas zichtbaar als er echt plaats is */
    position: fixed;
    top: 96px;
    width: var(--ad-rail-b);
    height: var(--ad-rail-h);
    z-index: 2;
}
.bb-rail ins { display: inline-block; }

/* De inhoud is 820 px breed. Twee rails van 300 px plus 24 px lucht aan elke
   kant vragen 820 + 2*(300+24+24) = 1516 px. Daaronder tonen we ze niet, want
   dan zouden ze de tekst overlappen. */
@media (min-width: 1516px) {
    .bb-rail { display: block; }
    .bb-rail-links  { inset-inline-end: calc(50% + 410px + 24px); }
    .bb-rail-rechts { inset-inline-start: calc(50% + 410px + 24px); }
}

/* --- de balk onderaan op een telefoon ------------------------------------- */
.bb-adbalk {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    height: calc(var(--ad-balk) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    align-items: center;
    justify-content: center;
    background: rgba(5, 12, 22, 0.92);
    border-top: 1px solid var(--rand);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Enkel op een telefoon, en enkel als het scherm hoog genoeg is. Ligt het
   toestel dwars, dan zou de balk te veel van het scherm opeten. */
@media (max-width: 899px) and (min-height: 450px) {
    .bb-adbalk { display: flex; }
    body.heeft-adbalk .blad {
        padding-bottom: calc(var(--ad-balk) + 28px + env(safe-area-inset-bottom));
    }
}

/* De advertentie onder een antwoord. Krijgt precies haar eigen maat en staat
   los van de tekst, zodat ze nooit voor inhoud wordt aangezien. */
.bb-ad-antwoord {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    min-height: 250px;
}
.bb-ad-antwoord ins { display: inline-block; }