/* MATCHDAY MODERN CSS */
/* Google-fonts der bruges i dette design (Anton = spillernumre paa gaette-billetten,
   Staatliches = score/nedtaelling/regler). Importeres HER, saa de altid indlaeses
   uanset om siden naar at loade dem via stylesheets.php. SKAL staa oeverst. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Staatliches&display=swap');

/* Deep crimson radial gradient for background */
body.matchday-modern {
    background: transparent !important;
    min-height: 100vh;
    height: auto !important;
    overflow-x: hidden;
    font-family: 'effra', sans-serif;
    color: #ffffff;
    margin: 0;
}

html {
    min-height: 100vh !important;
    height: auto !important;
    /* Yderfarven var lilla (#240b36) - klienten vil have moerkeroed hele vejen ned. */
    background-color: #3f0c17 !important;
    background-image: radial-gradient(circle at top center, #c31432, #3f0c17) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Matchday Ticket CSS */
.guess-ticket {
    background-color: #f3efe6;
    color: #240b36;
    max-width: 350px;
    margin: 30px auto;
    padding: 30px 20px;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    /* perforated edges top and bottom */
    -webkit-mask-image: 
        radial-gradient(circle at 12px 0px, transparent 8px, black 9px), 
        radial-gradient(circle at 12px 24px, transparent 8px, black 9px),
        linear-gradient(black, black);
    -webkit-mask-size: 
        24px 24px, 
        24px 24px,
        100% calc(100% - 48px);
    -webkit-mask-position: 
        top left, 
        bottom left,
        center;
    -webkit-mask-repeat: 
        repeat-x, 
        repeat-x,
        no-repeat;
    mask-image: 
        radial-gradient(circle at 12px 0px, transparent 8px, black 9px), 
        radial-gradient(circle at 12px 24px, transparent 8px, black 9px),
        linear-gradient(black, black);
    mask-size: 
        24px 24px, 
        24px 24px,
        100% calc(100% - 48px);
    mask-position: 
        top left, 
        bottom left,
        center;
    mask-repeat: 
        repeat-x, 
        repeat-x,
        no-repeat;
}
.ticket-header {
    font-family: 'fatfrank', sans-serif;
    font-size: 24px;
    text-align: center;
    color: #1a0b26;
    border-bottom: 2px dashed #9a152a;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.ticket-teams {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.ticket-logo {
    max-width: 60px;
}
.ticket-score {
    font-family: 'fatfrank', sans-serif;
    font-size: 32px;
    color: #9a152a;
}
.ticket-scorer-title {
    font-family: 'effra', sans-serif;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    margin-bottom: 15px;
    color: #1a0b26;
    text-transform: uppercase;
}
.ticket-number {
    background-color: #5a0715;
    color: #fff;
    font-family: 'Anton', sans-serif;
    font-size: 40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 10px auto;
}
.ticket-name {
    font-family: 'fatfrank', sans-serif;
    font-size: 26px;
    color: #5a0715;
    text-align: center;
    border-bottom: 2px dashed #9a152a;
    padding-bottom: 20px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.ticket-delete-btn {
    display: block;
    text-align: center;
    color: #9a152a;
    font-family: 'effra', sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

/* Leaderboard Cards */
.leaderboard-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 10px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    text-decoration: none;
    color: #fff;
}
.leaderboard-card:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.leaderboard-card.is-user {
    border: 2px solid #dcd8a8;
    background: rgba(220, 216, 168, 0.1);
    animation: pulseBorder 2s infinite;
}
@keyframes pulseBorder {
    0% { box-shadow: 0 0 0 0 rgba(220, 216, 168, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(220, 216, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 216, 168, 0); }
}
.leaderboard-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.leaderboard-rank {
    font-family: 'fatfrank', sans-serif;
    font-size: 28px;
    width: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}
.leaderboard-name {
    font-family: 'effra', sans-serif;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.leaderboard-score {
    font-family: 'fatfrank', sans-serif;
    font-size: 28px;
    color: #fff;
}
/* Top 3 Distinct Colors */
.rank-1 .leaderboard-rank {
    color: #dcd8a8;
    text-shadow: 0 0 10px rgba(220, 216, 168, 0.8);
    font-size: 34px;
}
.rank-2 .leaderboard-rank {
    color: #c0c0c0;
    text-shadow: 0 0 10px rgba(192, 192, 192, 0.8);
    font-size: 32px;
}
.rank-3 .leaderboard-rank {
    color: #cd7f32;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.8);
    font-size: 30px;
}
.rank-1 {
    background: linear-gradient(90deg, rgba(220, 216, 168, 0.15) 0%, rgba(0,0,0,0.3) 100%);
    border-left: 4px solid #dcd8a8;
}
.rank-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, rgba(0,0,0,0.3) 100%);
    border-left: 4px solid #c0c0c0;
}
.rank-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, rgba(0,0,0,0.3) 100%);
    border-left: 4px solid #cd7f32;
}

/* Core Structural Resets from original code */
#main-menu {
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    background: rgba(15, 5, 20, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.menu-style {
    overflow-y: auto !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}
.menu-style::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
}

#noUserPopUp, #guessresult {
    display: none;
}

