* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body, html {
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    overflow: hidden;
    background-color: #1b5e20;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

#game-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    position: relative;
}



#speelveld {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    height: 100%;
    background-color: #134e17;
    position: relative;
}

.boven-container, .beneden-container {
    width: 98%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#top-balk-info {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;
}

#instructie-box {
    background-color: rgba(0, 0, 0, 0.85);
    color: #ffe082;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border: 2px solid #000000;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
}

.boven-rij, .beneden-rij {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.logo-naast-balk {
    height: 75px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
    flex-shrink: 0;
}

.balk-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.plank {
    height: 75px;
    background: linear-gradient(180deg, rgba(141, 110, 99, 0.95) 0%, rgba(93, 64, 55, 0.95) 100%);
    border: 2px solid #3e2723;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8px;
    gap: 4px;
    position: relative;
    overflow: hidden;
    z-index: 10;
    width: 100%;
    border-radius: 8px;
}

.plank-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.35);
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    pointer-events: none;
}

#tafel {
    flex-grow: 1;
    width: 98%;
    margin: 5px 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
    overflow-y: auto;
    gap: 20px;
    cursor: pointer;
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('fotos/achtergrond.jpg?v=1.0.51');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.tafel-helft {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
}

.tafel-helft-links { align-items: flex-start; }
.tafel-helft-rechts { align-items: flex-end; }

.tafel-set {
    display: flex;
    gap: 6px;
    background: transparent;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 6px;
    min-height: 55px;
    min-width: 60px;
    cursor: grab;
    transition: all 0.3s ease;
}

.tafel-set.computer-aangepast {
    border-color: #ffb300 !important;
    background-color: rgba(255, 179, 0, 0.2) !important;
    box-shadow: 0 0 15px #ffb300 !important;
}

.tafel-set:active { cursor: grabbing; }

.actie-knop {
    background-color: #ffb300;
    color: #000;
    border: none;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 12px;
}

.actie-knop:hover { background-color: #ffca28; }

#melding-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    border-radius: 10px;
}

#melding-venster {
    background-color: #2e7d32;
    border: 3px solid #ffe082;
    border-radius: 12px;
    padding: 25px 30px;
    width: 400px;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#melding-tekst {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
}

#melding-sluit-knop {
    background-color: #ffb300;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    align-self: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

#melding-sluit-knop:hover { background-color: #ffca28; }

#pot-container {
    width: 220px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(5px);
    flex-shrink: 0;
    overflow: hidden;
}

.pot-logo {
    display: block;
    width: 145px;
    max-width: calc(100% - 30px);
    height: auto;
    max-height: 145px;
    object-fit: contain;
    flex-shrink: 0;
    margin: 2px auto 5px;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.65));
}

#pot-stenen-zone {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

#pot-stenen {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#pot-scrollbediening {
    display: none;
}

#speler-stenen-zone {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

#speler-scrollbediening {
    display: none;
}

.pot-aantal {
    color: #ffe082;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 224, 130, 0.45);
}

.steen-kop {
    width: 50px;
    height: 35px;
    border-radius: 4px;
    box-shadow: 2px 3px 5px rgba(0,0,0,0.5);
    position: absolute;
    border: 2px solid #ffe082;
    cursor: pointer;
    will-change: transform, z-index;
    pointer-events: auto;
    background-size: cover;
    background-position: center;
}

.steen-kop:hover {
    transform: scale(1.2) rotate(0deg) !important;
    z-index: 99999 !important;
    border-color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}

.steen-open {
    width: 40px;
    height: 55px;
    border-radius: 4px;
    box-shadow: 2px 3px 5px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    user-select: none;
    flex-shrink: 0;
    border: 1px solid #ffffff;
    background-size: cover;
    background-position: center;
    cursor: grab;
    position: relative;
}

.steen-open.geselecteerd {
    border: 3px solid #ffb300 !important;
    transform: translateY(-8px);
    box-shadow: 0 0 12px #ffb300;
}

.steen-open:active { cursor: grabbing; }
.steen-open:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.7); }

.steen-tegenstander {
    width: 40px;
    height: 55px;
    border-radius: 4px;
    box-shadow: 2px 3px 5px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid #ffffff;
    background-color: #f5f5f5;
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.zwevende-steen {
    position: absolute;
    height: 55px;
    border-radius: 6px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid #ffffff;
    background-size: cover;
    background-position: center;
    z-index: 999999;
    pointer-events: none;
    transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

.steen-label {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    font-size: clamp(14px, 1.8vw, 20px);
    font-weight: 900;
    pointer-events: none;
}

.kleur-rood { color: #FF0000; }
.kleur-blauw { color: #1976d2; }
.kleur-geel { color: #f57c00; }
.kleur-zwart { color: #212121; }
.kleur-joker { color: #7b1fa2; font-size: clamp(14px, 1.8vw, 20px); }

/* ------------------------------------------------------------
   MOBIEL EN TABLET — versie 1.0.34
   De computerweergave hierboven blijft ongewijzigd.
   ------------------------------------------------------------ */

#mobiele-actiebalk {
    display: none;
}

.mobiele-actieknop {
    min-height: 38px;
    padding: 7px 11px;
    border: 2px solid rgba(255, 224, 130, 0.8);
    border-radius: 8px;
    background-color: #263238;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.45);
}

.mobiele-actieknop-hoofd {
    background-color: #ffb300;
    color: #111111;
    border-color: #ffe082;
}

/* Ook een brede tablet met aanraakscherm krijgt knoppen ter vervanging
   van Enter en slepen, terwijl de ruime desktopindeling behouden blijft. */
@media (pointer: coarse) {
    #mobiele-actiebalk {
        display: grid;
        grid-template-columns: minmax(125px, 1fr) auto auto;
        gap: 5px;
        width: 100%;
        margin-bottom: 4px;
    }

    .steen-open,
    .steen-kop,
    .mobiele-actieknop {
        touch-action: manipulation;
    }
}

@media (max-width: 900px) {
    :root {
        --motokub-pot-hoogte: 108px;
        --motokub-onderbalk-hoogte: 132px;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        background-color: #134e17;
        overscroll-behavior: none;
    }

    #game-container {
        position: relative;
        display: block;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding-top: var(--motokub-pot-hoogte);
        padding-bottom: calc(var(--motokub-onderbalk-hoogte) + env(safe-area-inset-bottom));
    }

    /* De pot staat altijd vast bovenaan. */
    #pot-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5000;
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 8px;
        width: 100%;
        height: var(--motokub-pot-hoogte);
        min-height: var(--motokub-pot-hoogte);
        padding: max(6px, env(safe-area-inset-top)) 8px 6px;
        border-left: none;
        border-top: none;
        border-bottom: 2px solid rgba(255, 255, 255, 0.22);
        overflow: hidden;
        background-color: rgba(4, 53, 18, 0.98);
        backdrop-filter: blur(8px);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.55);
    }

    .pot-logo {
        width: 68px;
        max-width: 68px;
        max-height: 68px;
        margin: 0;
        align-self: center;
    }

    #pot-stenen {
        width: 100%;
        height: 86px;
        min-height: 86px;
        overflow: hidden;
    }

    .pot-aantal {
        margin: 0;
        padding: 5px 8px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Het middengebied gebruikt exact de ruimte tussen de vaste boven- en onderbalk. */
    #speelveld {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 6px;
        justify-content: flex-start;
        align-items: stretch;
        gap: 6px;
        overflow: hidden;
    }

    .boven-container {
        flex: 0 0 auto;
        width: 100%;
        gap: 4px;
    }

    #top-balk-info {
        min-height: 36px;
        padding-right: 82px;
    }

    #instructie-box {
        max-width: 100%;
        padding: 5px 9px;
        font-size: 12px;
        line-height: 1.15;
        text-align: center;
    }

    #top-balk-info > button {
        right: 0 !important;
        padding: 4px 7px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }

    .boven-rij,
    .beneden-rij {
        width: 100%;
        gap: 0;
    }

    .logo-naast-balk {
        display: none;
    }

    .balk-wrapper {
        width: 100%;
        min-width: 0;
        gap: 3px;
    }

    .plank {
        width: 100%;
        height: 56px;
        min-height: 56px;
        padding: 0 4px;
        gap: 2px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .plank-label {
        font-size: 12px;
        letter-spacing: 1px;
    }

    /* Het speelveld zelf scrolt; de boven- en onderbalk blijven staan. */
    #tafel {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 8px;
        gap: 6px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background-position: center center;
    }

    .tafel-set {
        gap: 2px;
        min-width: 0;
        min-height: 48px;
        padding: 2px;
    }

    .steen-open,
    .steen-tegenstander {
        width: 32px;
        height: 46px;
    }

    .steen-open {
        cursor: pointer;
    }

    .steen-label,
    .kleur-joker {
        padding: 1px 3px;
        font-size: 12px;
    }

    .steen-open.geselecteerd {
        transform: translateY(-4px);
        border-width: 3px !important;
    }

    /* De eigen plank is een echte vaste viewportbalk, niet langer sticky. */
    .beneden-container {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 6000;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: calc(var(--motokub-onderbalk-hoogte) + env(safe-area-inset-bottom));
        min-height: calc(var(--motokub-onderbalk-hoogte) + env(safe-area-inset-bottom));
        padding: 4px 4px max(4px, env(safe-area-inset-bottom));
        border-top: 2px solid rgba(255, 224, 130, 0.55);
        background-color: rgba(19, 78, 23, 0.99);
        box-shadow: 0 -5px 14px rgba(0, 0, 0, 0.55);
        overflow: hidden;
    }

    #mobiele-actiebalk {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: minmax(125px, 1fr) auto auto;
        gap: 5px;
        width: 100%;
        margin-bottom: 4px;
    }

    .mobiele-actieknop {
        min-height: 36px;
        padding: 6px 9px;
        font-size: 12px;
    }

    .beneden-rij {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    /* Alle eigen stenen staan op één horizontaal verschuifbare plank. */
    #balk-wrapper-beneden {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    #balk-wrapper-beneden .plank {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        gap: 2px !important;
        padding: 0 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #balk-wrapper-beneden .steen-open {
        display: flex !important;
        flex: 0 0 auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #melding-overlay,
    #bug-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        z-index: 10000 !important;
    }

    #melding-venster {
        width: min(400px, calc(100vw - 24px));
        max-height: calc(100dvh - 24px);
        padding: 18px 16px;
        overflow-y: auto;
    }
}

@media (max-width: 600px) {
    :root {
        --motokub-pot-hoogte: 96px;
        --motokub-onderbalk-hoogte: 100px;
    }

    #pot-container {
        grid-template-columns: 70px minmax(0, 1fr) auto;
        column-gap: 5px;
        height: 96px;
        min-height: 96px;
        padding: max(4px, env(safe-area-inset-top)) 5px 4px;
    }

    .pot-logo {
        width: 64px;
        max-width: 64px;
        max-height: 64px;
    }

    #pot-stenen {
        height: 76px;
        min-height: 76px;
    }

    .pot-aantal {
        padding: 4px 6px;
        font-size: 11px;
    }

    #speelveld {
        padding: 4px;
        gap: 4px;
    }

    #top-balk-info {
        min-height: 32px;
        padding-right: 69px;
    }

    #instructie-box {
        padding: 4px 7px;
        font-size: 10px;
    }

    #top-balk-info > button {
        padding: 3px 5px !important;
        font-size: 9px !important;
    }

    .plank {
        height: 49px;
        min-height: 49px;
        padding: 0 2px;
        gap: 2px;
    }

    #tafel {
        min-height: 0;
        padding: 5px;
    }

    .tafel-set {
        min-height: 42px;
        gap: 2px;
        padding: 1px;
    }

    .steen-open,
    .steen-tegenstander {
        width: 27px;
        height: 40px;
    }

    #balk-wrapper-beneden .steen-open {
        width: 25px;
        height: 40px;
    }

    .steen-label,
    .kleur-joker {
        padding: 1px 2px;
        font-size: 10px;
    }

    #mobiele-actiebalk {
        grid-template-columns: minmax(105px, 1fr) auto auto;
        gap: 3px;
    }

    .mobiele-actieknop {
        min-height: 33px;
        padding: 5px 7px;
        font-size: 11px;
    }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 600px) {
    #pot-container {
        height: 82px;
        min-height: 82px;
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .pot-logo {
        width: 46px;
        max-width: 46px;
        max-height: 46px;
    }

    #pot-stenen {
        height: 64px;
        min-height: 64px;
    }

    :root {
        --motokub-pot-hoogte: 82px;
        --motokub-onderbalk-hoogte: 96px;
    }

    #tafel {
        min-height: 0;
    }
}



/* ------------------------------------------------------------
   LEESBARE ONDERBALK — versie 1.0.34
   Grotere eigen stenen op mobiel staand en tablet staand.
   Tablet liggend krijgt eveneens een vaste onderbalk.
   ------------------------------------------------------------ */

/* Tablet staand: grotere stenen en cijfers op de eigen onderbalk. */
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
    #balk-wrapper-beneden .steen-open {
        width: 44px !important;
        height: 60px !important;
        border-width: 2px !important;
    }

    #balk-wrapper-beneden .steen-label,
    #balk-wrapper-beneden .kleur-joker {
        padding: 2px 5px !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }

    #balk-wrapper-beneden .plank {
        gap: 4px !important;
        padding: 2px 6px !important;
    }
}

/* Mobiel wordt uitsluitend staand ondersteund: grotere leesbare stenen. */
@media (max-width: 600px) and (orientation: portrait) {
    :root {
        --motokub-onderbalk-hoogte: 190px;
    }

    /* Op mobiel staan de eigen stenen in meerdere leesbare rijen. */
    .beneden-rij {
        align-items: stretch;
    }

    #speler-stenen-zone {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 27px;
        gap: 4px;
        width: 100%;
        height: 100%;
        max-height: 100%;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    #balk-wrapper-beneden {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        padding: 0 0 20px !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        overscroll-behavior: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    #balk-wrapper-beneden::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    #balk-wrapper-beneden .plank {
        display: flex !important;
        flex: 0 0 56px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        gap: 3px !important;
        padding: 2px 4px !important;
        overflow: visible !important;
    }

    #balk-wrapper-beneden .steen-open {
        width: 36px !important;
        height: 50px !important;
        border-width: 2px !important;
        flex: 0 0 36px !important;
    }

    #balk-wrapper-beneden .steen-label,
    #balk-wrapper-beneden .kleur-joker {
        padding: 2px 4px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    /* Altijd zichtbare verticale bediening voor de mobiele spelersstenen. */
    #speler-scrollbediening {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 27px;
        min-width: 27px;
        min-height: 0;
        padding: 1px 0;
        user-select: none;
        touch-action: none;
    }

    #speler-scroll-omhoog,
    #speler-scroll-omlaag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 29px;
        min-height: 29px;
        padding: 0;
        border: 2px solid #ffe082;
        border-radius: 6px;
        background: #ffb300;
        color: #111111;
        font-size: 15px;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
        touch-action: manipulation;
    }

    #speler-scrollspoor {
        position: relative;
        flex: 1 1 auto;
        width: 18px;
        min-height: 45px;
        margin: 0 auto;
        border: 1px solid rgba(255, 224, 130, 0.7);
        border-radius: 9px;
        background: rgba(0, 0, 0, 0.58);
        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
        touch-action: none;
    }

    #speler-scrollgreep {
        position: absolute;
        top: 0;
        left: 2px;
        width: 12px;
        min-height: 30px;
        border: 1px solid #fff3c4;
        border-radius: 7px;
        background: #ffb300;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
        cursor: grab;
        touch-action: none;
    }

    #speler-scrollgreep:active {
        cursor: grabbing;
    }

    #speler-scrollbediening.niet-nodig {
        opacity: 0.45;
    }
}

