:root {
    --medal-gold: #FFD700;
    --medal-silver: #C0C0C0;
    --medal-bronze: #CD7F32;
    --medal-hm: #B197FA;
    --theme-color: #1A8754;
    --theme-color-dark: #115740;
}

@font-face {
    font-family: 'Twemoji';
    src: url('/resources/twemoji.ttf') format('ttf');
    font-display: swap;
}

body {
    font-family: 'Twemoji', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
}

.debug-only {
    display: none !important;
}


.bi-hm {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    /* From img/hm.svg  */
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M14.5,3c0.274,0 0.5,0.226 0.5,0.5l0,9c0,0.274 -0.226,0.5 -0.5,0.5l-13,0c-0.274,0 -0.5,-0.226 -0.5,-0.5l0,-9c0,-0.274 0.226,-0.5 0.5,-0.5l13,0Zm-13,-1c-0.823,0 -1.5,0.677 -1.5,1.5l0,9c0,0.823 0.677,1.5 1.5,1.5l13,0c0.823,0 1.5,-0.677 1.5,-1.5l0,-9c0,-0.823 -0.677,-1.5 -1.5,-1.5l-13,0Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M3,4.5c0,-0.274 0.226,-0.5 0.5,-0.5l9,0c0.274,0 0.5,0.226 0.5,0.5c0,0.274 -0.226,0.5 -0.5,0.5l-9,0c-0.274,0 -0.5,-0.226 -0.5,-0.5Z'/%3E%3Cpath d='M11.34,7.328c0.03,-0.061 0.092,-0.1 0.16,-0.1c0.068,0 0.13,0.039 0.16,0.1l0.634,1.285c0.026,0.052 0.076,0.089 0.134,0.098l1.42,0.206c0.145,0.021 0.204,0.2 0.098,0.303l-1.026,1.001c-0.042,0.041 -0.061,0.1 -0.051,0.158l0.242,1.414c0.002,0.01 0.002,0.019 0.002,0.029c0,0.098 -0.08,0.178 -0.178,0.178c-0.029,0 -0.057,-0.007 -0.082,-0.02l-1.27,-0.668c-0.052,-0.027 -0.113,-0.027 -0.165,0l-1.27,0.668c-0.025,0.013 -0.053,0.02 -0.081,0.02c-0.098,0 -0.178,-0.08 -0.178,-0.178c0,-0.01 0.001,-0.019 0.002,-0.029l0.242,-1.414c0.01,-0.058 -0.009,-0.117 -0.05,-0.158l-1.03,-1.001c-0.034,-0.033 -0.053,-0.079 -0.053,-0.127c0,-0.088 0.065,-0.163 0.151,-0.176l1.42,-0.206c0.058,-0.009 0.108,-0.046 0.134,-0.098l0.635,-1.285Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M3,7c0,-0.274 0.226,-0.5 0.5,-0.5l6,0c0.274,0 0.5,0.226 0.5,0.5c0,0.274 -0.226,0.5 -0.5,0.5l-6,0c-0.274,0 -0.5,-0.226 -0.5,-0.5Z'/%3E%3Cpath d='M3,9.5c0,-0.274 0.226,-0.5 0.5,-0.5l4,0c0.274,0 0.5,0.226 0.5,0.5c0,0.274 -0.226,0.5 -0.5,0.5l-4,0c-0.274,0 -0.5,-0.226 -0.5,-0.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M14.5,3c0.274,0 0.5,0.226 0.5,0.5l0,9c0,0.274 -0.226,0.5 -0.5,0.5l-13,0c-0.274,0 -0.5,-0.226 -0.5,-0.5l0,-9c0,-0.274 0.226,-0.5 0.5,-0.5l13,0Zm-13,-1c-0.823,0 -1.5,0.677 -1.5,1.5l0,9c0,0.823 0.677,1.5 1.5,1.5l13,0c0.823,0 1.5,-0.677 1.5,-1.5l0,-9c0,-0.823 -0.677,-1.5 -1.5,-1.5l-13,0Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M3,4.5c0,-0.274 0.226,-0.5 0.5,-0.5l9,0c0.274,0 0.5,0.226 0.5,0.5c0,0.274 -0.226,0.5 -0.5,0.5l-9,0c-0.274,0 -0.5,-0.226 -0.5,-0.5Z'/%3E%3Cpath d='M11.34,7.328c0.03,-0.061 0.092,-0.1 0.16,-0.1c0.068,0 0.13,0.039 0.16,0.1l0.634,1.285c0.026,0.052 0.076,0.089 0.134,0.098l1.42,0.206c0.145,0.021 0.204,0.2 0.098,0.303l-1.026,1.001c-0.042,0.041 -0.061,0.1 -0.051,0.158l0.242,1.414c0.002,0.01 0.002,0.019 0.002,0.029c0,0.098 -0.08,0.178 -0.178,0.178c-0.029,0 -0.057,-0.007 -0.082,-0.02l-1.27,-0.668c-0.052,-0.027 -0.113,-0.027 -0.165,0l-1.27,0.668c-0.025,0.013 -0.053,0.02 -0.081,0.02c-0.098,0 -0.178,-0.08 -0.178,-0.178c0,-0.01 0.001,-0.019 0.002,-0.029l0.242,-1.414c0.01,-0.058 -0.009,-0.117 -0.05,-0.158l-1.03,-1.001c-0.034,-0.033 -0.053,-0.079 -0.053,-0.127c0,-0.088 0.065,-0.163 0.151,-0.176l1.42,-0.206c0.058,-0.009 0.108,-0.046 0.134,-0.098l0.635,-1.285Z' style='fill-rule:nonzero;'/%3E%3Cpath d='M3,7c0,-0.274 0.226,-0.5 0.5,-0.5l6,0c0.274,0 0.5,0.226 0.5,0.5c0,0.274 -0.226,0.5 -0.5,0.5l-6,0c-0.274,0 -0.5,-0.226 -0.5,-0.5Z'/%3E%3Cpath d='M3,9.5c0,-0.274 0.226,-0.5 0.5,-0.5l4,0c0.274,0 0.5,0.226 0.5,0.5c0,0.274 -0.226,0.5 -0.5,0.5l-4,0c-0.274,0 -0.5,-0.226 -0.5,-0.5Z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
    vertical-align: -0.125em;
}

