html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

body {
    background-color:var(--bg-black);
}

* {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Specific fix for long headers and translation keys */
h1, h2, h3, h4, h5, h6, .font-anton {
    word-break: break-word;
    overflow-wrap: anywhere;
}

:root {
    --bg-black: #0B0B0F;
    --button-purple-dark: #9340C2;
    --button-purple-light: #C44EB8;
    --dark: #0E0E0F
}

.btn-gradient {
    font-family: "joygame_sansbold",sans-serif;
    --angle: 90deg;
    appearance: none;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background-image: linear-gradient(var(--angle), var(--button-purple-dark), var(--button-purple-light));
    box-shadow: 0 8px 20px rgb(0 0 0 / .18);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
    padding: 10px;
}

.btn-gradient:hover {
    box-shadow: 0 12px 26px rgb(0 0 0 / .22);
    filter: saturate(1.2) brightness(1.2);
}

.btn-gradient:active {
    filter: brightness(.98);
}
.joygame-font {
    font-family: "joygame_sansbold",sans-serif;
}