#events {
    display: block;
    position: relative;   /* in normal flow so the feed extends the page instead of being pinned to a fixed slice */
    width: 100%;
    margin-top: 10px;
}

@media only screen and (max-width: 750px) {
    #events {
        width: 95%;
        margin: 10px auto 0;
    }
}

/* Glassmorphism Utility Classes */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 24px;
    margin: 16px auto;
    max-width: 90%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.glass-panel {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

/* Typography Enhancements */
.modern-heading {
    font-family: 'fatfrank', sans-serif;
    text-transform: uppercase;
    color: #dcd8a8; /* Classic gold */
    text-shadow: 0px 2px 10px rgba(0,0,0,0.5);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.modern-subheading {
    font-family: 'Staatliches', cursive;
    color: #ffffff;
    letter-spacing: 2px;
    opacity: 0.9;
}

/* Buttons */
.modern-btn {
    display: inline-block;
    background: linear-gradient(135deg, #dcd8a8, #bba753);
    color: #240b36 !important;
    font-family: 'fatfrank', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 14px 32px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 4px 15px rgba(220, 216, 168, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.modern-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(220, 216, 168, 0.6);
}

.modern-btn.danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}
.modern-btn.danger:hover {
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.6);
}

/* Top Bar Enhancements */
.modern-top-bar {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 100px;
    z-index: 10;
}

.modern-nav-btn, .modern-back-btn {
    position: absolute !important;
    top: 20px !important;
    height: 50px;
    width: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.modern-back-btn {
    left: 20px !important;
}
.modern-nav-btn {
    right: 20px !important;
    left: auto !important; /* override any global styles */
}

.modern-nav-btn:hover, .modern-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.modern-nav-btn img, .modern-back-btn img {
    max-width: 20px;
    position: static !important;
    transform: none !important;
}

.modern-logo {
    position: absolute !important;
    top: 50px !important;
    left: 20px !important;
    height: 70px;
    width: 70px;
}
.modern-logo img {
    height: 70px;
    width: 70px;
    transition: transform 0.3s ease;
}

.modern-logo img:hover {
    transform: scale(1.05);
}

@media only screen and (max-width: 750px) {
    .modern-logo {
        top: 42px !important;
    }
    .modern-logo, .modern-logo img {
        height: 40px;
        width: 40px;
    }
    .modern-nav-btn, .modern-back-btn {
        top: 22px !important;
    }
}

/* Match Data Section */
.match-data-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 500px;
    margin: 20px auto;
}

.teams-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.vs-container {
    flex: 1;
    text-align: center;
}

.match-data-modern img {
    max-width: 150px;
    filter: drop-shadow(0px 8px 16px rgba(0,0,0,0.4));
    transition: transform 0.3s ease;
}

.vs-sign {
    font-family: 'fatfrank', sans-serif;
    font-size: 60px;
    color: rgba(255, 255, 255, 0.8);
    transform: rotate(-10deg);
    line-height: 1;
    display: inline-block;
}

.match-data-modern img:hover {
    transform: scale(1.1);
}

.match-data-modern .score-container {
    text-align: center;
}

.match-data-modern .score {
    font-family: 'Staatliches', cursive;
    font-size: 56px;
    color: #ffffff;
    text-shadow: 0px 4px 15px rgba(0,0,0,0.5);
    line-height: 1;
}

.match-data-modern .minute {
    color: #dcd8a8;
    font-size: 16px;
    font-family: 'Staatliches', cursive;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Match Guess Section */
.match-guess-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 20px auto;
    gap: 10px;
}

.match-guess-modern img {
    max-width: 130px;
    filter: drop-shadow(0px 8px 16px rgba(0,0,0,0.4));
    transition: transform 0.3s ease;
}

.match-guess-modern img:hover {
    transform: scale(1.1);
}

.match-guess-modern .score-dial {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #dcd8a8, #bba753);
    border: none;
    border-radius: 12px;
    color: #240b36;
    font-family: 'fatfrank', sans-serif;
    font-size: 40px;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(220, 216, 168, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.match-guess-modern .score-dial:focus {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(220, 216, 168, 0.8);
    outline: none;
}

.match-guess-modern .hyphen {
    font-family: 'fatfrank', sans-serif;
    font-size: 40px;
    color: #dcd8a8;
    animation: pulse 2s infinite;
}

/* Custom Dropdown Wrapper */
.custom-select-wrapper {
    position: relative;
    max-width: 400px;
    margin: 10px auto 30px auto;
}
.custom-select-wrapper::after {
    content: '▼';
    font-size: 14px;
    color: #dcd8a8;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.custom-select {
    width: 100%;
    padding: 18px 24px;
    background: rgba(154, 21, 42, 0.6);
    border: 1px solid #dcd8a8;
    border-radius: 50px;
    color: #fff;
    font-family: 'effra', sans-serif;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0 0 15px rgba(220, 216, 168, 0.3);
    transition: all 0.3s ease;
}

.custom-select:focus {
    background: rgba(154, 21, 42, 0.8);
    box-shadow: 0 0 25px rgba(220, 216, 168, 0.6);
    outline: none;
}
.custom-select option {
    background: #240b36;
    color: #fff;
    font-weight: normal;
}

.custom-textarea {
    width: 100%;
    height: 120px;
    padding: 18px 24px;
    background: rgba(154, 21, 42, 0.6);
    border: 1px solid #dcd8a8;
    border-radius: 20px;
    color: #fff;
    font-family: 'effra', sans-serif;
    font-size: 16px;
    resize: none;
    box-shadow: 0 0 15px rgba(220, 216, 168, 0.3);
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.custom-textarea:focus {
    background: rgba(154, 21, 42, 0.8);
    box-shadow: 0 0 25px rgba(220, 216, 168, 0.6);
    outline: none;
}

/* Guess Submit Button */
.guess-submit-btn {
    width: 100%;
    padding: 20px;
    font-family: 'fatfrank', sans-serif;
    font-size: 24px;
    border-radius: 50px;
    border: none;
    text-transform: uppercase;
    background: linear-gradient(135deg, #dcd8a8, #bba753) !important;
    color: #1a0b26 !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 0 20px rgba(220, 216, 168, 0.4);
    transition: all 0.3s ease;
}
.guess-submit-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.guess-submit-btn.active {
    opacity: 1;
    cursor: pointer;
    animation: pulse 2s infinite;
}
.guess-submit-btn.active:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(220, 216, 168, 0.8);
}

/* Pulse Animation for Live Match */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Forms & Inputs */
.modern-input {
    width: 100%;
    padding: 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff;
    font-family: 'effra', sans-serif;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin-top: 10px;
    margin-bottom: 20px;
}

.modern-input:focus {
    background: rgba(255,255,255,0.15);
    border-color: #dcd8a8;
    box-shadow: 0 0 10px rgba(220, 216, 168, 0.3);
}

.modern-input option {
    background: #240b36;
    color: #fff;
}

/* Grades specific */
.grade-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: 'fatfrank', sans-serif;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    color: #fff;
}
.grade-bad { background: linear-gradient(135deg, #f03434, #cf000f); }
.grade-medium { background: linear-gradient(135deg, #f9bf3b, #e67e22); }
.grade-good { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.grade-great { background: linear-gradient(135deg, #1e824c, #006442); }

/* Custom Range Slider */
.modern-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    padding: 0;
    margin: 10px 0;
}
.modern-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dcd8a8;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transition: transform 0.2s ease;
}
.modern-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Table Standings Modern */
.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.modern-table th {
    font-family: 'fatfrank', sans-serif;
    text-transform: uppercase;
    color: #dcd8a8;
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.modern-table td {
    padding: 16px 12px;
    background: rgba(255,255,255,0.05);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.3s ease;
}
.modern-table tr td:first-child {
    border-left: 1px solid rgba(255,255,255,0.05);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.modern-table tr td:last-child {
    border-right: 1px solid rgba(255,255,255,0.05);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.modern-table tr:hover td {
    background: rgba(255,255,255,0.1);
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .match-data-modern img { max-width: 80px; }
    .match-data-modern .score { font-size: 40px; }
    .vs-sign { font-size: 32px; }
    .modern-heading { font-size: 32px !important; }
    .countdown-val { font-size: 24px !important; }
    .countdown-box { min-width: 45px !important; padding: 6px !important; gap: 5px !important; }
}

/* No User Popup Modernization */
#noUserPopUp {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 5, 20, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 9999 !important;
}

#popUpJoin {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    padding: 30px !important;
    width: 90% !important;
    max-width: 400px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
}

#headline-pop {
    font-family: 'fatfrank', sans-serif !important;
    color: #dcd8a8 !important;
    font-size: 26px !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

#popUpJoin input[type="submit"] {
    width: 100% !important;
    padding: 15px !important;
    border-radius: 50px !important;
    font-family: 'fatfrank', sans-serif !important;
    font-size: 20px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: #240b36 !important;
    background: linear-gradient(135deg, #dcd8a8, #bba753) !important;
    box-shadow: 0 4px 15px rgba(220, 216, 168, 0.4) !important;
    margin-top: 10px !important;
}

#popUpJoin input[type="submit"]:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(220, 216, 168, 0.6) !important;
}

/* Specific styling for the second button (Log Ind) */
#popUpJoin form:nth-of-type(2) input[type="submit"] {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
#popUpJoin form:nth-of-type(2) input[type="submit"]:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Close button (X) */
#popUpJoin div[onClick="hidePop();"] {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin-top: 20px !important;
    transition: all 0.3s ease !important;
}
#popUpJoin div[onClick="hidePop();"]:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
}

/* --- LEGACY CONTAINER & DASHBOARD MODERNIZATION --- */

.main-container, .other-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    margin: auto;
    max-width: 700px;
    margin-bottom: 30px;
}

.box {
    background: transparent; /* If inside main-container */
}
/* If .box is standalone, we still give it glass properties if it's not nested */
body > .box, .dash-grid .box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.box .padding, .main-container .padding, .other-container .padding {
    padding: 24px;
}

/* Dashboard Grid */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 15px;
}
.dash-grid .box {
    position: relative;
    font-size: 14px;
    padding: 15px;
    transition: transform 0.3s ease;
}
.dash-grid .box:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
}
.dash-grid .box .info {
    position: absolute;
    top: 10px;
    right: 10px;
}
.dash-grid .box .info img {
    max-width: 20px;
}
.dash-grid .box h1 {
    font-family: 'fatfrank', sans-serif;
    font-weight: 400;
    font-size: 36px;
    margin: 10px 0;
    color: #fff;
}
.dash-grid .box h2 {
    font-family: 'fatfrank', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #dcd8a8;
    margin: 0;
}
.gold {
    color: #dcd8a8;
}

/* Status Bar */
#statusBarBackground {
    position: relative;
    height: 30px;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}
#statusBarFill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, #bba753, #dcd8a8);
    box-shadow: 0 0 10px rgba(220, 216, 168, 0.5);
    border-radius: 30px;
    transition: 1s ease-in-out;
}

/* Buttons */
.small-button {
    display: inline-block;
    color: #dcd8a8;
    font-family: 'effra', sans-serif;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.small-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    color: #fff;
}
.small-button .padding {
    padding: 8px 20px;
    text-transform: none;
}

.standing-button {
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}
.standing-button:hover {
    background-color: rgba(255,255,255,0.2);
}
.standing-button .padd {
    padding: 8px 16px;
}
.onButton {
    background: linear-gradient(135deg, #dcd8a8, #bba753) !important;
    color: #240b36 !important;
    border: none;
    font-weight: bold;
}

/* Countdown Timer */
.countdown-grid {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.countdown-box {
    background: rgba(154, 21, 42, 0.8);
    border: 1px solid rgba(220, 216, 168, 0.4);
    border-radius: 12px;
    padding: 10px 8px;
    min-width: 60px;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.3);
}
.countdown-val {
    font-family: 'Staatliches', cursive;
    font-size: 36px;
    color: #dcd8a8; /* Gold color */
    line-height: 1;
    margin-bottom: 6px;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.5);
}
.countdown-label {
    font-family: 'effra', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Gamified Rules Timeline */
.rules-timeline-container {
    position: relative;
    max-width: 600px;
    margin: 40px auto;
    padding-left: 60px; /* Room for the hexagon */
}

.timeline-line {
    position: absolute;
    left: 30px; /* Center of the padding */
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #dcd8a8 0%, rgba(220, 216, 168, 0.1) 100%);
    border-radius: 2px;
    transform: translateX(-2px);
    z-index: 1;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
}

.timeline-hexagon {
    position: absolute;
    left: -60px; /* Moves it back into the padding exactly */
    width: 60px;
    height: 70px;
    background: linear-gradient(135deg, #dcd8a8, #bba753);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform 0.3s ease;
}

.timeline-item:hover .timeline-hexagon {
    transform: scale(1.1);
}

.timeline-hexagon-inner {
    position: absolute;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    background: radial-gradient(circle at top right, #9a152a, #240b36);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
}

.timeline-hexagon-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.hex-points {
    font-family: 'fatfrank', sans-serif;
    font-size: 32px;
    color: #dcd8a8;
    line-height: 1;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    margin-top: 4px;
}

.hex-p {
    font-family: 'fatfrank', sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 1;
    margin-top: -2px;
}

.timeline-panel {
    background: rgba(15, 5, 20, 0.6);
    border: 1px solid rgba(220, 216, 168, 0.1);
    border-radius: 12px;
    padding: 20px 24px;
    margin-left: 20px; /* Space between hex and panel */
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.timeline-item:hover .timeline-panel {
    background: rgba(154, 21, 42, 0.4);
    border-color: rgba(220, 216, 168, 0.4);
    transform: translateX(5px);
}

.timeline-title {
    font-family: 'Staatliches', cursive;
    font-size: 26px;
    color: #fff;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.timeline-subtitle {
    font-family: 'effra', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
}

.rules-section-title {
    font-family: 'Staatliches', cursive;
    font-size: 28px;
    color: #dcd8a8;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 40px;
    letter-spacing: 2px;
    text-align: left;
}

/* =========================================================
   Matchday Dashboard Modern UI
   ========================================================= */

.matchday-modern .dash-card {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    color: #fff;
    margin-bottom: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.matchday-modern .dash-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.7);
}

.matchday-modern .dash-padding {
    padding: 30px;
}

/* Dashboard Grid for Stats */
.matchday-modern .dash-grid-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}
@media (max-width: 768px) {
    .matchday-modern .dash-grid-modern {
        grid-template-columns: 1fr;
    }
}

/* Profile Header */
.matchday-modern .dash-profile {
    display: flex;
    align-items: center;
    gap: 25px;
    text-transform: none;
}
.matchday-modern .dash-profile-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dcd8a8;
    box-shadow: 0 0 15px rgba(220, 216, 168, 0.4);
}
.matchday-modern .dash-profile-info {
    text-align: left;
}
.matchday-modern .dash-profile-info h3 {
    margin: 0 0 5px 0;
    padding: 0;
    line-height: 1;
    font-family: 'fatfrank', sans-serif;
    font-size: 28px;
    color: #fff;
    letter-spacing: 1px;
}
.matchday-modern .dash-profile-info .department {
    color: #30bf7a;
    font-family: 'effra', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

/* Dashboard Gold Text */
.matchday-modern .dash-gold {
    background: linear-gradient(135deg, #dcd8a8, #bba753);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #dcd8a8;
    font-family: 'fatfrank', sans-serif;
    text-transform: uppercase;
}

/* Stat Box specific */
.matchday-modern .stat-value {
    font-size: 60px;
    line-height: 1;
    margin: 0 0 10px 0;
    text-shadow: 0 4px 15px rgba(220, 216, 168, 0.3);
}
.matchday-modern .stat-label {
    font-family: 'effra', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Progress Bar Overhaul */
.matchday-modern .dash-progress-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    height: 14px;
    width: 100%;
    overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
    margin-top: 15px;
}
.matchday-modern .dash-progress-fill {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #1e824c, #30bf7a);
    box-shadow: 0 0 15px rgba(48, 191, 122, 0.6);
    transition: width 1s ease-out;
}

/* Status Text */
.matchday-modern .status-label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1px;
}
.matchday-modern .status-value {
    font-size: 18px;
    margin-top: 5px;
}

/* Tooltip Redesign */
.matchday-modern .dash-info-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: 0.5;
    transition: opacity 0.2s;
    cursor: help;
}
.matchday-modern .dash-info-icon:hover {
    opacity: 1;
}

/* Medals Flex Layout */
.matchday-modern .dash-medals {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.matchday-modern .dash-medal-item {
    text-align: center;
    width: 100px;
    transition: transform 0.3s;
}
.matchday-modern .dash-medal-item:hover {
    transform: scale(1.1);
}
.matchday-modern .dash-medal-item img {
    max-width: 90px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
}
.matchday-modern .dash-medal-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin-top: 10px;
    line-height: 1.3;
}

/* Glass Trophy Cabinet */
.matchday-modern .glass-cabinet {
    background: rgba(15, 15, 15, 0.6);
    border: 2px solid rgba(255,255,255,0.05);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.5);
}
.matchday-modern .glass-shelf {
    background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 15%, transparent 100%);
    height: 40px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 -10px 20px rgba(220, 216, 168, 0.1);
}

/* Dash Tabs for Standings */
.matchday-modern .dash-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 30px;
    padding: 5px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}