/*
   Tablet liggend valt vaak buiten de grens van 900 px. Op een echt
   aanraakscherm krijgt deze stand daarom dezelfde vaste onderbalk.
*/
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1366px) and (pointer: coarse),
       (orientation: landscape) and (min-width: 901px) and (max-width: 1366px) and (hover: none) {
    :root {
        --motokub-tablet-liggend-onderbalk: 132px;
    }

    #speelveld {
        padding-bottom: calc(var(--motokub-tablet-liggend-onderbalk) + 10px);
    }

    .beneden-container {
        position: fixed;
        left: 0;
        right: 220px;
        bottom: 0;
        z-index: 6000;
        display: flex;
        flex-direction: column;
        width: auto;
        height: calc(var(--motokub-tablet-liggend-onderbalk) + env(safe-area-inset-bottom));
        min-height: calc(var(--motokub-tablet-liggend-onderbalk) + env(safe-area-inset-bottom));
        padding: 5px 7px max(5px, env(safe-area-inset-bottom));
        border-top: 2px solid rgba(255, 224, 130, 0.55);
        background-color: rgba(19, 78, 23, 0.99);
        box-shadow: 0 -5px 14px rgba(0, 0, 0, 0.55);
        overflow: hidden;
    }

    .beneden-container .logo-naast-balk {
        display: none;
    }

    #mobiele-actiebalk {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: minmax(150px, 1fr) auto auto;
        gap: 6px;
        width: 100%;
        margin-bottom: 5px;
    }

    .mobiele-actieknop {
        min-height: 38px;
        padding: 6px 11px;
        font-size: 13px;
    }

    .beneden-rij {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        align-items: stretch;
        overflow: hidden;
    }

    #speler-stenen-zone {
        width: 100%;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    #balk-wrapper-beneden {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    #balk-wrapper-beneden .plank {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        gap: 4px !important;
        padding: 2px 7px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        visibility: visible !important;
        opacity: 1 !important;
        -webkit-overflow-scrolling: touch;
    }

    #balk-wrapper-beneden .steen-open {
        display: flex !important;
        flex: 0 0 auto !important;
        width: 44px !important;
        height: 60px !important;
        border-width: 2px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #balk-wrapper-beneden .steen-label,
    #balk-wrapper-beneden .kleur-joker {
        padding: 2px 5px !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }
}


/* ------------------------------------------------------------
   TABLET LIGGEND — versie 1.0.37
   De eigen stenen staan in leesbare rijen met een werkende
   verticale schuifbalk en aanraakscroll. Mobiel/staand ongewijzigd.
   ------------------------------------------------------------ */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1366px) {
    html.motokub-aanraakscherm {
        --motokub-tablet-liggend-onderbalk: 196px;
    }

    html.motokub-aanraakscherm #speelveld {
        padding-bottom: calc(var(--motokub-tablet-liggend-onderbalk) + 10px);
    }

    html.motokub-aanraakscherm .beneden-container {
        position: fixed;
        left: 0;
        right: 220px;
        bottom: 0;
        z-index: 6000;
        width: auto;
        height: calc(var(--motokub-tablet-liggend-onderbalk) + env(safe-area-inset-bottom));
        min-height: calc(var(--motokub-tablet-liggend-onderbalk) + env(safe-area-inset-bottom));
        padding: 5px 7px max(5px, env(safe-area-inset-bottom));
        overflow: hidden;
    }

    html.motokub-aanraakscherm .beneden-rij {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    html.motokub-aanraakscherm #balk-wrapper-beneden {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding-right: 3px;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
        scrollbar-width: auto;
        scrollbar-color: #ffb300 rgba(0, 0, 0, 0.45);
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    html.motokub-aanraakscherm #balk-wrapper-beneden .plank {
        display: flex !important;
        flex: 0 0 68px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: 68px !important;
        min-height: 68px !important;
        gap: 4px !important;
        padding: 3px 7px !important;
        overflow: visible !important;
        touch-action: pan-y;
    }

    html.motokub-aanraakscherm #balk-wrapper-beneden .steen-open {
        width: 44px !important;
        height: 60px !important;
        flex: 0 0 44px !important;
        touch-action: pan-y;
    }

    html.motokub-aanraakscherm #balk-wrapper-beneden::-webkit-scrollbar {
        width: 15px;
    }

    html.motokub-aanraakscherm #balk-wrapper-beneden::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.45);
        border: 1px solid rgba(255, 224, 130, 0.35);
        border-radius: 8px;
    }

    html.motokub-aanraakscherm #balk-wrapper-beneden::-webkit-scrollbar-thumb {
        min-height: 38px;
        background: #ffb300;
        border: 2px solid #ffe082;
        border-radius: 8px;
    }
}


/* ------------------------------------------------------------
   TABLET LIGGEND — POT EN TAFEL SCROLLBAAR, versie 1.0.40
   Alleen het stenenvak onder het logo scrolt. Logo en teller blijven staan.
   De tafel kan verticaal doorlopen wanneer veel combinaties zijn neergelegd.
   ------------------------------------------------------------ */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1366px) {
    html.motokub-aanraakscherm #pot-container {
        overflow: hidden !important;
    }

    html.motokub-aanraakscherm #pot-stenen {
        position: relative !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        padding-right: 3px;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-width: auto;
        scrollbar-color: #ffb300 rgba(0, 0, 0, 0.48);
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    html.motokub-aanraakscherm #pot-stenen .pot-stenen-inhoud {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 100%;
        background-color: rgba(19, 78, 23, 0.56);
    }

    /* Blijvend groen leeg stuk onder de laagst geplaatste potstenen. */
    html.motokub-aanraakscherm #pot-stenen .pot-stenen-inhoud::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--pot-groene-ondermarge, 86px);
        background: linear-gradient(
            180deg,
            rgba(19, 78, 23, 0.35),
            rgba(19, 78, 23, 0.95)
        );
        pointer-events: none;
        z-index: 0;
    }

    html.motokub-aanraakscherm #pot-stenen .steen-kop {
        z-index: 1;
    }

    html.motokub-aanraakscherm #pot-stenen .steen-kop {
        touch-action: pan-y;
    }

    html.motokub-aanraakscherm #pot-stenen::-webkit-scrollbar {
        width: 15px;
    }

    html.motokub-aanraakscherm #pot-stenen::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.48);
        border: 1px solid rgba(255, 224, 130, 0.4);
        border-radius: 8px;
    }

    html.motokub-aanraakscherm #pot-stenen::-webkit-scrollbar-thumb {
        min-height: 42px;
        background: #ffb300;
        border: 2px solid #ffe082;
        border-radius: 8px;
    }

    html.motokub-aanraakscherm #tafel {
        overflow-x: auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }
}


/* Altijd zichtbare eigen schuifbalk voor de pot op tablet liggend.
   Systeemschuifbalken worden op tablets vaak automatisch verborgen. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1366px) {
    html.motokub-aanraakscherm #pot-stenen-zone {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 25px;
        gap: 4px;
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
    }

    html.motokub-aanraakscherm #pot-scrollbediening {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 25px;
        min-width: 25px;
        min-height: 0;
        padding: 2px 0;
        user-select: none;
        touch-action: none;
    }

    html.motokub-aanraakscherm #pot-scroll-omhoog,
    html.motokub-aanraakscherm #pot-scroll-omlaag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 25px;
        height: 31px;
        min-height: 31px;
        padding: 0;
        border: 2px solid #ffe082;
        border-radius: 6px;
        background: #ffb300;
        color: #111111;
        font-size: 15px;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
        touch-action: manipulation;
    }

    html.motokub-aanraakscherm #pot-scrollspoor {
        position: relative;
        flex: 1 1 auto;
        width: 17px;
        min-height: 60px;
        margin: 0 auto;
        border: 1px solid rgba(255, 224, 130, 0.65);
        border-radius: 9px;
        background: rgba(0, 0, 0, 0.55);
        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
        touch-action: none;
    }

    html.motokub-aanraakscherm #pot-scrollgreep {
        position: absolute;
        top: 0;
        left: 2px;
        width: 11px;
        min-height: 38px;
        border: 1px solid #fff3c4;
        border-radius: 7px;
        background: #ffb300;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
        cursor: grab;
        touch-action: none;
    }

    html.motokub-aanraakscherm #pot-scrollgreep:active {
        cursor: grabbing;
    }

    html.motokub-aanraakscherm #pot-scrollbediening.niet-nodig {
        opacity: 0.45;
    }
}


/* ------------------------------------------------------------
   MOBIEL STAAND — juiste verticale scroll bij de POT, versie 1.0.39
   De onderste spelersbalk blijft één horizontaal verschuifbare rij.
   ------------------------------------------------------------ */
@media (max-width: 600px) and (orientation: portrait) {
    :root {
        --motokub-onderbalk-hoogte: 104px;
    }

    /* Onderste spelersbalk: géén verticale schuifbalk. */
    #speler-stenen-zone {
        display: block !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        overflow: hidden !important;
    }

    #speler-scrollbediening {
        display: none !important;
    }

    #balk-wrapper-beneden {
        display: block !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #balk-wrapper-beneden .plank {
        display: flex !important;
        flex: 0 0 56px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        gap: 3px !important;
        padding: 2px 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: thin;
    }

    #balk-wrapper-beneden .steen-open {
        width: 36px !important;
        height: 50px !important;
        flex: 0 0 36px !important;
        touch-action: manipulation;
    }

    /* Pot bovenaan: eigen verticale scrollzone en zichtbare bediening. */
    #pot-stenen-zone {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 24px !important;
        gap: 3px !important;
        width: 100% !important;
        height: 76px !important;
        min-height: 76px !important;
        overflow: hidden !important;
    }

    #pot-stenen {
        position: relative !important;
        width: 100% !important;
        height: 76px !important;
        min-height: 76px !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        padding-right: 1px;
        overscroll-behavior: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    #pot-stenen::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    #pot-stenen .pot-stenen-inhoud {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 100%;
        background-color: rgba(19, 78, 23, 0.72);
    }

    #pot-stenen .pot-stenen-inhoud::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--pot-groene-ondermarge, 18px);
        background: linear-gradient(
            180deg,
            rgba(19, 78, 23, 0.45),
            rgba(19, 78, 23, 0.98)
        );
        pointer-events: none;
        z-index: 0;
    }

    #pot-stenen .steen-kop {
        z-index: 1;
        touch-action: pan-y;
    }

    #pot-scrollbediening {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 24px;
        min-width: 24px;
        height: 76px;
        min-height: 76px;
        padding: 0;
        user-select: none;
        touch-action: none;
    }

    #pot-scroll-omhoog,
    #pot-scroll-omlaag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 21px;
        min-height: 21px;
        padding: 0;
        border: 1px solid #ffe082;
        border-radius: 5px;
        background: #ffb300;
        color: #111111;
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
        touch-action: manipulation;
    }

    #pot-scrollspoor {
        position: relative;
        flex: 1 1 auto;
        width: 16px;
        min-height: 28px;
        margin: 0 auto;
        border: 1px solid rgba(255, 224, 130, 0.7);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.58);
        touch-action: none;
    }

    #pot-scrollgreep {
        position: absolute;
        top: 0;
        left: 2px;
        width: 10px;
        min-height: 18px;
        border: 1px solid #fff3c4;
        border-radius: 6px;
        background: #ffb300;
        touch-action: none;
    }

    #pot-scrollbediening.niet-nodig {
        opacity: 0.45;
    }
}


/* Versie 1.0.40: de tabletpot wordt door JavaScript vanaf de bovenrand
   in losse rijen gevuld. Hierdoor klopt de bovenste stand van de greep
   ook zichtbaar met de eerste potstenen direct onder het logo. */


/* ------------------------------------------------------------
   SPELREGELS EN BEDIENING - versie 1.0.42
   ------------------------------------------------------------ */
#top-balk-info {
    position: relative;
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto minmax(90px, 1fr);
    align-items: center;
    gap: 8px;
}

#spelregels-open-knop,
#bug-open-knop {
    border: 2px solid #000000;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.45);
    touch-action: manipulation;
}

#spelregels-open-knop {
    justify-self: start;
    background-color: #ffb300;
    color: #111111;
}

#bug-open-knop {
    justify-self: end;
    background-color: #d32f2f;
    color: #ffffff;
}

#spelregels-open-knop:hover,
#spelregels-open-knop:focus-visible {
    background-color: #ffca28;
}

#bug-open-knop:hover,
#bug-open-knop:focus-visible {
    background-color: #ef5350;
}

#spelregels-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background-color: rgba(0, 0, 0, 0.78);
    z-index: 25000;
    touch-action: pan-y;
}

#spelregels-venster {
    width: min(920px, calc(100vw - 36px));
    max-height: calc(100dvh - 36px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 3px solid #ffe082;
    border-radius: 14px;
    background-color: #174f25;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8);
}

#spelregels-kop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px 13px;
    border-bottom: 2px solid rgba(255, 224, 130, 0.5);
    background-color: #0b3517;
}

#spelregels-kop h2 {
    margin: 0;
    color: #ffe082;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.15;
}

#spelregels-kop p {
    margin: 5px 0 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

#spelregels-kruis {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: #d32f2f;
    color: #ffffff;
    font-size: 29px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

#spelregels-inhoud {
    overflow-y: auto;
    padding: 18px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    user-select: text;
    -webkit-user-select: text;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-color: #ffb300 rgba(0, 0, 0, 0.35);
    scrollbar-width: auto;
}

#spelregels-inhoud::-webkit-scrollbar {
    width: 14px;
}

#spelregels-inhoud::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
}

#spelregels-inhoud::-webkit-scrollbar-thumb {
    background: #ffb300;
    border: 2px solid #fff0b3;
    border-radius: 8px;
}

.spelregels-samenvatting {
    margin-bottom: 16px;
    padding: 13px 15px;
    border: 2px solid #ffe082;
    border-radius: 10px;
    background-color: rgba(255, 179, 0, 0.16);
    color: #ffffff;
}

.spelregels-sectie {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2);
}

.spelregels-sectie:last-child {
    margin-bottom: 0;
}

.spelregels-sectie h3 {
    margin: 0 0 8px;
    color: #ffe082;
    font-size: 19px;
}

.spelregels-sectie p {
    margin: 0 0 9px;
}

.spelregels-sectie p:last-child {
    margin-bottom: 0;
}

.spelregels-sectie ul,
.spelregels-sectie ol {
    margin: 7px 0 0 22px;
    padding: 0;
}

.spelregels-sectie li {
    margin-bottom: 6px;
}

.bediening-sectie {
    border-color: rgba(255, 224, 130, 0.55);
    background-color: rgba(255, 179, 0, 0.1);
}

#spelregels-voet {
    display: flex;
    justify-content: center;
    padding: 11px 16px max(11px, env(safe-area-inset-bottom));
    border-top: 2px solid rgba(255, 224, 130, 0.5);
    background-color: #0b3517;
}

#spelregels-voet button {
    min-width: 160px;
    min-height: 44px;
    padding: 9px 22px;
    border: 2px solid #fff0b3;
    border-radius: 9px;
    background-color: #ffb300;
    color: #111111;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
}

body.spelregels-open {
    overscroll-behavior: none;
}

@media (max-width: 900px) {
    #top-balk-info {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px;
        min-height: auto;
        padding-right: 0;
    }

    #instructie-box {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
    }

    #spelregels-open-knop {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        justify-self: stretch;
    }

    #bug-open-knop {
        grid-column: 2;
        grid-row: 2;
        position: static;
    }

    #top-balk-info > button {
        position: static !important;
        right: auto !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        border-radius: 7px !important;
    }

    #spelregels-overlay {
        padding: 8px;
    }

    #spelregels-venster {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
    }

    #spelregels-kop {
        padding: 12px 13px 10px;
    }

    #spelregels-inhoud {
        padding: 12px;
        font-size: 15px;
    }

    .spelregels-sectie {
        padding: 12px;
        margin-bottom: 12px;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    #top-balk-info {
        gap: 3px;
    }

    #top-balk-info > button {
        min-height: 32px;
        padding: 4px 6px !important;
        font-size: 10px !important;
        line-height: 1.1;
    }

    #spelregels-open-knop {
        white-space: normal;
    }

    #spelregels-kop h2 {
        font-size: 19px;
    }

    #spelregels-kop p {
        font-size: 12px;
    }

    #spelregels-kruis {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 25px;
    }

    #spelregels-inhoud {
        padding: 10px;
        font-size: 14px;
        line-height: 1.42;
    }

    .spelregels-sectie h3 {
        font-size: 17px;
    }

    #spelregels-voet button {
        width: 100%;
    }
}


/* ------------------------------------------------------------
   TABLET LIGGEND — ZICHTBARE TAFELSCROLL, versie 1.0.43
   De tafel krijgt een eigen verticale bediening. Daardoor blijven
   ook combinaties onderaan bereikbaar wanneer systeemscrollbalken
   op Android of iPad automatisch verborgen worden.
   ------------------------------------------------------------ */
#tafel-zone {
    display: contents;
}

#tafel-scrollbediening {
    display: none;
}