a {
    text-decoration: none !important;
}

* {
    font-family: 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

debug-only {
    display: none;
}

.hero-section {
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color-dark) 100%);
    padding: 6rem 0;
    color: white;
    margin-bottom: 2rem;
}

.stats-card {
    background-color: var(--bs-secondary-bg);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

.info-card {
    background-color: var(--bs-secondary-bg);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    height: 100%;
}

.info-card h3 {
    color: var(--theme-color);
    margin-bottom: 1rem;
}

.join-section {
    background-color: var(--bs-success-bg-subtle) /* #f0f9f4 */;
    padding: 3rem 0;
    margin: 2rem 0;
    border-radius: 10px;
}

.medal-icon {
    font-size: 2rem;
}

.medal-gold {
    color: var(--medal-gold);
}

.medal-silver {
    color: var(--medal-silver);
}

.medal-bronze {
    color: var(--medal-bronze);
}

.medal-hm {
    color: var(--medal-hm);
} 

footer {
    text-align: center;
    padding: 2rem 0;
    background-color: #f8f9fa;
}

.nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem;
}

.nav-link:hover {
    color: #fff;
    background-color: rgba(255,255,255,0.1);
    border-radius: 5px;
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--theme-color);
    margin-bottom: 1rem;
}

.stat-row > td {
    text-align: center;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--theme-color) !important;
}



/*
.btn-success {
    background-color: var(--bs-success) /* #1A8754 /;
    border-color: #1A8754;
}

.btn-success:hover {
    background-color: #115740;
    border-color: #115740;
}
*/

::-webkit-scrollbar {
    display: none;
}