// Velikost dotykových tlačítek — podle ní se řídí i rozložení ovládání v jednotlivých hrách
:root {
    --touch-btn-size: 52px;
}

// Tablet (na rozdíl od telefonu na šířku je vysoký i široký) — na velkém displeji jsou malá tlačítka špatně trefitelná
@media (any-pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
    :root {
        --touch-btn-size: 76px;
    }
}

// Dotyková tlačítka miniher — bez zoomu dvojitým ťuknutím, výběru textu a kontextové nabídky při podržení
.touch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-btn-size);
    height: var(--touch-btn-size);
    padding: 0 10px;
    border: 1px solid var(--luncher-border, rgba(127, 127, 127, 0.4));
    border-radius: calc(var(--touch-btn-size) * 0.23);
    background: var(--bs-tertiary-bg);
    color: var(--luncher-text, inherit);
    font-size: calc(var(--touch-btn-size) * 0.45);
    line-height: 1;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;

    &:active {
        background: var(--luncher-primary, #198754);
        color: #fff;
    }
}