@media (orientation: landscape) and (min-width: 901px) and (max-width: 1366px) {
    html.motokub-aanraakscherm #tafel-zone {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 28px;
        gap: 5px;
        flex: 1 1 auto;
        align-self: center;
        width: 98%;
        min-height: 0;
        margin: 5px 0;
    }

    html.motokub-aanraakscherm #tafel-zone > #tafel {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: scroll !important;
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    /* De laatste rij kan volledig boven de vaste onderbalk worden geschoven. */
    html.motokub-aanraakscherm #tafel-vier-kolommen {
        padding-bottom: 92px !important;
        box-sizing: border-box !important;
    }

    html.motokub-aanraakscherm #tafel-scrollbediening {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 28px;
        min-width: 28px;
        min-height: 0;
        padding: 2px 0;
        user-select: none;
        touch-action: none;
    }

    html.motokub-aanraakscherm #tafel-scroll-omhoog,
    html.motokub-aanraakscherm #tafel-scroll-omlaag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        border: 2px solid #ffe082;
        border-radius: 6px;
        background: #ffb300;
        color: #111111;
        font-size: 15px;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
        touch-action: manipulation;
    }

    html.motokub-aanraakscherm #tafel-scrollspoor {
        position: relative;
        flex: 1 1 auto;
        width: 18px;
        min-height: 70px;
        margin: 0 auto;
        border: 2px solid rgba(255, 224, 130, 0.78);
        border-radius: 9px;
        background: rgba(0, 0, 0, 0.58);
        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
        touch-action: none;
    }

    html.motokub-aanraakscherm #tafel-scrollgreep {
        position: absolute;
        top: 0;
        left: 2px;
        width: 10px;
        min-height: 38px;
        border: 1px solid #fff3c4;
        border-radius: 7px;
        background: #ffb300;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
        cursor: grab;
        touch-action: none;
    }

    html.motokub-aanraakscherm #tafel-scrollgreep:active {
        cursor: grabbing;
    }

    html.motokub-aanraakscherm #tafel-scrollbediening.niet-nodig {
        opacity: 0.45;
    }
}


/* ------------------------------------------------------------
   IPHONE — betrouwbare tik op potstenen, versie 1.0.44
   De JavaScript-tikherkenning onderscheidt een korte tik van verticaal vegen.
   ------------------------------------------------------------ */
@media (max-width: 600px) and (orientation: portrait) {
    #pot-stenen .steen-kop {
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ------------------------------------------------------------
   GELIJKWAARDIGE AANRAAKBEDIENING — versie 1.0.46
   Op iPhone, Android en tablet selecteert een tik altijd een steen.
   De + knop voegt de geselecteerde stenen toe aan een bestaande set.
   Op de computer blijft de bestaande muis- en sleepbediening intact.
   ------------------------------------------------------------ */
.tafel-toevoegknop {
    display: none;
}

html.motokub-aanraakscherm .tafel-toevoegknop {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 38px;
    min-width: 30px;
    min-height: 38px;
    margin-left: 3px;
    padding: 0;
    border: 2px solid #fff3c4;
    border-radius: 7px;
    background: #ffb300;
    color: #111111;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

html.motokub-aanraakscherm .tafel-toevoegknop:active {
    transform: translateY(1px);
    background: #ffca28;
}

html.motokub-aanraakscherm .tafel-set {
    overflow: visible !important;
}

@media (max-width: 600px) {
    html.motokub-aanraakscherm .tafel-toevoegknop {
        flex-basis: 26px;
        width: 26px;
        min-width: 26px;
        height: 34px;
        min-height: 34px;
        margin-left: 2px;
        font-size: 22px;
    }
}


/* ------------------------------------------------------------
   TABLET LIGGEND — VIER TAFELKOLOMMEN
   Ook liggend blijven twee kolommen links voor de tegenstander en twee
   kolommen rechts voor de speler beschikbaar.
   ------------------------------------------------------------ */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1366px) {
    html.motokub-aanraakscherm #tafel-vier-kolommen {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        column-gap: 6px !important;
    }

    html.motokub-aanraakscherm #tafel-vier-kolommen .tafel-set {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html.motokub-aanraakscherm .tafel-toevoegknop {
        position: relative;
        z-index: 30;
    }
}


/* ------------------------------------------------------------
   POTPLEKKEN AUTOMATISCH OPVULLEN — versie 1.0.48
   Alle overgebleven stenen vormen een compacte, overlappende stapel bovenaan.
   Na iedere getrokken steen wordt de pot opnieuw opgebouwd. Daardoor groeit
   de lege groene ruimte uitsluitend onderaan en is verticaal scrollen niet
   meer nodig op pc, tablet, iPhone of Android.
   ------------------------------------------------------------ */
#pot-stenen-zone,
html.motokub-aanraakscherm #pot-stenen-zone {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#pot-stenen,
html.motokub-aanraakscherm #pot-stenen {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    overscroll-behavior: none !important;
    touch-action: manipulation !important;
}

#pot-stenen::-webkit-scrollbar,
html.motokub-aanraakscherm #pot-stenen::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

#pot-scrollbediening,
html.motokub-aanraakscherm #pot-scrollbediening {
    display: none !important;
}

#pot-stenen .pot-stenen-compact,
html.motokub-aanraakscherm #pot-stenen .pot-stenen-compact {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    overflow: visible !important;
    background-color: rgba(19, 78, 23, 0.66) !important;
}

#pot-stenen .pot-stenen-compact::after,
html.motokub-aanraakscherm #pot-stenen .pot-stenen-compact::after {
    display: none !important;
}

#pot-stenen .pot-stenen-compact .steen-kop,
html.motokub-aanraakscherm #pot-stenen .pot-stenen-compact .steen-kop {
    touch-action: manipulation !important;
}

/* In de vaste bovenpot op mobiel en tablet staand moet het stenenvak de
   volledige beschikbare hoogte van de groene potbalk gebruiken. Zonder dit
   bleef het grid-item op zijn inhoudshoogte staan en konden gedraaide stenen
   enkele pixels buiten beeld vallen. */
@media (max-width: 900px) {
    #pot-stenen-zone,
    html.motokub-aanraakscherm #pot-stenen-zone {
        height: 100% !important;
        align-self: stretch !important;
    }
}


/* ------------------------------------------------------------
   LOSSE POTSTAPEL MET OPVULLENDE PLEKKEN — versie 1.0.48
   De stenen blijven speels liggen. Na het pakken vult de onderste
   steen uitsluitend de vrijgekomen plek op.
   ------------------------------------------------------------ */
#pot-stenen .pot-stenen-los .steen-kop,
html.motokub-aanraakscherm #pot-stenen .pot-stenen-los .steen-kop {
    transition: left 160ms ease-out, top 160ms ease-out, transform 160ms ease-out;
}

#pot-stenen .pot-stenen-los,
html.motokub-aanraakscherm #pot-stenen .pot-stenen-los {
    overflow: hidden !important;
    contain: layout paint;
}


/* ------------------------------------------------------------
   MOBIEL STAAND — ZICHTBARE VERTICALE TAFELSCROLL, versie 1.0.49
   De tafel krijgt op iPhone en Android dezelfde eigen bediening als
   tablet liggend. Alleen de tafel schuift; de pot en spelersbalk blijven vast.
   ------------------------------------------------------------ */
@media (max-width: 600px) and (orientation: portrait) {
    html.motokub-aanraakscherm #tafel-zone {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24px;
        gap: 4px;
        flex: 1 1 auto;
        align-self: stretch;
        width: 100%;
        min-height: 0;
        margin: 0;
        overflow: hidden;
    }

    html.motokub-aanraakscherm #tafel-zone > #tafel {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: scroll !important;
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    html.motokub-aanraakscherm #tafel-scrollbediening {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        width: 24px;
        min-width: 24px;
        min-height: 0;
        padding: 1px 0;
        user-select: none;
        touch-action: none;
    }

    html.motokub-aanraakscherm #tafel-scroll-omhoog,
    html.motokub-aanraakscherm #tafel-scroll-omlaag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 29px;
        min-height: 29px;
        padding: 0;
        border: 2px solid #ffe082;
        border-radius: 6px;
        background: #ffb300;
        color: #111111;
        font-size: 14px;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    html.motokub-aanraakscherm #tafel-scrollspoor {
        position: relative;
        flex: 1 1 auto;
        width: 16px;
        min-height: 52px;
        margin: 0 auto;
        border: 2px solid rgba(255, 224, 130, 0.78);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.58);
        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
        touch-action: none;
    }

    html.motokub-aanraakscherm #tafel-scrollgreep {
        position: absolute;
        top: 0;
        left: 2px;
        width: 8px;
        min-height: 34px;
        border: 1px solid #fff3c4;
        border-radius: 6px;
        background: #ffb300;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
        cursor: grab;
        touch-action: none;
    }

    html.motokub-aanraakscherm #tafel-scrollgreep:active {
        cursor: grabbing;
    }

    html.motokub-aanraakscherm #tafel-scrollbediening.niet-nodig {
        opacity: 0.45;
    }

    /* De laatste combinatie kan volledig boven de vaste spelersbalk komen. */
    html.motokub-aanraakscherm #tafel-vier-kolommen {
        padding-bottom: 76px !important;
        box-sizing: border-box !important;
    }
}


/* ------------------------------------------------------------
   AFBEELDINGEN MOBIEL EN TABLET HERLADEN — versie 1.0.51
   De tafelachtergrond en steenfoto's blijven zichtbaar wanneer de tafel
   een eigen scrollvenster gebruikt. De versieparameter omzeilt oude of
   mislukte afbeeldingscache op iPhone, Android en tablets.
   ------------------------------------------------------------ */
@media (max-width: 1366px) {
    html.motokub-aanraakscherm #tafel {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
            url('fotos/achtergrond.jpg?v=1.0.51') !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    html.motokub-aanraakscherm .steen-open {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    html.motokub-aanraakscherm .steen-tegenstander {
        background-size: 85% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}


/* ===== Eenmalige plaatskeuze voor betrouwbare statistieken ===== */
#plaats-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 22000;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.78);
    border-radius: 10px;
}

#plaats-overlay.plaats-overlay-zichtbaar {
    display: flex;
}

#plaats-formulier {
    width: min(460px, 100%);
    max-height: calc(100% - 16px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 3px solid #ffe082;
    border-radius: 14px;
    background: #2e7d32;
    color: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
}

#plaats-formulier h2 {
    margin: 0;
    color: #ffe082;
    text-align: center;
    font-size: 21px;
}

#plaats-formulier p,
#plaats-formulier small {
    margin: 0;
    line-height: 1.45;
}

#plaats-formulier label {
    margin-top: 4px;
    color: #ffe082;
    font-weight: 700;
}

#plaats-formulier input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-size: 16px;
}

#plaats-formulier input:focus {
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

#plaats-fout {
    min-height: 20px;
    color: #fff3cd;
    font-weight: 700;
}

#plaats-opslaan-knop {
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    background: #ffb300;
    color: #111;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

#plaats-opslaan-knop:active {
    transform: translateY(1px);
}

@media (max-width: 600px) {
    #plaats-overlay {
        padding: 10px;
    }

    #plaats-formulier {
        padding: 16px;
    }
}


/* ===== Motokub taalkeuze met vaste vlagafbeeldingen versie 1.0.63 ===== */
#taal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50000;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.86);
}

#taal-overlay.taal-overlay-zichtbaar {
    display: flex;
}

#taal-venster {
    width: min(720px, 100%);
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    padding: 26px;
    border: 3px solid #ffe082;
    border-radius: 16px;
    background: #2e7d32;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
    text-align: center;
}

#taal-keuze-titel {
    margin: 0 0 10px;
    color: #ffe082;
    font-size: 26px;
}

#taal-keuze-uitleg {
    margin: 0 0 20px;
    line-height: 1.45;
    font-size: 16px;
}

#taal-knoppen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.taal-knop {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 8px;
    border: 2px solid #ffe082;
    border-radius: 12px;
    background: #ffffff;
    color: #1b5e20;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.taal-knop:hover,
.taal-knop:focus-visible {
    background: #fff8e1;
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

.taal-knop:active {
    transform: translateY(1px);
}

.taal-vlag {
    display: inline-flex;
    width: 54px;
    height: 36px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 4px;
    background: #ffffff;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.taal-vlag svg {
    display: block;
    width: 100%;
    height: 100%;
}

body.taalkeuze-open #game-container {
    pointer-events: none;
}

#taal-wijzigen-knop {
    flex: 0 0 auto;
    margin-left: 6px;
    white-space: nowrap;
}

body.motokub-taal-ar #melding-venster,
body.motokub-taal-ar #plaats-formulier,
body.motokub-taal-ar #bug-overlay,
body.motokub-taal-ar #spelregels-venster,
body.motokub-taal-ar #instructie-box,
body.motokub-taal-ar .plank-label,
body.motokub-taal-ar button,
body.motokub-taal-ar label,
body.motokub-taal-ar input,
body.motokub-taal-ar textarea {
    direction: rtl;
    text-align: right;
}

body.motokub-taal-ar #taal-knoppen,
body.motokub-taal-ar #mobiele-actiebalk,
body.motokub-taal-ar #top-balk-info,
body.motokub-taal-ar #tafel,
body.motokub-taal-ar .plank {
    direction: ltr;
}

@media (max-width: 600px) {
    #taal-overlay {
        padding: 10px;
    }

    #taal-venster {
        padding: 18px 14px;
    }

    #taal-keuze-titel {
        font-size: 21px;
    }

    #taal-keuze-uitleg {
        font-size: 14px;
    }

    #taal-knoppen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .taal-knop {
        min-height: 78px;
        font-size: 15px;
    }

    .taal-vlag {
        width: 48px;
        height: 32px;
    }

    #taal-wijzigen-knop {
        min-width: 34px;
        max-width: 56px;
        overflow: hidden;
        font-size: 0 !important;
    }

    #taal-wijzigen-knop::before {
        content: "🌐";
        font-size: 15px;
    }
}


/* ===== Android/Facebook-aanraakherstel joker - versie 1.0.59 =====
   Op een aanraakscherm wordt de selectie via tik + plusknop uitgevoerd.
   Native HTML5-slepen wordt door JavaScript uitgeschakeld om te voorkomen
   dat Android WebView/Facebook een tik op een tafelsteen onderschept. */
html.motokub-aanraakscherm #tafel-vier-kolommen .steen-open,
html.motokub-aanraakscherm #tafel-vier-kolommen .tafel-toevoegknop {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}


/* Motokub 1.0.61: bugformulier volledig zichtbaar op telefoon en in app-browsers */
#bug-venster {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#bug-email {
    display: block;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    #bug-overlay {
        align-items: flex-start !important;
        padding: max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
    }
    #bug-venster {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        padding: 16px !important;
        gap: 10px !important;
    }
}


/* ------------------------------------------------------------
   SPELERSBALK OP WERKELIJKE BREEDTE — versie 1.0.64
   Op pc en tablet liggend vult iedere plank eerst de werkelijk
   beschikbare ruimte. Pas daarna verschijnt een volgende plank.
   Mobiel en tablet staand behouden hun horizontale schuifbalk.
   ------------------------------------------------------------ */
@media (min-width: 901px) {
    #speler-stenen-zone,
    #balk-wrapper-beneden {
        min-width: 0;
        max-width: 100%;
    }

    #balk-wrapper-beneden .plank {
        max-width: 100%;
    }
}

/* ------------------------------------------------------------
   DONATIEAANVRAAG - versie 1.0.67
   Deze regels staan achteraan en wijzigen geen spelstenen of spelvelden.
   ------------------------------------------------------------ */
#top-balk-info {
    grid-template-columns: minmax(180px, 1fr) minmax(220px, auto) auto auto auto;
}

#spelregels-open-knop { grid-column: 1; grid-row: 1; }
#instructie-box { grid-column: 2; grid-row: 1; }
#donatie-open-knop { grid-column: 3; grid-row: 1; }
#bug-open-knop { grid-column: 4; grid-row: 1; }
#taal-wijzigen-knop { grid-column: 5; grid-row: 1; margin-left: 0; }

#donatie-open-knop {
    justify-self: end;
    border: 2px solid #000000;
    border-radius: 8px;
    padding: 6px 11px;
    background-color: #7b1fa2;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
    touch-action: manipulation;
}

#donatie-open-knop:hover,
#donatie-open-knop:focus-visible {
    background-color: #9c27b0;
}

#donatie-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.78);
    z-index: 26000;
    overflow-y: auto;
}

#donatie-venster {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    border: 3px solid #ffe082;
    border-radius: 14px;
    background-color: #2e7d32;
    color: #ffffff;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.82);
}

#donatie-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid rgba(255, 224, 130, 0.45);
}

#donatie-kop h2 {
    margin: 0 0 7px;
    color: #ffe082;
    font-size: 22px;
}

#donatie-kop p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

#donatie-kruis {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 2px solid #ffe082;
    border-radius: 50%;
    background-color: #1b5e20;
    color: #ffffff;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

#donatie-formulier {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 18px 22px 22px;
}

.donatie-veldgroep {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.donatie-veldgroep label,
#donatie-keuze-veld legend {
    color: #ffe082;
    font-size: 13px;
    font-weight: 800;
}

#donatie-formulier input[type="text"],
#donatie-formulier input[type="email"] {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 2px solid #ffe082;
    border-radius: 7px;
    background-color: #ffffff;
    color: #111111;
    font-size: 15px;
    user-select: text;
}