.matchday-modern .dash-tab {
    flex: 1;
    text-align: center;
    padding: 10px 15px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: 0.3s;
    text-transform: uppercase;
}
.matchday-modern .dash-tab:hover {
    color: #fff;
}
.matchday-modern .dash-tab.active {
    background: linear-gradient(135deg, #dcd8a8 0%, #bca46a 100%);
    color: #1a1a1a;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(188, 164, 106, 0.4);
}

/* Modern Tables */
.matchday-modern .modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin-top: 20px;
}
.matchday-modern .modern-table tr {
    background: rgba(0, 0, 0, 0.2);
    transition: 0.2s;
}
.matchday-modern .modern-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.02);
}
.matchday-modern .modern-table tr.highlighted-row {
    background: linear-gradient(90deg, rgba(188, 164, 106, 0.3) 0%, rgba(188, 164, 106, 0.1) 100%);
    border-left: 3px solid #dcd8a8;
}
.matchday-modern .modern-table td {
    padding: 15px 20px;
}
.matchday-modern .modern-table td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.matchday-modern .modern-table td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.matchday-modern .table-points {
    color: #dcd8a8;
    font-weight: bold;
}


/* Modern Inputs */
.matchday-modern input[type="text"], .matchday-modern input[type="password"] {
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    padding: 15px !important;
    border-radius: 8px !important;
    width: 100% !important;
    max-width: 400px !important;
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 16px !important;
    transition: 0.3s !important;
    box-sizing: border-box !important;
}
.matchday-modern input[type="text"]:focus, .matchday-modern input[type="password"]:focus {
    border-color: #dcd8a8 !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(220, 216, 168, 0.2) !important;
}