:root {
    /* Botões */
    --button-color: #FACC15;
    --button-txt-color: #181818;

    /* Hub geral */
    --hub-border: #27272a;
    --hub-text-primary: #e4e4e7;
    --hub-text-secondary: #a1a1aa;
    --hub-accent: #B81636;
    --hub-radius: 0.75rem;
    --hub-radius-sm: 0.5rem;
    --hub-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

    /* CKEditor */
    --ck-text: #e4e4e7;
    --ck-primary: #B81636;
    --ck-border: #3a3a3f;
    --ck-surface: #2a2a30;

    /* Inputs e componentes */
    --bg-input: #36363a;
    --border-color: #444;

    /* Textos globais */
    --section-title-color: #FACC15;
    --text-secondary: #dddddd;
    --accent-color: #B81636;
    --success-color: #4CAF50;
    --error-color: #D32F2F;
    --text-primary: #ffffff;
    --text-primary-hover: #facc15;
    --text-secondary: #cbcbe0;

    /* Sports */
    --s-bg-card: rgba(255, 255, 255, 0.02);
    --s-panel: #1a1a1e;
    --s-panel-hover: #232325;
    --s-border: #2a2a2e;
    --s-text: #e4e4e7;
    --s-muted: #a1a1aa;
    --s-accent: #B81636;
    --s-accent-2: #facc15;
    --s-radius-md: 8px;
    --s-radius-lg: 12px;
    --s-padding: 14px;
    --s-gap: 16px;
    --s-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    --s-max-width: 1400px;

    /* E-Sports */
    --esports-game-border: #27272a;
    --esports-game-text-primary: #e4e4e7;
    --esports-game-text-secondary: #a1a1aa;
    --esports-game-accent-primary: #B81636;
    --esports-game-accent-secondary: #facc15;
    --esports-game-radius: 0.75rem;
    --esports-game-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);

    /* Partidas — Score */
    --match-score-text: #B81636;
    --match-score-number: #e4e4e7;
    --match-score-border: #3f3f46;
    --match-score-radius: 0.5rem;
    --match-score-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);


    /* Background e bordas globais */
    --background-color: #101014;
    --background-card: #1A1A1E;
    --background-card-over: #29292d;
    --card-border: 8px;
    --bg-tertiary: #27272a;
    --border-primary: #3f3f46;

    /* Acento global */
    --accent-primary: #B81636;

    /* Scrollbar */
    --scrollbar-width: 8px;
    --scrollbar-height: 6px;
    --scrollbar-track-bg: #18181A;
    --scrollbar-track-radius: 10px;
    --scrollbar-thumb-bg: #232325;
    --scrollbar-thumb-radius: 10px;
    --scrollbar-thumb-border: 2px solid #18181A;
}

* {
    -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"],
input[type="submit"],
input[type="button"],
.item,
.cookie-btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

html,
body,
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.allow-select {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

main {
    display: flex;
    padding-top: 9vh;
    width: 100%;
    flex: 1;
}

#content {
    width: 100%;
    min-width: 0;
}

.page-container {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 1vw 2vw;
    color: #e4e4e7;
}

.category {
    margin-bottom: 20px;
}

.category h2 {
    font-size: 18px;
    cursor: pointer;
    color: white;
}

.item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.item img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.item a {
    text-decoration: none;
    color: white;
}

.item a:hover {
    text-decoration: underline;
}

h2 {
    color: var(--section-title-color);
    border-left: 4px solid #facc15;
    padding-left: 15px;
    font-size: 2rem;
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-height);
}

::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-bg);
    border-radius: var(--scrollbar-track-radius);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-bg);
    border-radius: var(--scrollbar-thumb-radius);
    border: var(--scrollbar-thumb-border);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-bg);
}

.content-loader-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 50vh;
    padding: 40px;
    box-sizing: border-box;
}

.content-loader-wrapper .spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #444;
    border-top-color: #B81636;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.category {
    margin-bottom: 20px;
}

.item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.item img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.item a {
    text-decoration: none;
    color: white;
}

.item a:hover {
    text-decoration: underline;
}


/* Remove o estilo padrão de todos os links */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
    text-decoration: none !important;
}

/* MOBILE */
@media (max-width: 600px) {

    main {
        padding-top: 8vh;
    }

}