#donatie-keuze-veld {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(255, 224, 130, 0.7);
    border-radius: 8px;
}

#donatie-keuze-veld legend {
    padding: 0 5px;
}

.donatie-keuze-regel {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}

.donatie-keuze-regel input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: #ffb300;
}

.donatie-bedrag-invoer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.donatie-bedrag-invoer > span {
    color: #ffe082;
    font-size: 22px;
    font-weight: 900;
}

.donatie-veld-uitgeschakeld {
    opacity: 0.48;
}

#donatie-privacy {
    margin: 0;
    color: #e8f5e9;
    font-size: 12px;
    line-height: 1.45;
}

#donatie-fout {
    min-height: 18px;
    color: #fff3c4;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

#donatie-voet {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

#donatie-voet button {
    min-height: 42px;
    padding: 9px 15px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

#donatie-annuleren {
    background-color: #d32f2f;
    color: #ffffff;
}

#donatie-verzenden {
    background-color: #ffb300;
    color: #111111;
}

#donatie-verzenden:disabled {
    opacity: 0.65;
    cursor: wait;
}

.donatie-website-veld {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

body.donatie-open {
    overscroll-behavior: none;
}

body.motokub-taal-ar #donatie-venster,
body.motokub-taal-ar #donatie-formulier,
body.motokub-taal-ar #donatie-kop {
    direction: rtl;
    text-align: right;
}

@media (max-width: 900px) {
    #top-balk-info {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
        gap: 5px;
    }

    #instructie-box {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    #spelregels-open-knop {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
    }

    #donatie-open-knop {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        justify-self: stretch;
    }

    #bug-open-knop {
        grid-column: 3;
        grid-row: 2;
    }

    #taal-wijzigen-knop {
        grid-column: 4;
        grid-row: 2;
    }
}

@media (max-width: 600px) {
    #donatie-open-knop {
        min-height: 32px;
        padding: 4px 6px !important;
        font-size: 10px !important;
        line-height: 1.1;
        white-space: normal;
    }

    #donatie-overlay {
        padding: 7px;
    }

    #donatie-venster {
        width: calc(100vw - 14px);
        max-height: calc(100dvh - 14px);
    }

    #donatie-kop {
        padding: 15px 14px 11px;
    }

    #donatie-kop h2 {
        font-size: 20px;
    }

    #donatie-formulier {
        gap: 10px;
        padding: 13px 14px 16px;
    }

    #donatie-voet button {
        padding: 8px 10px;
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    #top-balk-info {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    #spelregels-open-knop { grid-column: 1; grid-row: 2; }
    #donatie-open-knop { grid-column: 2; grid-row: 2; }
    #taal-wijzigen-knop { grid-column: 3; grid-row: 2; }
    #bug-open-knop {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        justify-self: stretch;
    }
}



/* ------------------------------------------------------------
   CORRECTIE BOVENBALK EN VERZENDSTATUS - versie 1.0.67
   Exacte volgorde: Spelregels, Steun Motokub, melding, bug, taal.
   ------------------------------------------------------------ */
#top-balk-info {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 10px !important;
    width: 100% !important;
}

#top-balk-info > * {
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
}

#spelregels-open-knop,
#donatie-open-knop,
#bug-open-knop,
#taal-wijzigen-knop {
    flex: 0 0 auto !important;
    width: auto !important;
    justify-self: auto !important;
}

#instructie-box {
    flex: 0 1 auto !important;
    min-width: 220px;
    max-width: min(540px, 100%);
    justify-content: center;
    text-align: center;
}

#donatie-fout {
    display: none;
    min-height: 0;
    padding: 10px 12px;
    border: 2px solid transparent;
    border-radius: 8px;
    line-height: 1.4;
}

#donatie-fout.donatie-status-zichtbaar {
    display: block;
}

#donatie-fout.donatie-status-bezig {
    border-color: #ffe082;
    background-color: rgba(255, 224, 130, 0.16);
    color: #ffffff;
}

#donatie-fout.donatie-status-fout {
    border-color: #ffcdd2;
    background-color: rgba(183, 28, 28, 0.72);
    color: #ffffff;
}

@media (max-width: 700px) {
    #top-balk-info {
        gap: 5px !important;
    }

    #instructie-box {
        flex: 1 0 100% !important;
        order: 3;
        min-width: 0;
    }

    #spelregels-open-knop { order: 1; }
    #donatie-open-knop { order: 2; }
    #bug-open-knop { order: 4; }
    #taal-wijzigen-knop { order: 5; }
}


/* ------------------------------------------------------------
   TAALKNOP BREED EN VOLLEDIG LEESBAAR - versie 1.0.67
   Behoudt zowel de wereldbol als de volledige taaltekst.
   ------------------------------------------------------------ */
#taal-wijzigen-knop {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 94px !important;
    max-width: none !important;
    width: auto !important;
    padding: 6px 15px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

#taal-wijzigen-knop::before {
    content: none !important;
    display: none !important;
}

@media (max-width: 600px) {
    #taal-wijzigen-knop {
        min-width: 82px !important;
        padding: 5px 11px !important;
        font-size: 11px !important;
    }
}


/* ------------------------------------------------------------
   TAALKNOP IN DEZELFDE STIJL ALS DE ANDERE BOVENKNOPPEN - versie 1.0.68
   Zelfde vorm, hoogte, rand, typografie en schaduw. Alleen de kleur
   onderscheidt de taalknop van de andere functies.
   ------------------------------------------------------------ */
#taal-wijzigen-knop {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 94px !important;
    min-height: 32px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px 11px !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    background-color: #1565c0 !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45) !important;
    touch-action: manipulation !important;
}

#taal-wijzigen-knop:hover,
#taal-wijzigen-knop:focus-visible {
    background-color: #1976d2 !important;
}

#taal-wijzigen-knop::before {
    content: none !important;
    display: none !important;
}

@media (max-width: 600px) {
    #taal-wijzigen-knop {
        min-width: 86px !important;
        min-height: 31px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
}


/* Definitieve gelijke knopvorm voor de complete bovenbalk - versie 1.0.68 */
#spelregels-open-knop,
#donatie-open-knop,
#bug-open-knop,
#taal-wijzigen-knop {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 6px 11px !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
}

#taal-wijzigen-knop {
    min-width: 94px !important;
    background-color: #1565c0 !important;
    color: #ffffff !important;
}

@media (max-width: 900px) {
    #spelregels-open-knop,
    #donatie-open-knop,
    #bug-open-knop,
    #taal-wijzigen-knop {
        height: 32px !important;
        min-height: 32px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 600px) {
    #spelregels-open-knop,
    #donatie-open-knop,
    #bug-open-knop,
    #taal-wijzigen-knop {
        height: 32px !important;
        min-height: 32px !important;
        padding: 4px 6px !important;
        font-size: 10px !important;
    }

    #taal-wijzigen-knop {
        min-width: 82px !important;
    }
}


/* ------------------------------------------------------------
   MOBIELE BOVENBALK COMPACT OP ÉÉN RIJ - versie 1.0.70
   Alleen telefoons tot en met 600 CSS-pixels:
   vier gekleurde knoppen naast elkaar, daarna de zwarte beurtmelding.
   Tablet, pc en laptop blijven ongewijzigd.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    #top-balk-info {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto !important;
        gap: 5px !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
    }

    #spelregels-open-knop,
    #donatie-open-knop,
    #bug-open-knop,
    #taal-wijzigen-knop {
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 4px 3px !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #spelregels-open-knop { grid-column: 1 !important; }
    #donatie-open-knop { grid-column: 2 !important; }
    #bug-open-knop { grid-column: 3 !important; }
    #taal-wijzigen-knop { grid-column: 4 !important; }

    #instructie-box {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        order: initial !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 7px 8px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #spelregels-open-knop::before,
    #donatie-open-knop::before,
    #bug-open-knop::before,
    #taal-wijzigen-knop::before {
        content: none !important;
        display: none !important;
    }

    #spelregels-open-knop::after,
    #donatie-open-knop::after,
    #bug-open-knop::after,
    #taal-wijzigen-knop::after {
        display: inline-block !important;
        font-family: Arial, sans-serif !important;
        font-size: clamp(9px, 2.75vw, 12px) !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
        color: inherit !important;
        white-space: nowrap !important;
    }

    body.motokub-taal-nl #spelregels-open-knop::after { content: "Spelregels"; }
    body.motokub-taal-nl #donatie-open-knop::after { content: "❤️ Steun"; }
    body.motokub-taal-nl #bug-open-knop::after { content: "Meld een bug"; }
    body.motokub-taal-nl #taal-wijzigen-knop::after { content: "🌐 Taal"; }

    body.motokub-taal-de #spelregels-open-knop::after { content: "Regeln"; }
    body.motokub-taal-de #donatie-open-knop::after { content: "❤️ Unterstützen"; }
    body.motokub-taal-de #bug-open-knop::after { content: "Fehler melden"; }
    body.motokub-taal-de #taal-wijzigen-knop::after { content: "🌐 Sprache"; }

    body.motokub-taal-pl #spelregels-open-knop::after { content: "Zasady"; }
    body.motokub-taal-pl #donatie-open-knop::after { content: "❤️ Wesprzyj"; }
    body.motokub-taal-pl #bug-open-knop::after { content: "Zgłoś błąd"; }
    body.motokub-taal-pl #taal-wijzigen-knop::after { content: "🌐 Język"; }

    body.motokub-taal-tr #spelregels-open-knop::after { content: "Kurallar"; }
    body.motokub-taal-tr #donatie-open-knop::after { content: "❤️ Destek"; }
    body.motokub-taal-tr #bug-open-knop::after { content: "Hata bildir"; }
    body.motokub-taal-tr #taal-wijzigen-knop::after { content: "🌐 Dil"; }

    body.motokub-taal-ar #spelregels-open-knop::after { content: "القواعد"; }
    body.motokub-taal-ar #donatie-open-knop::after { content: "❤️ دعم"; }
    body.motokub-taal-ar #bug-open-knop::after { content: "بلاغ خطأ"; }
    body.motokub-taal-ar #taal-wijzigen-knop::after { content: "🌐 اللغة"; }

    body.motokub-taal-en #spelregels-open-knop::after { content: "Rules"; }
    body.motokub-taal-en #donatie-open-knop::after { content: "❤️ Support"; }
    body.motokub-taal-en #bug-open-knop::after { content: "Report bug"; }
    body.motokub-taal-en #taal-wijzigen-knop::after { content: "🌐 Language"; }

    /* Vangnet vóórdat de taalclass door JavaScript is geplaatst. */
    body:not(.motokub-taal-nl):not(.motokub-taal-de):not(.motokub-taal-pl):not(.motokub-taal-tr):not(.motokub-taal-ar):not(.motokub-taal-en) #spelregels-open-knop::after { content: "Spelregels"; }
    body:not(.motokub-taal-nl):not(.motokub-taal-de):not(.motokub-taal-pl):not(.motokub-taal-tr):not(.motokub-taal-ar):not(.motokub-taal-en) #donatie-open-knop::after { content: "❤️ Steun"; }
    body:not(.motokub-taal-nl):not(.motokub-taal-de):not(.motokub-taal-pl):not(.motokub-taal-tr):not(.motokub-taal-ar):not(.motokub-taal-en) #bug-open-knop::after { content: "Meld een bug"; }
    body:not(.motokub-taal-nl):not(.motokub-taal-de):not(.motokub-taal-pl):not(.motokub-taal-tr):not(.motokub-taal-ar):not(.motokub-taal-en) #taal-wijzigen-knop::after { content: "🌐 Taal"; }
}

/* Verberg op mobiel de lange oorspronkelijke knoptekst volledig.
   De compacte tekst hierboven blijft zichtbaar via ::after. */
@media (max-width: 600px) {
    #top-balk-info > #spelregels-open-knop,
    #top-balk-info > #donatie-open-knop,
    #top-balk-info > #bug-open-knop,
    #top-balk-info > #taal-wijzigen-knop {
        font-size: 0 !important;
        color: transparent !important;
        text-shadow: none !important;
    }

    #top-balk-info > #spelregels-open-knop::after {
        color: #000000 !important;
    }

    #top-balk-info > #donatie-open-knop::after,
    #top-balk-info > #bug-open-knop::after,
    #top-balk-info > #taal-wijzigen-knop::after {
        color: #ffffff !important;
    }
}


/* ------------------------------------------------------------
   IPHONE/IPAD POTSTENEN BETROUWBAAR AANTIKKEN — versie 1.0.73
   Alleen Apple-aanraakapparaten; geen wijziging aan de zichtbare indeling.
   ------------------------------------------------------------ */
html.motokub-apple-aanraakscherm #pot-stenen,
html.motokub-apple-aanraakscherm #pot-stenen .pot-stenen-inhoud,
html.motokub-apple-aanraakscherm #pot-stenen .pot-stenen-los {
    pointer-events: auto !important;
    contain: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

html.motokub-apple-aanraakscherm #pot-stenen .steen-kop {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

html.motokub-apple-aanraakscherm #pot-stenen .steen-kop::before {
    content: "";
    position: absolute;
    inset: -6px;
    background: transparent;
}


/* ------------------------------------------------------------
   UNIVERSELE POTKNOP VOOR SAFARI EN ALLE ANDERE BROWSERS — 1.0.74
   Het volledige potvak is een native button. De losse stenen zijn visuele
   spans; de klikpositie bepaalt nog steeds welke zichtbare steen wordt gepakt.
   ------------------------------------------------------------ */
#pot-stenen,
html.motokub-aanraakscherm #pot-stenen,
html.motokub-apple-aanraakscherm #pot-stenen {
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    line-height: normal !important;
    text-align: initial !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

#pot-stenen:focus-visible {
    outline: 2px solid #ffe082 !important;
    outline-offset: -2px !important;
}

#pot-stenen .pot-stenen-inhoud,
#pot-stenen .pot-stenen-compact,
#pot-stenen .pot-stenen-los {
    display: block !important;
    contain: none !important;
    pointer-events: none !important;
}

#pot-stenen .steen-kop,
html.motokub-aanraakscherm #pot-stenen .steen-kop,
html.motokub-apple-aanraakscherm #pot-stenen .steen-kop,
html.motokub-apple-aanraakscherm #pot-stenen .steen-kop::before {
    display: block !important;
    pointer-events: none !important;
}


/* ------------------------------------------------------------
   AUTOMATISCH 14 STARTSTENEN — versie 1.0.75
   De knop ligt in het stenenvak van de pot. Handmatig kiezen blijft mogelijk.
   ------------------------------------------------------------ */
#pot-stenen-zone,
html.motokub-aanraakscherm #pot-stenen-zone {
    position: relative !important;
}

#pot-automatisch-uitdelen {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 250;
    transform: translateX(-50%);
    min-width: 168px;
    min-height: 36px;
    max-width: calc(100% - 14px);
    padding: 8px 13px;
    border: 2px solid #fff3b0;
    border-radius: 9px;
    background: #ffb300;
    color: #111111;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.65);
    appearance: none;
    -webkit-appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#pot-automatisch-uitdelen:hover:not(:disabled) {
    background: #ffca28;
}

#pot-automatisch-uitdelen:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

#pot-automatisch-uitdelen:disabled {
    cursor: wait;
    opacity: 0.72;
}

#pot-automatisch-uitdelen[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    #pot-automatisch-uitdelen {
        bottom: 4px;
        min-width: 150px;
        min-height: 30px;
        max-width: calc(100% - 8px);
        padding: 6px 9px;
        border-radius: 7px;
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    #pot-automatisch-uitdelen {
        bottom: 3px;
        min-width: 136px;
        min-height: 28px;
        padding: 5px 7px;
        font-size: 10px;
    }
}


/* ------------------------------------------------------------
   POTINDELING OP TABLET-LIGGEND, PC EN LAPTOP — versie 1.0.76
   Telefoons (tot en met 900 px) behouden exact de indeling van 1.0.75.
   De startknop staat onder het logo en boven de potstenen. Doordat de
   stenen minder verticale ruimte krijgen, overlappen ze wat sterker en
   blijft de teller onderaan netjes vrij.
   ------------------------------------------------------------ */
@media (min-width: 901px) {
    #pot-stenen-zone,
    html.motokub-aanraakscherm #pot-stenen-zone {
        position: relative !important;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        min-height: 0;
    }

    #pot-automatisch-uitdelen {
        position: relative;
        left: auto;
        bottom: auto;
        z-index: 250;
        transform: none;
        display: block;
        flex: 0 0 auto;
        width: calc(100% - 8px);
        min-width: 0;
        max-width: 190px;
        min-height: 36px;
        margin: 0 auto 8px;
        padding: 8px 10px;
    }

    #pot-automatisch-uitdelen[hidden] {
        display: none !important;
    }

    #pot-stenen {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
    }

    .pot-aantal {
        position: relative;
        z-index: 300;
        margin-top: 8px;
        flex: 0 0 auto;
    }
}


/* ------------------------------------------------------------
   VINGERSLEPEN EN PLUSKNOP OP AANRAAKSCHERMEN — versie 1.2.06
   De bestaande muisbediening op gewone pc's blijft ongewijzigd. Op tablet,
   telefoon en touchscreen-laptop sleept één vinger stenen naar de tafel,
   een bestaande combinatie of terug naar de eigen plank.
   ------------------------------------------------------------ */
html.motokub-aanraakscherm .tafel-toevoegknop {
    display: inline-flex !important;
}

html.motokub-aanraakscherm .steen-open,
html.motokub-aanraakscherm #balk-wrapper-beneden .steen-open,
html.motokub-aanraakscherm #tafel-vier-kolommen .steen-open {
    touch-action: none !important;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    cursor: grab;
}

html.motokub-aanraakscherm .steen-open.motokub-aanraak-sleepbron {
    opacity: 0.42;
    cursor: grabbing;
}

body.motokub-aanraak-slepen {
    user-select: none;
    -webkit-user-select: none;
}

.motokub-aanraak-sleepspook {
    position: fixed !important;
    z-index: 1000000 !important;
    width: 40px !important;
    height: 55px !important;
    margin: 0 !important;
    transform: rotate(4deg) scale(1.08) !important;
    pointer-events: none !important;
    opacity: 0.94;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.75) !important;
}

.motokub-aanraak-sleepaantal {
    position: absolute;
    top: -9px;
    right: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 23px;
    padding: 0 5px;
    border: 2px solid #fff3c4;
    border-radius: 999px;
    background: #ffb300;
    color: #111111;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

html.motokub-aanraakscherm .motokub-aanraak-sleepdoel {
    outline: 3px solid #ffb300 !important;
    outline-offset: 3px;
    box-shadow: 0 0 14px rgba(255, 179, 0, 0.9) !important;
}

@media (max-width: 600px) {
    .motokub-aanraak-sleepspook {
        width: 34px !important;
        height: 48px !important;
    }
}


/* ------------------------------------------------------------
   MOBIELE STENENBALK SCHUIFBAAR — versie 1.0.78
   Horizontaal vegen schuift door de eigen stenen. Omhoog/omlaag slepen
   blijft beschikbaar om een steen naar de tafel te verplaatsen.
   ------------------------------------------------------------ */
@media (max-width: 600px) and (orientation: portrait) {
    html.motokub-aanraakscherm #balk-wrapper-beneden .plank,
    html.motokub-aanraakscherm #balk-wrapper-beneden .steen-open {
        touch-action: pan-x !important;
    }

    html.motokub-aanraakscherm #balk-wrapper-beneden .plank {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

/* ============================================================
   LIVE MOTOKUB — versie 1.1.06
   De bestaande spelindeling blijft erachter volledig behouden.
   ============================================================ */
.live-overlay {
    position: fixed;
    inset: 0;
    z-index: 120000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.78);
    overflow-y: auto;
}

.live-overlay.live-zichtbaar {
    display: flex;
}

.live-venster {
    width: min(620px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px;
    border: 3px solid #ffe082;
    border-radius: 14px;
    background: #2e7d32;
    color: #ffffff;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.8);
}

.live-keuze-venster,
.live-klein-venster {
    width: min(500px, 100%);
    text-align: center;
}

.live-logo {
    display: block;
    width: 210px;
    max-width: 60%;
    height: auto;
    margin: 0 auto 14px;
}

.live-venster h2,
.live-venster h3 {
    color: #ffe082;
    margin: 0 0 10px;
}

.live-venster p {
    line-height: 1.45;
    margin: 0 0 16px;
}

.live-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.live-kop p {
    margin-bottom: 0;
}

.live-kruis {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 2px solid #ffe082;
    border-radius: 50%;
    background: #b71c1c;
    color: #ffffff;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.live-hoofdknoppen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.live-knop {
    min-height: 46px;
    padding: 10px 14px;
    border: 2px solid #111111;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.45);
    touch-action: manipulation;
}

.live-knop:disabled {
    cursor: wait;
    opacity: 0.65;
}

.live-knop-computer {
    background: #ffb300;
    color: #111111;
}

.live-knop-online {
    background: #6a1b9a;
    color: #ffffff;
}

.live-knop-weigeren,
.live-knop-annuleren {
    background: #c62828;
    color: #ffffff;
}

.live-knop-volledig {
    grid-column: 1 / -1;
}

#live-aanmeld-deel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

#live-aanmeld-deel label {
    grid-column: 1 / -1;
    color: #ffe082;
    font-weight: 800;
}

#live-spelersnaam {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 2px solid #ffe082;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 16px;
    user-select: text;
    -webkit-user-select: text;
}

#live-lijst-deel h3 {
    margin-top: 18px;
}

#live-lobby-status {
    min-height: 24px;
    margin: 4px 0 8px;
    color: #ffffff;
    font-weight: 800;
}

#live-spelers-lijst {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.live-speler-regel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 224, 130, 0.7);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.28);
}

.live-speler-lampje {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #66ff66;
    box-shadow: 0 0 7px rgba(102, 255, 102, 0.9);
}

.live-speler-naam {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 900;
}

.live-uitdagen-knop {
    min-height: 36px;
    padding: 7px 11px;
    border: 2px solid #111111;
    border-radius: 7px;
    background: #ffb300;
    color: #111111;
    font-weight: 900;
    cursor: pointer;
}

.live-geen-spelers {
    padding: 14px;
    border: 1px dashed #ffe082;
    border-radius: 9px;
    text-align: center;
}

#live-computer-wachten {
    width: 100%;
}

.live-kleine-tekst {
    margin-top: 9px !important;
    font-size: 12px;
    text-align: center;
}

#live-lobby-fout {
    min-height: 20px;
    margin-top: 10px;
    color: #ffeb3b;
    font-weight: 800;
}

#live-tegenstander-badge {
    align-self: center;
    margin: 0 auto 3px;
    padding: 3px 12px;
    border: 1px solid rgba(255, 224, 130, 0.75);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.62);
    color: #ffe082;
    font-size: 12px;
    font-weight: 900;
}

body.live-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .live-overlay {
        align-items: flex-start;
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    }

    .live-venster {
        padding: 18px 14px;
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .live-hoofdknoppen {
        grid-template-columns: 1fr;
    }

    #live-aanmeld-deel {
        grid-template-columns: 1fr;
    }

    #live-aanmeld-deel label {
        grid-column: auto;
    }

    .live-speler-regel {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .live-uitdagen-knop {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.live-speler-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.live-speler-status {
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    line-height: 1.2;
}


/* Eigen live spelersnaam duidelijk zichtbaar — versie 1.1.02 */
.live-eigen-naam {
    margin: 0 0 10px;
    padding: 9px 12px;
    border: 2px solid #ffe082;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.38);
    color: #ffffff;
    font-weight: 800;
    text-align: center;
}


/* Keuze na herladen van een lopende livewedstrijd — versie 1.1.02 */
#live-hervatten-fout {
    min-height: 20px;
    margin-top: 10px;
    color: #ffeb3b;
    font-weight: 800;
}


/* Eindchat na een livewedstrijd — versie 1.1.02 */
#live-eindchat-venster {
    width: min(620px, 100%);
}

#live-eindchat-berichten {
    min-height: 140px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
    padding: 10px;
    border: 2px solid rgba(255, 224, 130, 0.75);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    -webkit-overflow-scrolling: touch;
}

.live-eindchat-leeg {
    margin: auto;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.live-chatbericht {
    align-self: flex-start;
    max-width: 88%;
    padding: 8px 10px;
    border: 1px solid rgba(255, 224, 130, 0.6);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.48);
    overflow-wrap: anywhere;
}

.live-chatbericht-eigen {
    align-self: flex-end;
    background: rgba(106, 27, 154, 0.72);
}

.live-chatbericht-kop {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 3px;
    color: #ffe082;
    font-size: 12px;
}

.live-chatbericht-tekst {
    white-space: pre-wrap;
    line-height: 1.4;
}

#live-eindchat-label {
    display: block;
    margin-bottom: 6px;
    color: #ffe082;
    font-weight: 800;
}

#live-eindchat-invoer {
    width: 100%;
    min-height: 82px;
    padding: 10px 12px;
    border: 2px solid #ffe082;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font: inherit;
    resize: vertical;
    user-select: text;
    -webkit-user-select: text;
}

#live-eindchat-fout {
    min-height: 20px;
    margin-top: 10px;
    color: #ffeb3b;
    font-weight: 800;
}

@media (max-width: 600px) {
    #live-eindchat-berichten {
        max-height: 34dvh;
    }
}

/* ============================================================
   LIVE MOTOKUB MET 2, 3 OF 4 SPELERS — versie 1.1.06
   Bij drie spelers staan beide tegenstanders verticaal naast de tafel.
   Bij vier spelers staat de derde tegenstander bovenaan.
   ============================================================ */
#live-groep-samenvatting {
    min-height: 24px;
    margin: 8px 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 224, 130, 0.65);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
    color: #ffffff;
    font-weight: 800;
    text-align: center;
}

#live-groep-starten {
    width: 100%;
    margin-bottom: 10px;
}

.live-speler-regel.live-geselecteerd {
    border-color: #ffeb3b;
    background: rgba(106, 27, 154, 0.55);
    box-shadow: inset 0 0 0 2px rgba(255, 235, 59, 0.28);
}

.live-kies-knop {
    min-height: 36px;
    padding: 7px 11px;
    border: 2px solid #111111;
    border-radius: 7px;
    background: #ffb300;
    color: #111111;
    font-weight: 900;
    cursor: pointer;
}

.live-speler-regel.live-geselecteerd .live-kies-knop {
    background: #6a1b9a;
    color: #ffffff;
    border-color: #ffe082;
}

.live-zijbalk {
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 5px 4px;
    border: 2px solid #3e2723;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(93, 64, 55, 0.98), rgba(141, 110, 99, 0.96));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.live-zijbalk-naam {
    width: 100%;
    padding: 4px 2px 5px;
    color: #ffe082;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

.live-zijplank {
    height: calc(100% - 34px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px 0 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.live-zijsteen {
    width: 34px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid #ffffff;
    border-radius: 4px;
    background-color: #f5f5f5;
    background-image: url('fotos/defotograafonderweg.png?v=1.0.53');
    background-size: 82%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
}

body.live-meerspeler #tafel-zone {
    display: grid !important;
    grid-template-columns: 66px minmax(0, 1fr) 66px 28px;
    grid-template-areas: "links tafel rechts scroll";
    gap: 5px;
    flex: 1 1 auto;
    align-self: center;
    width: 98%;
    min-height: 0;
    margin: 5px 0;
    overflow: hidden;
}

body.live-meerspeler #live-zijbalk-links { grid-area: links; }
body.live-meerspeler #tafel { grid-area: tafel; }
body.live-meerspeler #live-zijbalk-rechts { grid-area: rechts; }
body.live-meerspeler #tafel-scrollbediening { grid-area: scroll; }

body.live-meerspeler #tafel-zone > #tafel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
}

/* Bij drie spelers zijn de twee tegenstanders links en rechts geplaatst. */
body.live-aantal-3 .boven-rij {
    display: none;
}

body.live-aantal-3 .boven-container {
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    body.live-meerspeler #tafel-zone {
        grid-template-columns: 50px minmax(0, 1fr) 50px 24px;
        gap: 3px;
        width: 100%;
        margin: 2px 0;
    }

    .live-zijbalk {
        padding: 3px 2px;
    }

    .live-zijbalk-naam {
        font-size: 9px;
        padding: 3px 1px;
    }

    .live-zijplank {
        height: calc(100% - 28px);
        gap: 2px;
    }

    .live-zijsteen {
        width: 28px;
        height: 39px;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    body.live-meerspeler #tafel-zone {
        grid-template-columns: 40px minmax(0, 1fr) 40px 20px;
        gap: 2px;
    }

    .live-zijbalk {
        border-width: 1px;
        border-radius: 5px;
        padding: 2px 1px;
    }

    .live-zijbalk-naam {
        font-size: 8px;
        line-height: 1.05;
    }

    .live-zijplank {
        height: calc(100% - 24px);
        padding-bottom: 4px;
    }

    .live-zijsteen {
        width: 23px;
        height: 33px;
        border-radius: 3px;
    }
}


/* ============================================================
   SPELKEUZE TIJDENS HET SPEL — versie 1.1.07
   Altijd bereikbaar zonder de bestaande vier mobiele bovenknoppen te wijzigen.
   ============================================================ */
#spelkeuze-status-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 9px;
    width: 100%;
    margin: 2px auto 4px;
}

#spelkeuze-open-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 4px 12px;
    border: 2px solid #000000;
    border-radius: 8px;
    background: #2e7d32;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    touch-action: manipulation;
}

#spelkeuze-open-knop:hover,
#spelkeuze-open-knop:focus-visible {
    background: #388e3c;
}

#spelkeuze-status-rij #live-tegenstander-badge {
    margin: 0;
}

#spelkeuze-tijdens-spel-venster {
    width: min(680px, 96vw);
}

.spelkeuze-tijdens-spel-knoppen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#spelkeuze-stoppen {
    background: #b71c1c;
    color: #ffffff;
}

#spelkeuze-tijdens-spel-fout {
    min-height: 20px;
    margin-top: 9px;
    color: #ffeb3b;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 600px) {
    #spelkeuze-status-rij {
        gap: 4px 6px;
        margin: 3px auto;
    }

    #spelkeuze-open-knop {
        min-height: 30px;
        padding: 5px 10px;
        font-size: 11px;
    }

    #spelkeuze-status-rij #live-tegenstander-badge {
        max-width: calc(100% - 8px);
        text-align: center;
        font-size: 10px;
    }

    .spelkeuze-tijdens-spel-knoppen {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   LIVE CHAT, MODERATIE EN LAATSTE ZET — versie 1.1.09
   ============================================================ */
.steen-open.live-laatste-zet {
    outline: 4px solid #ff8c00 !important;
    outline-offset: -2px;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.95) !important;
}

#live-chat-venster {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 80;
    width: min(320px, calc(100% - 20px));
    max-height: 300px;
    display: flex;
    flex-direction: column;
    border: 3px solid #ffe082;
    border-radius: 10px;
    background: rgba(18, 67, 35, 0.96);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.72);
    cursor: default;
    overflow: hidden;
}

#live-chat-venster[hidden] { display: none !important; }
#live-chat-venster.live-chat-ingeklapt { width: min(260px, calc(100% - 20px)); }
#live-chat-venster.live-chat-ingeklapt #live-chat-berichten,
#live-chat-venster.live-chat-ingeklapt #live-chat-invoer-rij,
#live-chat-venster.live-chat-ingeklapt #live-chat-fout { display: none; }

#live-chat-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 8px;
    background: rgba(0, 0, 0, 0.35);
}

#live-chat-titel { color: #ffe082; }
#live-chat-kopknoppen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
#live-chat-kopknoppen button {
    min-height: 28px;
    padding: 3px 7px;
    border: 1px solid #111111;
    border-radius: 5px;
    background: #ffb300;
    color: #111111;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
#live-chat-beheer { background: #d32f2f !important; color: #ffffff !important; }
#live-chat-inklappen { min-width: 30px; font-size: 18px !important; line-height: 1; }

#live-chat-berichten {
    min-height: 88px;
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
    background: rgba(0, 0, 0, 0.20);
    -webkit-overflow-scrolling: touch;
}

#live-chat-berichten .live-chatbericht { max-width: 94%; padding: 5px 7px; font-size: 12px; }
#live-chat-invoer-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 7px; }
#live-chat-invoer {
    min-width: 0;
    width: 100%;
    min-height: 48px;
    max-height: 90px;
    padding: 7px;
    border: 2px solid #ffe082;
    border-radius: 6px;
    resize: vertical;
    color: #111111;
    background: #ffffff;
    font: inherit;
    user-select: text;
    -webkit-user-select: text;
}
#live-chat-versturen {
    align-self: stretch;
    padding: 6px 10px;
    border: 2px solid #111111;
    border-radius: 6px;
    background: #ffb300;
    color: #111111;
    font-weight: 900;
    cursor: pointer;
}
#live-chat-fout { min-height: 0; padding: 0 7px 6px; color: #ffeb3b; font-size: 12px; font-weight: 800; }

#live-blokkeren-spelers { display: grid; gap: 8px; margin: 12px 0; }
.live-blokkeer-keuze {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 2px solid #ffe082;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.30);
    cursor: pointer;
}
.live-blokkeer-keuze input { width: 20px; height: 20px; }
#live-blokkeren-fout { min-height: 20px; margin-top: 8px; color: #ffeb3b; font-weight: 800; }

#motokub-geblokkeerd-overlay { z-index: 30000; }
.motokub-geblokkeerd-venster { border-color: #ff5252; background: #5f1111; text-align: center; }
.motokub-geblokkeerd-venster h2 { color: #ffffff; }

@media (max-width: 600px) and (orientation: portrait) {
    #live-chat-venster {
        right: 5px;
        bottom: 5px;
        width: min(250px, calc(100% - 10px));
        max-height: 230px;
    }
    #live-chat-berichten { min-height: 64px; max-height: 105px; }
    #live-chat-kopknoppen button { font-size: 9px; padding: 2px 5px; }
    #live-chat-invoer { min-height: 42px; font-size: 13px; }
    #live-chat-versturen { padding: 4px 7px; font-size: 12px; }
}


/* ============================================================
   STENEN BLIJVEN BUITEN DE GROTE LIVECHAT — versie 1.1.09
   De chat blijft rechtsonder. JavaScript verplaatst uitsluitend
   combinaties die werkelijk met het uitgeklapte chatvlak botsen.
   ============================================================ */
#tafel-vier-kolommen.live-chat-groot-open .tafel-set.live-chat-verplaatst {
    transition: grid-column 0.16s ease, grid-row 0.16s ease;
}

#live-chat-venster:not(.live-chat-ingeklapt) {
    pointer-events: auto;
}


/* ============================================================
   AUTOMATISCH 14 STENEN ALTIJD ZICHTBAAR BIJ START — 1.1.10
   Alleen herstel van de bestaande startknop bij een computerspel.
   ============================================================ */
body.motokub-start-uitdelen #pot-automatisch-uitdelen {
    display: block !important;
    visibility: visible !important;
    z-index: 1000 !important;
}


/* ============================================================
   GROTE CENTRALE BEURTMELDING EN VIJF BOVENKNOPPEN — 1.1.11
   Alleen de plaats en zichtbaarheid van de beurtmelding en Spelkeuze wijzigen.
   ============================================================ */
#top-balk-info {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 0 !important;
}

#top-balk-info > #spelregels-open-knop,
#top-balk-info > #donatie-open-knop,
#top-balk-info > #spelkeuze-open-knop,
#top-balk-info > #bug-open-knop,
#top-balk-info > #taal-wijzigen-knop {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 6px 11px !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
}

#top-balk-info > #spelkeuze-open-knop {
    background: #2e7d32 !important;
    color: #ffffff !important;
}

#top-balk-info > #spelkeuze-open-knop:hover,
#top-balk-info > #spelkeuze-open-knop:focus-visible {
    background: #388e3c !important;
}

#spelkeuze-status-rij {
    margin: 2px auto 4px !important;
}

#tafel > #instructie-box {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    min-width: min(430px, 78%) !important;
    max-width: 82% !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 15px 28px !important;
    border: 3px solid #000000 !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, 0.93) !important;
    color: #ffe082 !important;
    font-family: Arial, sans-serif !important;
    font-size: clamp(20px, 2.2vw, 30px) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.72) !important;
    pointer-events: none !important;
}

#tafel > #instructie-box[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    #top-balk-info > #spelregels-open-knop,
    #top-balk-info > #donatie-open-knop,
    #top-balk-info > #spelkeuze-open-knop,
    #top-balk-info > #bug-open-knop,
    #top-balk-info > #taal-wijzigen-knop {
        height: 32px !important;
        min-height: 32px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    #tafel > #instructie-box {
        min-width: min(360px, 78%) !important;
        min-height: 58px !important;
        padding: 12px 18px !important;
        font-size: clamp(17px, 2.8vw, 23px) !important;
    }
}

@media (max-width: 600px) {
    #top-balk-info {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-template-rows: 38px !important;
        gap: 4px !important;
    }

    #top-balk-info > #spelregels-open-knop,
    #top-balk-info > #donatie-open-knop,
    #top-balk-info > #spelkeuze-open-knop,
    #top-balk-info > #bug-open-knop,
    #top-balk-info > #taal-wijzigen-knop {
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 4px 2px !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 1 !important;
        color: transparent !important;
        text-shadow: none !important;
    }

    #top-balk-info > #spelregels-open-knop { grid-column: 1 !important; }
    #top-balk-info > #donatie-open-knop { grid-column: 2 !important; }
    #top-balk-info > #spelkeuze-open-knop { grid-column: 3 !important; }
    #top-balk-info > #bug-open-knop { grid-column: 4 !important; }
    #top-balk-info > #taal-wijzigen-knop { grid-column: 5 !important; }

    #top-balk-info > #spelkeuze-open-knop::after {
        content: "Spelkeuze";
        display: inline-block !important;
        color: #ffffff !important;
        font-family: Arial, sans-serif !important;
        font-size: clamp(8px, 2.25vw, 10px) !important;
        font-weight: 800 !important;
        line-height: 1.02 !important;
        white-space: nowrap !important;
    }

    body.motokub-taal-de #top-balk-info > #spelkeuze-open-knop::after { content: "Spielwahl"; }
    body.motokub-taal-pl #top-balk-info > #spelkeuze-open-knop::after { content: "Wybór gry"; }
    body.motokub-taal-tr #top-balk-info > #spelkeuze-open-knop::after { content: "Oyun seçimi"; }
    body.motokub-taal-ar #top-balk-info > #spelkeuze-open-knop::after { content: "اختيار اللعب"; }
    body.motokub-taal-en #top-balk-info > #spelkeuze-open-knop::after { content: "Game choice"; }

    #tafel > #instructie-box {
        left: 50% !important;
        top: 50% !important;
        width: auto !important;
        min-width: min(260px, 78%) !important;
        max-width: 84% !important;
        min-height: 54px !important;
        padding: 10px 12px !important;
        border-width: 2px !important;
        border-radius: 11px !important;
        font-size: clamp(15px, 4.3vw, 19px) !important;
    }
}


/* ============================================================
   STENEN BLIJVEN BUITEN DE CENTRALE BEURTMELDING — 1.1.14
   De zwarte melding is een tijdelijk verboden tafelvlak. JavaScript
   verplaatst uitsluitend combinaties die het meldingsvlak werkelijk raken.
   ============================================================ */
#tafel-vier-kolommen.centrale-beurtmelding-open .tafel-set.live-chat-verplaatst {
    transition: grid-column 0.16s ease, grid-row 0.16s ease;
}


/* ============================================================
   TABLETCHAT + AUTOMATISCH 14 STENEN LIVE — versie 1.1.15
   Alleen herstel van het chatvenster op tablet en de bestaande
   startknop bij een nieuwe livewedstrijd.
   ============================================================ */
body.motokub-live-wacht-op-14 #pot-automatisch-uitdelen {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
}

body.motokub-live-wacht-op-14 #balk-wrapper-beneden .steen-open,
body.motokub-live-wacht-op-14 #tafel-vier-kolommen .tafel-set {
    pointer-events: none !important;
}

@media (min-width: 601px) and (max-width: 1100px) {
    #live-chat-venster {
        width: min(340px, calc(100% - 20px));
        max-height: min(360px, calc(100% - 20px));
        overflow: hidden;
    }

    #live-chat-kop,
    #live-chat-invoer-rij,
    #live-chat-fout {
        flex: 0 0 auto;
    }

    #live-chat-kop {
        align-items: flex-start;
    }

    #live-chat-kopknoppen {
        flex: 0 1 auto;
    }

    #live-chat-berichten {
        flex: 1 1 auto;
        min-height: 54px;
        max-height: none;
    }

    #live-chat-invoer-rij {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        padding-bottom: max(7px, env(safe-area-inset-bottom));
        background: rgba(18, 67, 35, 0.98);
    }

    #live-chat-invoer {
        display: block !important;
        min-height: 52px;
        max-height: 82px;
    }

    #live-chat-versturen {
        display: block !important;
        min-width: 78px;
    }

    #live-chat-venster.live-chat-ingeklapt {
        display: flex !important;
        right: 10px;
        bottom: 10px;
        width: min(280px, calc(100% - 20px));
        height: auto !important;
        min-height: 44px;
        max-height: none !important;
        overflow: hidden;
    }

    #live-chat-venster.live-chat-ingeklapt #live-chat-kop {
        display: flex !important;
        width: 100%;
    }

    #live-chat-venster.live-chat-ingeklapt #live-chat-berichten,
    #live-chat-venster.live-chat-ingeklapt #live-chat-invoer-rij,
    #live-chat-venster.live-chat-ingeklapt #live-chat-fout {
        display: none !important;
    }
}


/* ============================================================
   KLEINE LIVE-MELDING NAAST TAAL — versie 1.2.09
   Nieuwe beschikbare spelers onderbreken het spel niet meer met
   een groot venster. De melding staat kort bovenin en verdwijnt zelf.
   ============================================================ */
#live-kleine-melding {
    position: fixed !important;
    z-index: 16000 !important;
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(238px, calc(100vw - 16px));
    min-height: 62px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 2px solid #082f6b;
    border-radius: 8px;
    background: linear-gradient(180deg, #1976d2 0%, #0d55a8 100%);
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.22;
    text-align: left;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.48);
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

#live-kleine-melding[hidden] {
    display: none !important;
}

#live-kleine-melding.live-kleine-melding-zichtbaar {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#live-kleine-melding-punt {
    flex: 0 0 auto;
    color: #58f06d;
    font-size: 20px;
    line-height: 1;
    text-shadow: 0 0 7px rgba(88, 240, 109, 0.75);
}

#live-kleine-melding-tekst {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.motokub-taal-ar #live-kleine-melding {
    direction: rtl;
    text-align: right;
}

@media (max-width: 600px) {
    #live-kleine-melding {
        width: min(205px, calc(100vw - 16px));
        min-height: 56px;
        padding: 9px 10px;
        font-size: 13px;
        border-radius: 7px;
    }

    #live-kleine-melding-punt {
        font-size: 18px;
    }
}


/* ============================================================
   SPELERSNAAM EEN STAP EERDER + OPGESCHOONDE LIVE-POPUP — 1.2.14
   ============================================================ */
#spelmodus-naam-deel {
    display: grid;
    gap: 7px;
    margin: 15px 0 4px;
    text-align: left;
}

#spelmodus-naam-deel label {
    color: #ffe082;
    font-weight: 900;
}

#live-spelersnaam {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 2px solid #ffe082;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 16px;
    user-select: text;
    -webkit-user-select: text;
}

#live-spelersnaam:focus {
    outline: 3px solid rgba(255, 224, 130, 0.55);
    outline-offset: 2px;
}

#spelmodus-naam-fout {
    min-height: 20px;
    color: #ffeb3b;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}

.live-lobby-kop {
    position: relative;
    justify-content: center;
    margin-bottom: 8px;
}

.live-lobby-titelvak {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.live-lobby-logo {
    width: 190px;
    max-width: 58%;
    margin-bottom: 8px;
}

.live-lobby-kop .live-kruis {
    position: absolute;
    top: 0;
    right: 0;
}

@media (max-width: 600px) {
    .live-lobby-logo {
        width: 165px;
        max-width: 55%;
    }
}


/* ===== Motokub 1.2.17: scherpe wedstrijdstart zonder boemtekst of geluid ===== */
#melding-overlay.melding-wedstrijd-start {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42) 0 2%, rgba(255, 193, 7, 0.18) 12%, rgba(0, 0, 0, 0.78) 55%);
    animation: motokub-start-achtergrond 4.6s ease-in-out both;
    pointer-events: none;
}

#melding-overlay.melding-wedstrijd-start::before,
#melding-overlay.melding-wedstrijd-start::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(720px, 92vw);
    height: min(360px, 48vh);
    transform: translate(-50%, -50%) scale(0.35);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    filter: blur(8px);
    background:
        radial-gradient(circle at 16% 58%, rgba(238, 238, 238, 0.78) 0 8%, transparent 22%),
        radial-gradient(circle at 32% 40%, rgba(190, 190, 190, 0.68) 0 11%, transparent 27%),
        radial-gradient(circle at 50% 62%, rgba(245, 245, 245, 0.72) 0 10%, transparent 27%),
        radial-gradient(circle at 67% 39%, rgba(175, 175, 175, 0.66) 0 11%, transparent 28%),
        radial-gradient(circle at 84% 58%, rgba(235, 235, 235, 0.76) 0 8%, transparent 23%);
    animation: motokub-start-rook 4.6s ease-out both;
}

#melding-overlay.melding-wedstrijd-start::after {
    width: min(580px, 82vw);
    height: min(300px, 42vh);
    animation-delay: 0.16s;
    transform: translate(-50%, -45%) scale(0.28) rotate(8deg);
    filter: blur(14px);
}

#melding-overlay.melding-wedstrijd-start #melding-venster {
    position: relative;
    z-index: 2;
    width: min(620px, calc(100vw - 28px));
    min-height: 150px;
    justify-content: center;
    overflow: visible;
    border: 5px solid #ffdf4d;
    border-radius: 20px;
    background:
        linear-gradient(145deg, #43a047 0%, #176f2d 52%, #0c4b1e 100%);
    box-shadow:
        0 0 0 8px rgba(255, 193, 7, 0.16),
        0 0 55px rgba(255, 235, 59, 0.7),
        0 24px 55px rgba(0, 0, 0, 0.92);
    transform-origin: center;
    animation: motokub-start-boem-en-rook 4.6s cubic-bezier(.18,.86,.22,1) both;
    /* Geen filter op het venster: filters maken ook alle tekst wazig. */
    filter: none !important;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

#melding-overlay.melding-wedstrijd-start #melding-tekst {
    position: relative;
    z-index: 4;
    font-size: clamp(28px, 5vw, 52px);
    line-height: 1.08;
    font-weight: 1000;
    letter-spacing: 0.4px;
    color: #ffffff;
    filter: none !important;
    opacity: 1;
    text-shadow:
        0 3px 0 rgba(0,0,0,0.55),
        0 0 2px rgba(255,255,255,0.85);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

#melding-overlay.melding-wedstrijd-start #melding-sluit-knop {
    display: none !important;
}

@keyframes motokub-start-boem-en-rook {
    /* Rustige, langzamere beweging; tekst en venster blijven volledig scherp. */
    0%   { opacity: 0; transform: scale(0.82) rotate(-3deg); }
    8%   { opacity: 1; transform: scale(1.06) rotate(1.4deg); }
    16%  { transform: scale(1) rotate(-0.7deg) translateX(-10px); }
    27%  { transform: scale(1) rotate(0.6deg) translateX(10px); }
    38%  { transform: scale(1) rotate(-0.45deg) translateX(-8px); }
    49%  { transform: scale(1) rotate(0.3deg) translateX(6px); }
    58%  { transform: scale(1) rotate(0) translateX(0); }
    78%  { opacity: 1; transform: scale(1) translateY(0); }
    88%  { opacity: 0.92; transform: scale(1.015) translateY(-3px); }
    100% { opacity: 0; transform: scale(1.045) translateY(-18px); }
}

@keyframes motokub-start-rook {
    0%, 62% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
    72%     { opacity: 0.22; }
    84%     { opacity: 0.76; transform: translate(-50%, -55%) scale(0.9); }
    100%    { opacity: 0; transform: translate(-50%, -78%) scale(1.58); filter: blur(24px); }
}

@keyframes motokub-start-achtergrond {
    0%   { opacity: 0; }
    4%   { opacity: 1; filter: brightness(2.3); }
    12%  { filter: brightness(1); }
    72%  { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 600px) {
    #melding-overlay.melding-wedstrijd-start #melding-venster {
        min-height: 132px;
        padding: 25px 16px;
    }

}

@media (prefers-reduced-motion: reduce) {
    #melding-overlay.melding-wedstrijd-start,
    #melding-overlay.melding-wedstrijd-start::before,
    #melding-overlay.melding-wedstrijd-start::after,
    #melding-overlay.melding-wedstrijd-start #melding-venster,
    #melding-overlay.melding-wedstrijd-start #melding-venster::before {
        animation-duration: 2.8s !important;
    }

    #melding-overlay.melding-wedstrijd-start #melding-venster {
        animation-name: motokub-start-rustig;
    }
}

@keyframes motokub-start-rustig {
    0%   { opacity: 0; transform: scale(0.9); }
    18%, 78% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.03) translateY(-10px); }
}

/* ===== Motokub 1.2.21: liggende meedraaiende schaduw en bediening zonder plusknoppen ===== */
.motokub-logo-3d {
    position: relative;
    display: block;
    aspect-ratio: var(--motokub-logo-verhouding, 1.72);
    overflow: visible;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    isolation: isolate;
    filter: none;
}

.motokub-logo-3d .motokub-logo-draaier {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
    animation: motokub-logo-vloeiend-3d 9s linear infinite !important;
    -webkit-animation: motokub-logo-vloeiend-3d 9s linear infinite !important;
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
}

.motokub-logo-3d .motokub-logo-vlak {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* De voor- en achterkant zijn aparte vlakken. Daardoor blijft de tekst
   aan beide kanten normaal leesbaar en verschijnt hij nooit gespiegeld. */
.motokub-logo-3d .motokub-logo-voorzijde {
    transform: translateZ(9px);
    -webkit-transform: translateZ(9px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));
}

.motokub-logo-3d .motokub-logo-achterzijde {
    transform: rotateY(180deg) translateZ(9px);
    -webkit-transform: rotateY(180deg) translateZ(9px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));
}

/* Donkere tussenlagen geven het platte PNG-logo een zichtbare dikte van 18 px. */
.motokub-logo-3d .motokub-logo-rand {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    opacity: 0.92;
    filter: brightness(0.28) saturate(0.7) contrast(1.2);
}

/* De liggende ovale schaduw uit 1.2.19 is terug. De onderkant stond toen
   7% te laag; bottom: 0 brengt hem direct tegen de onderste logorand. Omdat
   hij binnen .motokub-logo-draaier staat, volgt hij exact dezelfde 3D-draaiing. */
.motokub-logo-3d .motokub-logo-schaduw {
    position: absolute;
    left: 13%;
    right: 13%;
    bottom: 0;
    z-index: 0;
    height: 15%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.58);
    opacity: 0.62;
    filter: blur(8px);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    pointer-events: none;
}

@keyframes motokub-logo-vloeiend-3d {
    0% {
        transform: rotateX(5deg) rotateY(0deg) scale(1);
    }
    25% {
        transform: rotateX(1deg) rotateY(90deg) scale(0.99);
    }
    50% {
        transform: rotateX(-5deg) rotateY(180deg) scale(1);
    }
    75% {
        transform: rotateX(-1deg) rotateY(270deg) scale(0.99);
    }
    100% {
        transform: rotateX(5deg) rotateY(360deg) scale(1);
    }
}

@-webkit-keyframes motokub-logo-vloeiend-3d {
    0% {
        -webkit-transform: rotateX(5deg) rotateY(0deg) scale(1);
    }
    25% {
        -webkit-transform: rotateX(1deg) rotateY(90deg) scale(0.99);
    }
    50% {
        -webkit-transform: rotateX(-5deg) rotateY(180deg) scale(1);
    }
    75% {
        -webkit-transform: rotateX(-1deg) rotateY(270deg) scale(0.99);
    }
    100% {
        -webkit-transform: rotateX(5deg) rotateY(360deg) scale(1);
    }
}


/* ===== Motokub 1.2.21: plusknoppen definitief verwijderd =====
   Slepen en loskoppelen gebeurt met muis of één vinger. Deze noodregel
   verbergt ook een eventueel oud plus-element dat nog in de pagina stond. */
.tafel-toevoegknop,
html.motokub-aanraakscherm .tafel-toevoegknop {
    display: none !important;
}

/* ===== Motokub 1.2.22: grote livechat bedekt geen tafelstenen meer =====
   Op pc en tablet wordt rechts een vrije strook gereserveerd. Alleen op een
   zeer smal scherm komt extra ruimte onder de combinaties beschikbaar. */
#tafel-vier-kolommen.live-chat-groot-open.live-chat-ruimte-rechts {
    padding-right: var(--motokub-live-chat-rechtsruimte, 0px) !important;
    box-sizing: border-box !important;
}

#tafel.live-chat-ruimte-onder-open {
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
}

#tafel-vier-kolommen.live-chat-groot-open.live-chat-ruimte-onder {
    height: auto !important;
    min-height: 100% !important;
    padding-bottom: var(--motokub-live-chat-onderruimte, 0px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}



/* ============================================================
   MOTOKUB 1.2.23 — COMPACTE LIVE-MELDING NAAST TAAL
   De melding is onderdeel van de lichtgroene bovenbalk. Hij zweeft niet
   meer over de tegenstander of het donkergroene speelveld.
   ============================================================ */
#top-balk-info > #live-kleine-melding {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: inline-flex !important;
    flex: 0 1 auto !important;
    order: 6 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 205px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border: 2px solid #0b5f27 !important;
    border-radius: 8px !important;
    background: #b9efc4 !important;
    color: #073d18 !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.32) !important;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.16s ease, transform 0.16s ease !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

#top-balk-info > #live-kleine-melding[hidden] {
    display: none !important;
}

#top-balk-info > #live-kleine-melding.live-kleine-melding-zichtbaar {
    opacity: 1;
    transform: scale(1);
}

#top-balk-info > #live-kleine-melding #live-kleine-melding-punt {
    flex: 0 0 auto !important;
    color: #15943c !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-shadow: 0 0 4px rgba(21, 148, 60, 0.35) !important;
}

#top-balk-info > #live-kleine-melding #live-kleine-melding-tekst {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.motokub-taal-ar #top-balk-info > #live-kleine-melding {
    direction: rtl !important;
    text-align: right !important;
}

@media (max-width: 900px) {
    #top-balk-info > #live-kleine-melding {
        max-width: 175px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 4px 7px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 600px) {
    #top-balk-info {
        grid-template-rows: 38px auto !important;
    }

    #top-balk-info > #live-kleine-melding {
        grid-column: 2 / 6 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        width: auto !important;
        max-width: 100% !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 3px 7px !important;
        font-size: 10.5px !important;
    }
}

/* ============================================================
   MOTOKUB 1.2.25 — TABLETCHAT: SCHRIJFVAK ALTIJD ZICHTBAAR
   Op een aanraaktablet staat de livechat buiten het scrollende tafelvak.
   De chat blijft boven de vaste spelersbalk en het berichtenvak krimpt,
   zodat tekstinvoer en de knop Versturen nooit worden afgesneden.
   ============================================================ */
@media (pointer: coarse) and (min-width: 601px) and (max-width: 900px) {
    #live-chat-venster {
        position: fixed !important;
        right: 10px !important;
        bottom: calc(var(--motokub-onderbalk-hoogte, 132px) + env(safe-area-inset-bottom) + 10px) !important;
        top: auto !important;
        width: min(350px, calc(100vw - 20px)) !important;
        max-height: min(
            390px,
            calc(100vh - var(--motokub-pot-hoogte, 108px) - var(--motokub-onderbalk-hoogte, 132px) - env(safe-area-inset-bottom) - 30px)
        ) !important;
        max-height: min(
            390px,
            calc(100dvh - var(--motokub-pot-hoogte, 108px) - var(--motokub-onderbalk-hoogte, 132px) - env(safe-area-inset-bottom) - 30px)
        ) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #live-chat-venster:not(.live-chat-ingeklapt) {
        display: flex !important;
        flex-direction: column !important;
    }

    #live-chat-kop,
    #live-chat-invoer-rij,
    #live-chat-fout {
        flex: 0 0 auto !important;
    }

    #live-chat-berichten {
        flex: 1 1 auto !important;
        min-height: 52px !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    #live-chat-invoer-rij {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        position: relative !important;
        z-index: 2 !important;
        padding: 7px 7px max(7px, env(safe-area-inset-bottom)) !important;
        background: rgba(18, 67, 35, 0.99) !important;
    }

    #live-chat-invoer,
    #live-chat-versturen {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #live-chat-invoer {
        min-height: 54px !important;
        max-height: 78px !important;
        resize: none !important;
    }

    #live-chat-versturen {
        min-width: 82px !important;
    }

    #live-chat-venster.live-chat-ingeklapt {
        bottom: calc(var(--motokub-onderbalk-hoogte, 132px) + env(safe-area-inset-bottom) + 10px) !important;
        height: auto !important;
        max-height: none !important;
    }
}

@media (pointer: coarse) and (orientation: landscape) and (min-width: 901px) and (max-width: 1366px) {
    #live-chat-venster {
        position: fixed !important;
        right: 230px !important;
        bottom: calc(var(--motokub-tablet-liggend-onderbalk, 196px) + env(safe-area-inset-bottom) + 10px) !important;
        top: auto !important;
        width: min(350px, calc(100vw - 250px)) !important;
        max-height: min(
            360px,
            calc(100vh - var(--motokub-tablet-liggend-onderbalk, 196px) - env(safe-area-inset-bottom) - 30px)
        ) !important;
        max-height: min(
            360px,
            calc(100dvh - var(--motokub-tablet-liggend-onderbalk, 196px) - env(safe-area-inset-bottom) - 30px)
        ) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #live-chat-venster:not(.live-chat-ingeklapt) {
        display: flex !important;
        flex-direction: column !important;
    }

    #live-chat-kop,
    #live-chat-invoer-rij,
    #live-chat-fout {
        flex: 0 0 auto !important;
    }

    #live-chat-berichten {
        flex: 1 1 auto !important;
        min-height: 48px !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    #live-chat-invoer-rij {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        position: relative !important;
        z-index: 2 !important;
        padding: 7px !important;
        background: rgba(18, 67, 35, 0.99) !important;
    }

    #live-chat-invoer,
    #live-chat-versturen {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #live-chat-invoer {
        min-height: 52px !important;
        max-height: 76px !important;
        resize: none !important;
    }

    #live-chat-versturen {
        min-width: 82px !important;
    }

    #live-chat-venster.live-chat-ingeklapt {
        right: 230px !important;
        bottom: calc(var(--motokub-tablet-liggend-onderbalk, 196px) + env(safe-area-inset-bottom) + 10px) !important;
        height: auto !important;
        max-height: none !important;
    }
}



/* ============================================================
   MOTOKUB 1.2.26 — LOSSE LIVE-CHATPOP-UP OP ALLE APPARATEN
   De chat staat niet meer in of boven de tafel. De knop Chat staat bovenin
   en de pop-up opent automatisch bij verzenden en ontvangen.
   ============================================================ */
#top-balk-info > #live-chat-open-knop {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 84px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 6px 11px !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    background: #00695c !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
}

#top-balk-info > #live-chat-open-knop[hidden] {
    display: none !important;
}

#top-balk-info > #live-chat-open-knop:hover,
#top-balk-info > #live-chat-open-knop:focus-visible,
#top-balk-info > #live-chat-open-knop.live-chat-knop-open {
    background: #00897b !important;
    outline: 2px solid #ffe082;
    outline-offset: 1px;
}

#live-chat-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 32000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    background: rgba(0, 0, 0, 0.68) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    overscroll-behavior: contain;
}

#live-chat-overlay[hidden] {
    display: none !important;
}

#live-chat-overlay > #live-chat-venster {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(600px, calc(100vw - 24px)) !important;
    height: min(650px, calc(100dvh - 24px)) !important;
    min-height: min(430px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 !important;
    border: 3px solid #ffe082 !important;
    border-radius: 14px !important;
    background: rgba(18, 67, 35, 0.99) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.88) !important;
    overflow: hidden !important;
}

#live-chat-overlay > #live-chat-venster[hidden] {
    display: none !important;
}

#live-chat-overlay #live-chat-kop {
    flex: 0 0 auto !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    background: #0b3517 !important;
}

#live-chat-overlay #live-chat-kopknoppen {
    align-items: center !important;
}

#live-chat-overlay #live-chat-inklappen {
    min-width: 38px !important;
    width: 38px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 27px !important;
    line-height: 1 !important;
    background: #b71c1c !important;
    color: #ffffff !important;
}

#live-chat-overlay #live-chat-berichten {
    flex: 1 1 auto !important;
    min-height: 160px !important;
    max-height: none !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#live-chat-overlay #live-chat-invoer-rij {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    padding: 9px 9px max(9px, env(safe-area-inset-bottom)) !important;
    background: #0b3517 !important;
}

#live-chat-overlay #live-chat-invoer {
    display: block !important;
    width: 100% !important;
    min-height: 64px !important;
    max-height: 120px !important;
    padding: 10px !important;
    resize: vertical !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 16px !important;
}

#live-chat-overlay #live-chat-versturen {
    display: block !important;
    min-width: 104px !important;
    min-height: 48px !important;
    align-self: stretch !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
}

#live-chat-overlay #live-chat-fout {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding: 0 10px 8px !important;
}

body.live-chat-popup-open {
    overscroll-behavior: none;
}

/* De losse pop-up is geen deel meer van het tafelraster. */
#tafel-vier-kolommen.live-chat-groot-open,
#tafel-vier-kolommen.live-chat-groot-open.live-chat-ruimte-rechts,
#tafel-vier-kolommen.live-chat-groot-open.live-chat-ruimte-onder {
    padding-right: initial !important;
    padding-bottom: initial !important;
}

#tafel.live-chat-ruimte-onder-open {
    padding-bottom: 15px !important;
}

@media (max-width: 900px) {
    #top-balk-info > #live-chat-open-knop {
        height: 32px !important;
        min-height: 32px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    #live-chat-overlay > #live-chat-venster {
        width: min(560px, calc(100vw - 20px)) !important;
        height: min(620px, calc(100dvh - 20px)) !important;
        min-height: min(390px, calc(100dvh - 20px)) !important;
        max-height: calc(100dvh - 20px) !important;
    }
}

@media (max-width: 600px) {
    #top-balk-info {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-template-rows: 38px auto !important;
    }

    #top-balk-info > #spelregels-open-knop { grid-column: 1 !important; }
    #top-balk-info > #donatie-open-knop { grid-column: 2 !important; }
    #top-balk-info > #spelkeuze-open-knop { grid-column: 3 !important; }
    #top-balk-info > #bug-open-knop { grid-column: 4 !important; }
    #top-balk-info > #taal-wijzigen-knop { grid-column: 5 !important; }
    #top-balk-info > #live-chat-open-knop {
        grid-column: 6 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 4px 1px !important;
        overflow: hidden !important;
        font-size: clamp(8px, 2.25vw, 10px) !important;
        line-height: 1.02 !important;
    }

    #top-balk-info > #live-kleine-melding {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: end !important;
    }

    #live-chat-overlay {
        align-items: stretch !important;
        padding: max(8px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
    }

    #live-chat-overlay > #live-chat-venster {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 10px !important;
    }

    #live-chat-overlay #live-chat-kop {
        min-height: 44px !important;
        padding: 6px 7px !important;
    }

    #live-chat-overlay #live-chat-kopknoppen button {
        padding: 4px 6px !important;
        font-size: 10px !important;
    }

    #live-chat-overlay #live-chat-berichten {
        min-height: 80px !important;
        padding: 7px !important;
    }

    #live-chat-overlay #live-chat-invoer-rij {
        grid-template-columns: minmax(0, 1fr) 88px !important;
        gap: 6px !important;
        padding: 7px 7px max(7px, env(safe-area-inset-bottom)) !important;
    }

    #live-chat-overlay #live-chat-invoer {
        min-height: 58px !important;
        max-height: 92px !important;
        resize: none !important;
        font-size: 16px !important;
    }

    #live-chat-overlay #live-chat-versturen {
        min-width: 88px !important;
        padding: 6px !important;
        font-size: 12px !important;
    }
}

/* ===== Motokub 1.2.26: livewedstrijdstart na de 14 stenen ===== */


/* ============================================================
   VERPLICHT UPDATEOVERZICHT VOOR SPELERS — versie 1.2.27
   Verschijnt na een nieuwe spelversie en moet eerst gelezen worden.
   ============================================================ */
#spel-update-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 12px;
    background: rgba(0, 18, 6, 0.88);
    backdrop-filter: blur(6px);
}

#spel-update-overlay[hidden] {
    display: none !important;
}

#spel-update-venster {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(780px, calc(100vw - 24px));
    max-height: min(820px, calc(100dvh - 24px));
    overflow: hidden;
    border: 3px solid #ffe082;
    border-radius: 16px;
    background: linear-gradient(180deg, #2e7d32 0%, #165522 100%);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.82);
}

#spel-update-kop {
    padding: 20px 24px 16px;
    border-bottom: 2px solid rgba(255, 224, 130, 0.55);
    background: rgba(0, 0, 0, 0.22);
    text-align: center;
}

#spel-update-versie {
    display: inline-block;
    margin-bottom: 7px;
    padding: 5px 11px;
    border: 1px solid rgba(255, 224, 130, 0.7);
    border-radius: 999px;
    background: rgba(255, 179, 0, 0.18);
    color: #fff2ba;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.4px;
}

#spel-update-titel {
    margin: 0;
    color: #ffe082;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.08;
}

#spel-update-uitleg {
    margin: 9px auto 0;
    max-width: 640px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

#spel-update-van-naar {
    margin: 7px 0 0;
    color: #d8f5dd;
    font-size: 13px;
    font-weight: 700;
}

#spel-update-inhoud {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px 20px;
    scrollbar-width: auto;
    scrollbar-color: #ffb300 rgba(0, 0, 0, 0.35);
}

#spel-update-inhoud::-webkit-scrollbar {
    width: 14px;
}

#spel-update-inhoud::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.32);
    border-radius: 9px;
}

#spel-update-inhoud::-webkit-scrollbar-thumb {
    border: 2px solid #fff0b3;
    border-radius: 9px;
    background: #ffb300;
}

.spel-update-sectie {
    margin-bottom: 13px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
}

.spel-update-sectie:last-child {
    margin-bottom: 0;
}

.spel-update-sectie h3 {
    margin: 0 0 9px;
    color: #ffe082;
    font-size: 18px;
    line-height: 1.2;
}

.spel-update-sectie ul {
    margin: 0;
    padding-left: 22px;
    color: #ffffff;
}

.spel-update-sectie li {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.45;
}

.spel-update-sectie li:last-child {
    margin-bottom: 0;
}

#spel-update-voet {
    display: flex;
    justify-content: center;
    padding: 13px 18px max(13px, env(safe-area-inset-bottom));
    border-top: 2px solid rgba(255, 224, 130, 0.55);
    background: #0b3517;
}

#spel-update-verder {
    min-width: min(310px, 100%);
    min-height: 48px;
    padding: 10px 24px;
    border: 2px solid #fff0b3;
    border-radius: 10px;
    background: #ffb300;
    color: #111111;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

#spel-update-verder:hover,
#spel-update-verder:focus-visible {
    background: #ffca28;
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

body.spel-update-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.motokub-taal-ar #spel-update-venster,
body.motokub-taal-ar #spel-update-inhoud {
    direction: rtl;
    text-align: right;
}

body.motokub-taal-ar #spel-update-kop,
body.motokub-taal-ar #spel-update-voet {
    text-align: center;
}

body.motokub-taal-ar .spel-update-sectie ul {
    padding-right: 22px;
    padding-left: 0;
}

@media (max-width: 600px) {
    #spel-update-overlay {
        padding: 6px;
    }

    #spel-update-venster {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: 12px;
    }

    #spel-update-kop {
        padding: 14px 14px 11px;
    }

    #spel-update-versie {
        margin-bottom: 5px;
        padding: 4px 9px;
        font-size: 11px;
    }

    #spel-update-titel {
        font-size: 24px;
    }

    #spel-update-uitleg {
        margin-top: 6px;
        font-size: 13px;
    }

    #spel-update-van-naar {
        margin-top: 5px;
        font-size: 11px;
    }

    #spel-update-inhoud {
        padding: 10px 10px 13px;
    }

    .spel-update-sectie {
        margin-bottom: 9px;
        padding: 11px 12px;
    }

    .spel-update-sectie h3 {
        margin-bottom: 7px;
        font-size: 16px;
    }

    .spel-update-sectie li {
        margin-bottom: 6px;
        font-size: 12.5px;
        line-height: 1.38;
    }

    #spel-update-voet {
        padding: 9px 10px max(9px, env(safe-area-inset-bottom));
    }

    #spel-update-verder {
        min-height: 45px;
        font-size: 14px;
    }
}


/* ============================================================
   MOTOKUB 1.2.30 — VEILIGE AFSTAND TUSSEN CHATKNOPPEN
   Speler blokkeren staat links van Meld chat. De sluitknop staat apart,
   zodat deze op pc, tablet en mobiel niet per ongeluk wordt aangeraakt.
   ============================================================ */
#live-chat-overlay #live-chat-kopknoppen {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 20px !important;
}

#live-chat-overlay #live-chat-actieknoppen {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

#live-chat-overlay #live-chat-beheer {
    order: 1 !important;
}

#live-chat-overlay #live-chat-melden {
    order: 2 !important;
}

#live-chat-overlay #live-chat-inklappen {
    order: 3 !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.28) !important;
}

/* Op tablet en mobiel krijgt de rode sluitknop een eigen plek rechtsboven.
   De twee actieknoppen staan samen op een aparte rij eronder. */
@media (max-width: 900px) {
    #live-chat-overlay #live-chat-kop {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "chat-titel chat-sluiten"
            "chat-acties chat-acties" !important;
        align-items: center !important;
        gap: 8px 12px !important;
        padding: 8px !important;
    }

    #live-chat-overlay #live-chat-titel {
        grid-area: chat-titel !important;
    }

    #live-chat-overlay #live-chat-kopknoppen {
        display: contents !important;
    }

    #live-chat-overlay #live-chat-actieknoppen {
        grid-area: chat-acties !important;
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    #live-chat-overlay #live-chat-actieknoppen button {
        min-height: 34px !important;
        padding: 5px 9px !important;
    }

    #live-chat-overlay #live-chat-inklappen {
        grid-area: chat-sluiten !important;
        justify-self: end !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 38px !important;
    }
}

@media (max-width: 420px) {
    #live-chat-overlay #live-chat-actieknoppen {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    #live-chat-overlay #live-chat-actieknoppen button {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 10px !important;
        white-space: normal !important;
    }
}


/* ============================================================
   MOTOKUB 1.2.32 — BLAUW TIJDENS SLEPEN, ORANJE NA KOPPELEN
   Blauw betekent: de vastgehouden steen past geldig bij deze combinatie.
   Oranje betekent: de steen is losgelaten en werkelijk samengevoegd.
   ============================================================ */
#tafel-vier-kolommen .tafel-set.motokub-aansluiting-mogelijk,
html.motokub-aanraakscherm #tafel-vier-kolommen .tafel-set.motokub-aansluiting-mogelijk {
    position: relative !important;
    z-index: 4 !important;
    border-radius: 8px !important;
    background-color: rgba(33, 150, 243, 0.18) !important;
    box-shadow:
        inset 0 0 0 4px #2196f3,
        inset 0 0 0 6px rgba(255, 255, 255, 0.92),
        0 0 18px rgba(33, 150, 243, 0.95) !important;
    animation: motokub-aansluiting-blauw 0.58s ease-in-out infinite alternate;
}

#tafel-vier-kolommen .tafel-set.motokub-aansluiting-gelukt,
html.motokub-aanraakscherm #tafel-vier-kolommen .tafel-set.motokub-aansluiting-gelukt {
    position: relative !important;
    z-index: 4 !important;
    border-radius: 8px !important;
    background-color: rgba(255, 140, 0, 0.2) !important;
    box-shadow:
        inset 0 0 0 4px #ff8c00,
        inset 0 0 0 6px rgba(255, 243, 196, 0.96),
        0 0 18px rgba(255, 140, 0, 0.92) !important;
    animation: none !important;
}

@keyframes motokub-aansluiting-blauw {
    from {
        box-shadow:
            inset 0 0 0 3px #2196f3,
            inset 0 0 0 5px rgba(255, 255, 255, 0.82),
            0 0 10px rgba(33, 150, 243, 0.72);
    }
    to {
        box-shadow:
            inset 0 0 0 5px #2196f3,
            inset 0 0 0 7px rgba(255, 255, 255, 0.96),
            0 0 22px rgba(33, 150, 243, 1);
    }
}


/* ------------------------------------------------------------
   MOTOKUB 1.2.33 — VIER TAFELKOLOMMEN OP PC, TABLET EN MOBIEL
   Twee kolommen links zijn voor de tegenstander en twee kolommen rechts
   voor de speler. Alleen tablet en mobiel gebruiken verticale tafelscroll;
   de pc houdt de tafel zonder scrolbalk.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   MOTOKUB 1.2.34 — TABLET EN MOBIEL VULLEN EERST VIER KOLOMMEN
   De pc-indeling blijft ongewijzigd. Op aanraakschermen worden eerst
   kolom 1, 2, 3 en 4 gevuld; daarna volgt een nieuwe regel met verticale
   tafelscroll.
   ------------------------------------------------------------ */


/* ============================================================
   MOTOKUB 1.2.38 — MOBIELE WEERGAVE HERSTELD
   Alleen telefoon in staande stand. Tablet en computer blijven ongewijzigd.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
    #top-balk-info {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: 40px 40px !important;
        grid-auto-rows: 40px !important;
        gap: 4px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    #top-balk-info > #spelregels-open-knop,
    #top-balk-info > #donatie-open-knop,
    #top-balk-info > #spelkeuze-open-knop,
    #top-balk-info > #bug-open-knop,
    #top-balk-info > #taal-wijzigen-knop,
    #top-balk-info > #live-chat-open-knop {
        order: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 4px 5px !important;
        overflow: hidden !important;
    }

    #top-balk-info > #spelregels-open-knop { grid-column: 1 !important; grid-row: 1 !important; }
    #top-balk-info > #donatie-open-knop { grid-column: 2 !important; grid-row: 1 !important; }
    #top-balk-info > #spelkeuze-open-knop { grid-column: 3 !important; grid-row: 1 !important; }
    #top-balk-info > #bug-open-knop { grid-column: 1 !important; grid-row: 2 !important; }
    #top-balk-info > #taal-wijzigen-knop { grid-column: 2 !important; grid-row: 2 !important; }
    #top-balk-info > #live-chat-open-knop { grid-column: 3 !important; grid-row: 2 !important; }

    #top-balk-info > #spelregels-open-knop::after,
    #top-balk-info > #donatie-open-knop::after,
    #top-balk-info > #spelkeuze-open-knop::after,
    #top-balk-info > #bug-open-knop::after,
    #top-balk-info > #taal-wijzigen-knop::after {
        max-width: 100% !important;
        overflow: hidden !important;
        font-size: clamp(10px, 3vw, 12px) !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    #top-balk-info > #live-kleine-melding {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }
}


/* ============================================================
   MOTOKUB 1.2.45 — MOBIELE TAFEL HORIZONTAAL EN VERTICAAL
   Alleen telefoon in staande stand. De tafelstenen krijgen dezelfde
   leesbare afmetingen als de stenen op de eigen balk. De tafelinhoud
   blijft twee kolommen gebruiken, maar is breder dan het scherm en kan
   daarom ook horizontaal worden verschoven. Pc en tablet blijven gelijk.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
    html.motokub-aanraakscherm body #tafel-zone > #tafel {
        overflow-x: scroll !important;
        overflow-y: scroll !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        scrollbar-width: auto;
        scrollbar-color: #ffb300 rgba(0, 0, 0, 0.58);
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen {
        width: 430px !important;
        min-width: 430px !important;
        max-width: none !important;
        grid-template-columns: repeat(2, minmax(205px, 1fr)) !important;
        grid-auto-flow: row !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set {
        min-width: max-content !important;
        max-width: none !important;
        min-height: 54px !important;
        gap: 3px !important;
        padding: 2px !important;
        flex-wrap: nowrap !important;
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .steen-open {
        width: 36px !important;
        height: 50px !important;
        flex: 0 0 36px !important;
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .steen-label,
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .kleur-joker {
        padding: 2px 4px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel::-webkit-scrollbar {
        width: 11px;
        height: 11px;
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel::-webkit-scrollbar-track {
        border-radius: 7px;
        background: rgba(0, 0, 0, 0.58);
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel::-webkit-scrollbar-thumb {
        border: 2px solid #fff3c4;
        border-radius: 7px;
        background: #ffb300;
    }
}

/* ============================================================
   MOTOKUB 1.2.46 — IETS GROTERE STENEN OP MOBIEL
   Alleen telefoon in staande stand: tafel en eigen stenenbalk.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
    :root {
        --motokub-onderbalk-hoogte: 110px;
    }

    #speler-stenen-zone,
    #balk-wrapper-beneden,
    #balk-wrapper-beneden .plank {
        height: 61px !important;
        min-height: 61px !important;
    }

    #balk-wrapper-beneden .plank {
        flex-basis: 61px !important;
    }

    #balk-wrapper-beneden .steen-open,
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .steen-open {
        width: 40px !important;
        height: 55px !important;
        flex: 0 0 40px !important;
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set {
        min-height: 59px !important;
    }

    #balk-wrapper-beneden .steen-label,
    #balk-wrapper-beneden .kleur-joker,
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .steen-label,
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .kleur-joker {
        font-size: 15px !important;
    }
}


/* ============================================================
   MOTOKUB 1.2.47 — MOBIELE TAFELSETS ONDER ELKAAR
   Alleen telefoon in staande stand. De grotere stenen van 1.2.46
   blijven behouden. De tafel schuift uitsluitend verticaal.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
    html.motokub-aanraakscherm body #tafel-zone > #tafel {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        touch-action: pan-y !important;
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        column-gap: 0 !important;
        row-gap: 8px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set,
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set[data-eigenaar="computer"],
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set[data-eigenaar="speler"] {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: start !important;
        justify-content: flex-start !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   MOTOKUB 1.2.48 — MOBIELE TAFELSETS GECENTREERD
   Alleen telefoon in staande stand. Alle sets van beide spelers staan
   onder elkaar in het midden. De bestaande steenmaat blijft gelijk.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set,
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set[data-eigenaar="computer"],
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set[data-eigenaar="speler"] {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ============================================================
   MOTOKUB 1.2.49 — ZWEEFSTEEN GELIJK AAN MOBIELE SPEELSTENEN
   Alleen het cijfer op de zwevende steen krijgt op een telefoon
   exact dezelfde grootte als de cijfers op balk en tafel.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
    .zwevende-steen .steen-label,
    .zwevende-steen .kleur-joker {
        padding: 2px 6px !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }
}


/* ============================================================
   MOTOKUB 1.2.50 — ALLE SPEELSTENEN IETS GROTER OP MOBIEL
   Alleen telefoon in staande stand. Tafel, eigen balk, gesloten
   tegenstanderstenen en zweefsteen gebruiken dezelfde grotere maat.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
    :root {
        --motokub-onderbalk-hoogte: 116px;
    }

    #speler-stenen-zone,
    #balk-wrapper-beneden,
    #balk-wrapper-beneden .plank {
        height: 66px !important;
        min-height: 66px !important;
    }

    #balk-wrapper-beneden .plank {
        flex-basis: 66px !important;
    }

    #balk-wrapper-beneden .steen-open,
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .steen-open,
    .steen-tegenstander {
        width: 44px !important;
        height: 60px !important;
        flex: 0 0 44px !important;
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set {
        min-height: 64px !important;
    }

    #balk-wrapper-beneden .steen-label,
    #balk-wrapper-beneden .kleur-joker,
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .steen-label,
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .kleur-joker,
    .zwevende-steen .steen-label,
    .zwevende-steen .kleur-joker {
        padding: 2px 5px !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }
}


/* ------------------------------------------------------------
   MOBIEL: POTTELLER VERBERGEN VOOR EXTRA RUIMTE — versie 1.2.58
   Alleen op telefoons. Het logo, de potstenen en de gele knop krijgen
   daardoor de volledige beschikbare breedte in de donkergroene balk.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    #pot-container {
        grid-template-columns: 70px minmax(0, 1fr) !important;
    }

    .pot-aantal {
        display: none !important;
    }

    #pot-stenen-zone {
        width: 100% !important;
        min-width: 0 !important;
    }

    #pot-automatisch-uitdelen {
        min-width: 150px;
        max-width: calc(100% - 10px);
    }
}


/* ============================================================
   MOTOKUB 1.2.59 — ONDERSTE TWEE KNOPPEN GECENTREERD OP MOBIEL
   De drie bovenste knoppen blijven naast elkaar staan. De rode en blauwe
   knop staan daaronder als een gecentreerd paar. Tablet en pc wijzigen niet.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
    #top-balk-info {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-template-rows: 40px 40px !important;
    }

    #top-balk-info > #spelregels-open-knop {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
    }

    #top-balk-info > #donatie-open-knop {
        grid-column: 3 / 5 !important;
        grid-row: 1 !important;
    }

    #top-balk-info > #spelkeuze-open-knop {
        grid-column: 5 / 7 !important;
        grid-row: 1 !important;
    }

    #top-balk-info > #bug-open-knop {
        grid-column: 2 / 4 !important;
        grid-row: 2 !important;
    }

    #top-balk-info > #taal-wijzigen-knop {
        grid-column: 4 / 6 !important;
        grid-row: 2 !important;
    }

    #top-balk-info > #live-chat-open-knop {
        grid-column: 2 / 6 !important;
        grid-row: 3 !important;
    }

    #top-balk-info > #live-kleine-melding {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
    }
}


/* ============================================================
   MOTOKUB 1.2.61 — MOBIELE SETS LINKS EN VEILIGE SCROLLRUIMTE
   Op telefoons blijven alle sets onder elkaar staan, maar nu links.
   Rechts blijft een lege strook vrij om te scrollen zonder een steen
   per ongeluk vast te pakken of uit een combinatie los te trekken.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen {
        justify-items: start !important;
        padding-left: 8px !important;
        padding-right: 52px !important;
    }

    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set,
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set[data-eigenaar="computer"],
    html.motokub-aanraakscherm body #tafel-zone > #tafel #tafel-vier-kolommen .tafel-set[data-eigenaar="speler"] {
        justify-self: start !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}