/* Reset and Base Styles */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #101f31;
    background: linear-gradient(117deg, #fff0c7 0%, #fffad7 100%);
    overflow: auto;
}

/* Main Container */
.main-container {
    text-align: center;
    max-width: 500px;
    padding: 40px;
    margin: 0 auto;
}

/* Titles and Headings */
.titleIndex {
    font-family: 'Bungee', cursive;
    font-size: 5rem;
    font-weight: normal;
    color: #101f31;
    margin-bottom: 2rem;
    margin-top: 0px;
    text-shadow: 2px 2px 4px rgba(16, 31, 49, 0.2);
    line-height: 1.1;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between logo and title */
}

/* Adjust title for tighter alignment with logo */
.title {
    font-size: 1.5em;
    font-family: 'Bungee', cursive;
    /* font-weight: bold; */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    color: #ffe7a2;
    text-decoration: none;
    margin: 0; /* Remove default margin for tighter alignment */
}

/* Style for the yellow SVG logo */
#logoYellow {
    width: 30px; /* Adjust size as needed */
    height: auto;
}

.subtitle {
    font-size: 1.2rem;
    color: #4a6b8a;
    margin-top: 1rem;
    font-weight: 300;
}

/* Menu Options */
.menu-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 3rem;
}

.menu-option {
    font-family: 'Bungee', cursive;
    font-size: 1.8rem;
    color: #112d4f;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 15px;
    transition: all 0.3s ease;
    background: rgba(93, 118, 133, 0.2);
    border: 2px solid transparent;
}

.menu-option:hover {
    background: rgba(93, 118, 133, 0.4);
    border-color: #101f31;
    color: #101f31;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(93, 133, 120, 0.2);
}

.menu-option:active {
    transform: translateY(0);
}

/* Game Container */
.game-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(117deg, #fff0c7 0%, #fffad7 100%);
}

/* Header */
.header {
    background: #101f31;
    padding: 4px 10px;
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    flex-wrap: wrap;
    /* max-width: 1200px; */
}

/* Controls */
.controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    color: #fffad7;
}

.toggle-group {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 250, 215, 0.2);
    padding: 6px 10px;
    border-radius: 15px;
    font-size: 0.85em;
    font-family: 'Jockey One', sans-serif;
    border: 1px solid #d3a213;
}

.toggle-switch {
    position: relative;
    width: 36px;
    height: 18px;
    background: #101f31;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-switch.active {
    background: #e1be10;
}

.toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fffad7;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active .toggle-slider {
    transform: translateX(18px);
}

/* Game Area */
.game-area {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 60vh;
}

.map-container {
    flex: 1;
    margin: 0.5% 20% 0% 20%;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    background: #fffad7;
    outline: 2px groove #101f31;
    /* border-radius: 22px; */
}

.map-buttons {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: row;
    gap: 0;
    z-index: 10000;
}

.map-btn {
    width: 40px;
    height: 40px;
    background: #101f31;
    border: 1px solid rgba(255, 250, 215, 0.2);
    border-right: none;
    color: #fffad7;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

.map-btn:last-child {
    border-right: 1px solid rgba(255, 250, 215, 0.2);
}

.map-btn:hover:not(:disabled) {
    background: #2c3e50;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.map-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    display: none;
}

.map-btn#modeToggleBtn {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.map-btn#modeToggleBtn.active {
    opacity: 0.9;
    outline: 1px auto #ffab42;
    z-index: 5;
}

.map-btn#rerollBtn {
    font-family: 'Bungee', cursive;
    background: #101f31;
    color: #fffad7;
    opacity: 1;
    width: auto;
    outline: 2px solid #101f31;
    padding: 8px 16px; /* Consistent padding */
    border-radius: 8px;
    flex-shrink: 0; /* Prevent button from shrinking too much */
    text-align: center;
    animation: fadeIn 0.2s ease-in;
}

.map-btn#rerollBtn:hover {
    background: linear-gradient(117deg, #fff0c7 0%, #fffad7 100%);
    color: #101f31;
    transform: translateY(-1px);
}

.map-btn#rerollBtn:active {
    transform: translateY(0);
}

/* Controls Container */
.controls-container {
    margin: 0 auto;
    max-width: 1000px;
    width: 90%;
    padding: 15px;
    background: #101f31;
    border-radius: 12px;
    margin-top: 1%;
    animation: fadeIn 0.2s ease-in;
    border: 2px solid #4a6b8a;
    color: #fffad7;
    display: none;
}
.controls-container h2 {
    font-family: 'Bungee', cursive;
    margin-bottom: 0px;
    text-align: center;
    color: #ffdd7c;
}

.game-info {
    background: rgba(255, 250, 215, 0.1);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    text-align: center;
    border: 2px solid #d3a213;
}

.score {
    font-size: 2em;
    font-weight: bold;
    color: #ffdd7c;
    margin-bottom: 6px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.16);
}

.country-name {
    font-size: 1.2rem;
    min-height: 1.5em;
    /* color: #fffad7; */
    font-family: 'Jockey One', sans-serif;
    /* display: none; */
}
#countryName {
    font-size: 1.8rem;
    min-height: 1.5em;
    /* color: #fffad7; */
    font-family: 'Jockey One', sans-serif;
    display: none;
}
.capital-info {
    font-size: 0.85em;
    color: rgba(255, 250, 215, 0.8);
    margin-top: 6px;
}

.metadata-info {
    font-size: 0.85em;
    color: rgba(255, 250, 215, 0.9);
    margin-top: 8px;
    line-height: 1.5;
    display: none;
}

.metadata-info div {
    margin-bottom: 4px;
}

.quiz-inputs {
    /* margin-top: 12px; */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-inputs label {
    font-size: 1.1em;
    color: #fffad7;
    text-align: left;
    font-family: 'Jockey One', sans-serif;
}

.quiz-input {
    background: rgba(255, 250, 215, 0.15);
    border: none;
    border-radius: 8px;
    padding: 5px;
    color: #fffad7;
    font-size: 0.85em;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2500;
    font-family: 'Jockey One', sans-serif;
    font-size: 1.3rem;
}

.quiz-input::placeholder {
    color: rgba(255, 250, 215, 0.6);
}

.quiz-input:focus {
    outline: none;
    background: rgba(255, 250, 215, 0.25);
}

.quiz-feedback {
    font-size: 0.8em;
    color: #ffdd7c;
    text-align: left;
    min-height: 1.2em;
    font-family: 'Jockey One', sans-serif;
}

.autocomplete-list {
    position: absolute;
    background: rgba(255, 250, 215, 0.2);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 3000;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-family: 'Jockey One', sans-serif;
    font-size: 1.1rem;
    display: none;
}

.autocomplete-list.active {
    display: block;
}

.autocomplete-item {
    padding: 8px 10px;
    margin: 0;
    cursor: pointer;
    font-size: 1em;
    color: #fffad7;
    transition: background 0.2s ease;
    list-style: none;
    text-align: left;
}

.autocomplete-item:hover {
    background: rgba(255, 250, 215, 0.3);
}

.no-results {
    padding: 8px;
    font-size: 0.85em;
    color: rgba(255, 250, 215, 0.6);
    text-align: center;
}

.input-wrapper {
    position: relative;
    width: 100%;
}

/* Drawing Tools */
.drawing-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.btn {
    background: #2c3e50;
    border: none;
    color: #fffad7;
    padding: 12px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    touch-action: manipulation;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn.primary {
    font-family: 'Bungee', cursive;
    /* width: 30%; */
    margin: 1% auto 2% auto;
    font-size: 1.8rem;
    color: #101f31;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 15px;
    background: #fffad7;
    border: 2px solid #101f31;
    box-shadow: 0 5px 15px rgba(133, 126, 93, 0.4);
    display: block;
    text-align: center;
    position: relative;
}

.btn.primary:hover {
    background: #2c3e50;
    color: #fffad7;
    transform: translateY(-4px);
}

.btn.active {
    background: linear-gradient(45deg, #2ecc71, #9ACD32);
}

#submitBtn {
    font-family: 'Bungee', cursive;
    width: 30%;
    margin: 1% auto 2% auto;
    font-size: 2.5rem;
    color: #fffad7;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 15px;
    background: #101f31;
    border: 2px solid #101f31;
    box-shadow: 0 5px 15px rgba(133, 126, 93, 0.4);
    display: block;
    text-align: center;
    position: relative;
    animation: fadeIn 0.2s ease-in;
}

#submitBtn:hover {
    background: linear-gradient(117deg, #fff0c7 0%, #fffad7 100%);
    color: #101f31;
    transform: translateY(-4px);
}

#submitBtn:active {
    transform: translateY(-0px);
}

#newGameBtn{
    color: #101f31;
    background: linear-gradient(117deg, #fcebbd 0%, #fffad7 100%);
    font-size: 2.5rem;
    animation: fadeIn 0.2s ease-in;
}

#newGameBtn:hover{
    color: #fffad7;
    background: #101f31;
    transform: translateY(-4px);
}
#newGameBtn:active{
    transform: translateY(-0px);
}
#drawing-container {
    background: #101f31;
    min-height: 44px;
    font-size: 1em;
    line-height: 1.4;
    outline: 2px groove #101f31;
    font-family: 'Jockey One', sans-serif;
    color: #fffad7;
    margin: auto;
    display: flex; /* Use Flexbox for layout */
    justify-content: space-between; /* Space feedback and reroll button apart */
    align-items: flex-end; /* Align items to the bottom */
    flex-wrap: wrap; /* Allow wrapping to prevent overlap */
    padding: 5px; /* Add padding for spacing */
    gap: 10px; /* Space between feedback and button */
    position: sticky;
    border: 2px solid #fffad7;
    z-index: 5000;
}

.drawing-status {
    font-size: 1.2em;
    flex: 1; /* Allow feedback to take available space */
    min-width: 0; /* Prevent overflow issues */
    text-align: left; /* Align text to the left */
    white-space: normal; /* Allow text to wrap naturally */
}

.instructions {
    background: #101f31;
    padding: 12px;
    font-size: 0.8em;
    line-height: 1.4;
    margin-bottom: 1%;
    margin-left: 20%;
    margin-right: 20%;
    outline: 4px groove #101f31;
    color: #fffad7;
    border-radius: 10px;
}

.accuracy-meter {
    background: rgba(255, 250, 215, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: none;
    width: 100%;
}

.accuracy-bar {
    width: 100%;
    height: 16px;
    background: rgba(255, 250, 215, 0.2);
    border-radius: 8px;
    overflow: hidden;
    margin: 6px 0;
}

.accuracy-fill {
    height: 100%;
    background: linear-gradient(90deg, #e74c3c, #ffdd7c, #2ecc71);
    width: 0%;
    transition: width 0.8s ease;
}

#drawingCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    pointer-events: auto;
}

.drawing-canvas.draw {
    cursor: crosshair;
}

.drawing-canvas.move {
    cursor: default;
    pointer-events: none;
}
.drawing-canvas.move:active {
    cursor: grabbing; /* Show grabbing cursor when actively panning */
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.pulsing {
    animation: pulse 2s infinite;
}

@keyframes ping {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

.capital-ping {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 30px;
    height: 30px;
    border: 2px solid #e74c3c;
    border-radius: 50%;
    animation: ping 2s infinite;
    z-index: 3000 !important;
}

/* Sorting Game */
.sorting-game {
    background: #101f31;
    font-family: 'Bungee', cursive;
    padding: 20px;
    border-radius: 8px;
    margin: 20px auto;
    width: 50%;
    transition: max-height 0.3s ease;
    border: 2px solid #4a6b8a;
    display: none;
    color: #fffad7;
}

.sorting-game h2, .sorting-game h3 {
    font-family: 'Bungee', cursive;
    text-align: center;
    color: #ffdd7c;
    margin: 5px;
    font-size: 1.4rem;
}

.sorting-game p, .sorting-game p2 {
    font-family: 'Jockey One', sans-serif;
    font-size: 1.3rem;
    text-align: center;
    /* margin-bottom: 10px; */
    color: #fffad7;
    display: block;
}

.sorting-category {
    margin-bottom: 20px;
    /* outline: 4px auto #fffad7; */
    border: 2px solid #d3a213;
    padding: 5px;
    background: rgba(255, 250, 215, 0.1);
    border-radius: 8px;
}

.sorting-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px;
    background: #101e2d;
    border-radius: 5px;
}

.draggable-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 70px;
    margin-bottom: 10px;
    border-radius: 5px;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
}

.draggable-container.hidden {
    max-height: 0px;
    opacity: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.sortable-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #16222d;
    color: #fffad7;
    border-radius: 5px;
    cursor: grab;
    user-select: none;
    flex: 1;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Jockey One', sans-serif;
    font-size: 1.3rem;
    min-height: 60px;
}

.sortable-item.fixed {
    background: #1a2a39;
    cursor: auto;
}

.sortable-item.highlight {
    background: #e3b221;
    max-width: 200px;
    cursor: grab;
    /* color: #101f31; */
    /* text-shadow: #fffad7 1px 0; */
}
.sortable-item.highlight:active {
    background: rgb(235, 183, 28);
}
.sortable-ghost {
    opacity: 0.5;
    background: #e74c3c;
}

#sortingFeedback {
    margin-top: 10px;
    font-weight: bold;
    color: #fffad7;
    font-family: 'Jockey One', sans-serif;
    text-align: center;
}

.sortable-item.correct {
    background: #2ecc71;
}

.sortable-item.incorrect {
    background: #e74c3c;
}

.sortable-item .country-name.incorrect-underline {
    text-decoration: underline;
    text-decoration-color: #fffad7;
    text-decoration-thickness: 2px;
    text-shadow: none;
    color: #fffad7;
}

.sorting-labels {
    display: flex;
    justify-content: space-between;
    margin: 2px;
    font-size: 0.8rem;
    color: #fffad7;
    font-family: 'Jockey One', sans-serif;
}

.sorting-label-left {
    text-align: left;
}

.sorting-label-right {
    text-align: right;
}

.correct-sort-container {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.sortable-item.correct-answer {
    color: #fffad7;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: default;
    flex: 1;
    text-align: center;
    outline: 1px groove #fffad7;
    background: #1f303f;
}

.sortable-item.correct-answer.mystery-country {
    background: #e68b22;
}

.value {
    font-size: 1rem;
    color: #fffad7;
    text-shadow: none;
}

/* Flag Grid */
.flag-grid-container {
    position: relative;
    padding: 16px 20px 12px;
    background: #101f31;
    border-top: 3px solid #ffdd7c;
}

.flag-grid-header {
    display: flex;
    justify-content: center;     /* keeps title centered */
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;             /* mobile safety */
    margin-bottom: 12px;
    position: relative;
}

.flag-grid-container h2 {
    margin: 10px;
    font-family: 'Bungee', cursive;
    font-size: 1.55rem;
    color: #ffdd7c;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    white-space: nowrap;
    flex: 0 1 auto;
}

/* Buttons stick to the RIGHT edge */
.flag-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.flag-btn {
    background: #2c3e50;
    border: none;
    color: #fffad7;
    padding: 8px 16px;
    /* border-radius: 20px; */
    cursor: pointer;
    font-family: 'Jockey One', sans-serif;
    font-size: 1em;
    /* font-weight: bold; */
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.flag-btn:hover {
    background: #223852;
}

.flag-tabs {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* background: rgba(255, 250, 215, 0.2);  */
    border-radius: 10px;
    overflow: hidden;
}
.flag-grid-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: center;
}

.flag-tab {
    flex: 1; /* Each tab takes equal width */
    padding: 7px;
    text-align: center;
    font-family: 'Jockey One', sans-serif;
    font-size: 1rem;
    color: #fffad7;
    background: rgba(255, 250, 215, 0.2); 
    cursor: pointer;
    transition: background 0.3s ease;
    outline: none; /* Remove outline to clean up appearance */
    border: none;
}


.flag-tab:hover {
    background: rgba(255, 250, 215, 0.3);
}

.flag-tab.active {
    background: #ffdd7c;
    color: #101f31;
    /* text-shadow: #fffad7 1px 0; */
}

.flag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    /* max-height: 200px; */
    overflow-y: auto;
    transition: max-height 0.3s ease, grid-template-columns 0.3s ease;
    animation: fadeIn 0.3s ease-in;
    padding: 3px;
}

.flag-grid.collapsed {
    max-height: 0;
    overflow: hidden;
    animation: fadeOut 0.3s ease-in;
    padding: 0px;
}

.flag-grid.expanded {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    /* max-height: 400px; */
}

.flag-grid.expanded .flag-item {
    border: 3px solid transparent;
}

.flag-grid.expanded .flag-item img {
    height: 60px;
}

.flag-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease-out;
    overflow: hidden;
    animation: fadeIn 0.2s ease-out;
}

.flag-item img {
    width: 100%;
    height: 40px;
    object-fit: cover;
    display: block;
    transition: all 0.3s ease-out;
}

.flag-item:hover {
    transform: scale(1.05);
}

.flag-item.selected {
    border-color: #fffad7;
}

.flag-grid.post-submit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}

.flag-grid.post-submit .flag-item {
    position: relative;
    /* width: auto; */
    max-width: 200px;
    border: 2px solid #FF6B6B;
}

.flag-grid.post-submit .flag-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flag-grid.post-submit .flag-item.correct-flag {
    box-shadow: 0 0 1px 2px rgba(46, 204, 113, 0.8);
    border: 2px solid rgba(46, 204, 113, 0.8);
    margin-top: 2px;
}

.flag-grid.post-submit .flag-item.incorrect-flag {
    box-shadow: 0 0 1px 2px rgba(231, 76, 60, 0.8);
    border: 2px solid #FF6B6B;
    /* margin-top: 2px; */
    align-items: center;
}

.user-selection-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.you-selected-text {
    font-size: 14px;
    font-weight: 500;
    color: #FF6B6B;
    white-space: nowrap;
    font-family: 'Jockey One', sans-serif;
}

.user-selected-flag {
    position: relative;
    width: 60px;
    height: 40px;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #FF6B6B;
}

.user-selected-flag img, .correct-flag img, .incorrect-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    overflow: hidden;
}

.flag-grid.expanded .flag-item.selected {
    border-color: #fffad7;
    transform: scale(1.05);
}

.flag-controls {
    display: flex;
    gap: 8px;
    order: 3;
}

.flag-grid.post-submit .flag-controls,
.flag-grid.post-submit .flag-tabs {
    display: none;
}
#flagFeedback{
    font-family: 'Jockey One', sans-serif;
}

.update-container {
    margin-top: 1%;
    margin-bottom: 2%;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(16, 31, 49, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 20px; */
}

.modal-header h2 {
    color: #ffdd7c;
    font-family: 'Bungee', cursive;
    margin: 0;
    font-size: 1.8em;
}

.modal-close {
    background: none;
    border: none;
    color: #fffad7;
    font-size: 2em;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
}

.modal-close:hover {
    color: #e74c3c;
    transform: rotate(90deg);
}

.modal-body {
    font-size: 0.9em;
}

.settings-section {
    margin-bottom: 5px;
}

.settings-section h3 {
    color: #ffdd7c;
    font-family: 'Jockey One', sans-serif;
    margin: 5px;
    font-size: 1.2em;
}

.setting-item {
    margin-bottom: 15px;
}

.setting-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.setting-checkbox input {
    display: none;
}

.setting-checkbox .checkmark {
    width: 24px;
    height: 24px;
    background: rgba(255, 250, 215, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    transition: background 0.3s, transform 0.3s;
}

.setting-checkbox input:checked + .checkmark {
    background: #ffe97c;
    transform: scale(1.1);
}

.setting-checkbox span:not(.checkmark) {
    font-size: 1em;
    color: #fffad7;
}

.setting-item p {
    margin: 5px 0 0 34px;
    font-size: 0.85em;
    color: rgba(255, 250, 215, 0.7);
}

.setting-item label {
    margin-bottom: 5px;
    color: #fffad7;
    font-size: 0.9em;
}

.range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 250, 215, 0.2);
    border-radius: 3px;
    outline: none;
    margin-top: 10px;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #ffdd7c;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s;
}

.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #2ecc71;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.quick-mode-btn {
    background: rgba(255, 250, 215, 0.1);
    border: none;
    color: #fffad7;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.4em;
    font-family: 'Jockey One', sans-serif;
}

.quick-mode-btn.active { background-color: #c39b28; }

.quick-mode-btn:hover {
    background: #dfb32e;
    transform: translateY(-2px);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.btn.secondary {
    background: rgba(255, 250, 215, 0.1);
    color: #fffad7;
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid #4a6b8a;
}

.btn.secondary:hover {
    background: rgba(255, 250, 215, 0.2);
}

.btn.primary#startCustomGame {
    padding: 10px 20px;
    font-size: 1em;
    width: auto;
    margin: 0;
}

/* Number Guessing Game */
#number-game {
    background: #101f31;
    border-radius: 12px;
    padding: 20px;
    margin: 20px auto;
    max-width: 1000px;
    width: 90%;
    display: none;
    outline: 4px groove #101f31;
    font-family: 'Jockey One', sans-serif;
    color: #fffad7;
    border: 2px solid #4a6b8a;
}

#numberGameContainer {
    background: rgba(255, 250, 215, 0.1);
    border-radius: 8px;
    padding: 15px;
}

#number-game h2 {
    font-family: 'Bungee', cursive;
    text-align: center;
    color: #ffdd7c;
    margin: 5px;
    font-size: 1.4rem;
}

#number-game p2 {
    text-align: center;
    display: block; /* Ensure p2 behaves as a block for centering */
    font-size: 1.3rem;
    line-height: 1.4;
}

.number-guessing-category {
    margin-bottom: 25px;
    padding: 10px;
    border-radius: 8px;
    /* background: rgba(255, 250, 215, 0.15); */
    transition: all 0.3s ease;
    border: 2px solid #d3a213;
}

/* .number-guessing-category:hover {
    background: rgba(255, 250, 215, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
} */

.number-guessing-category h3 {
    margin: 0 0 15px 0;
    font-size: 1.4rem;
    font-family: 'Bungee', cursive;
    color: #ffdd7c;
    text-align: center;
}

.number-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.number-input {
    background: rgba(255, 250, 215, 0.15);
    border: none;
    border-radius: 8px;
    padding: 4px;
    color: #fffad7;
    font-family: 'Jockey One', sans-serif;
    font-size: 1.3em;
    /* width: 80%; */
    box-sizing: border-box;
    position: relative;
    z-index: 2500;
    margin: 0 auto; /* Center the input horizontally */
    display: block; /* Ensure it behaves as a block element for margin auto */
    text-align: center;
}

.number-input::placeholder {
    color: #fffad79c;
}

.number-input:focus {
    outline: none;
    background: rgba(255, 250, 215, 0.25);
    border: none; 
}

.number-input::placeholder {
    color: rgba(255, 250, 215, 0.6);
}


.number-input:disabled {
    background: rgba(255, 250, 215, 0.1);
    /* opacity: 0.7; */
    border: 2px solid #ffdd7c;
}

.input-suffix {
    font-family: 'Jockey One', sans-serif;
    font-size: 0.9em;
    color: #ffdd7c;
    min-width: 50px;
}

.number-feedback {
    font-size: 0.9em;
    font-family: 'Jockey One', sans-serif;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
}

.number-feedback.excellent {
    /* background: rgba(46, 204, 113, 0.2); */
    /* border: 2px solid #2ecc71; */
    color: #2ecc71;
}

.number-feedback.good {
    /* background: rgba(154, 205, 50, 0.2); */
    /* border: 2px solid #9ACD32; */
    color: #9ACD32;
}

.number-feedback.fair {
    /* background: rgba(255, 152, 0, 0.2); */
    /* border: 2px solid #FF9800; */
    color: #FF9800;
}

.number-feedback.poor {
    /* background: rgba(231, 76, 60, 0.2); */
    /* border: 2px solid #e74c3c; */
    color: #e74c3c;
}

.number-feedback.no-guess {
    background: rgba(255, 250, 215, 0.1);
    border: 2px solid #9E9E9E;
    color: #9E9E9E;
    font-style: italic;
}

.number-input.excellent {
    background: rgba(46, 204, 113, 0.2);
    border: 2px solid #2ecc71;
    /* color: #2ecc71; */
}

.number-input.good {
    background: rgba(154, 205, 50, 0.2);
    border: 2px solid #9ACD32;
    /* color: #9ACD32; */
}

.number-input.fair {
    background: rgba(255, 152, 0, 0.2);
    border: 2px solid #FF9800;
    /* color: #FF9800; */
}

.number-input.poor {
    background: rgba(231, 76, 60, 0.2);
    border: 2px solid #e74c3c;
    /* color: #e74c3c; */
}

.correct-value {
    /* font-size: 0.9em; */
    font-family: 'Jockey One', sans-serif;
    color: #fffad7;
    background: rgba(255, 250, 215, 0.1);
    border: 2px solid #b4a96b;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 8px;
    text-align: center;
    display: none;
}

.sorting-feedback,
#numberGuessingFeedback {
    font-size: 1.1em;
    font-family: 'Jockey One', sans-serif;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
    background: rgba(255, 250, 215, 0.2);
    border: 2px solid #b4a96b;
    color: #fffad7;
}

/* Results Container */
#results {
    display: none;
    max-width: 500px; /* Slightly wider than before for better readability */
    margin: 20px auto;
    padding: 20px;
    background: #101f31; /* Dark background consistent with game */
    border: 2px solid #4a6b8a;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    font-family: 'Jockey One', sans-serif;
    color: #fffad7;
    animation: fadeIn 0.2s ease-in;
    width: 40%;
}

.results-container {
    background: rgba(255, 250, 215, 0.15); /* Slightly more opaque for contrast */
    border: 2px solid #d3a213;
    border-radius: 10px;
    padding: 15px;
}

.results-container h3 {
    font-family: 'Bungee', cursive;
    font-size: 1.6rem; /* Slightly larger for emphasis */
    color: #ffdd7c;
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #ffdd7c; /* Separator line */
    padding-bottom: 10px;
}

.results-container h2 {
    border-bottom: 1px solid #ffdd7c; 
    margin: 5px;
    color: #ffdd7c;
    text-align: center;
}

.results-container p {
    font-family: 'Jockey One', sans-serif;
    font-size: 1.1rem; /* Unified font size, resolving duplicate declarations */
    color: #ffdd7c;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between; /* Align label and value */
    background: rgba(255, 250, 215, 0.1); /* Subtle background for each score */
    transition: transform 0.2s ease; /* Smooth hover effect */
}

.results-container p:hover {
    transform: translateY(-2px); /* Slight lift on hover */
}

.results-content {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Consistent spacing between items */
    font-size: 0.95em; /* Slightly smaller for content */
    line-height: 1.6;
}

.results-content p {
    margin: 0; /* Override default margin for results-content */
}

.results-content strong {
    color: #ffdd7c;
    font-weight: bold;
}

.total-score {
    font-size: 1.4rem; /* Slightly smaller than before but still prominent */
    font-weight: bold;
    color: #ffdd7c;
    /* background: rgba(204, 162, 46, 0.3); */
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    border: 2px solid #ffdd7c; /* Distinct border for total score */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.total-score:hover {
    transform: translateY(-2px);
}


.percent-green {
    color: #2ecc71;
}

.percent-yellow-green {
    color: #9ACD32;
}

.percent-yellow {
    color: #ecf000;
}

.percent-orange {
    color: #ee8f00;
}

.percent-red {
    color: #FF6B6B;
}

.sorting-game-row, .sorting-header, .game-modes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-family: 'Jockey One', sans-serif;
}

.show-values-checkbox, .drawing-option-checkbox {
    margin-left: auto;
    white-space: nowrap;
}

.sorting-categories, .game-modes-options {
    display: flex;
    flex-direction: column;
    font-family: 'Jockey One', sans-serif;
    font-size: 1.1rem;
}

.drawing-options {
    display: flex;
    gap: 10px;
    font-family: 'Jockey One', sans-serif;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .titleIndex {
        font-size: 3.5rem;
    }

    .menu-option {
        font-size: 1.5rem;
        padding: 0.8rem 1.5rem;
    }

    .main-container {
        padding: 20px;
    }

    .header-content {
        flex-direction: column;
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Center items vertically if needed */
    }
    .controls {
        width: 100%;
        display: flex;
        justify-content: center; /* Center the controls container */
        flex-wrap: wrap;
        gap: 5px;
    }

    .toggle-group {
        flex: 1; /* Allow toggle-group to grow and fill available space */
        min-width: 0; /* Prevent overflow */
        max-width: 100%; /* Ensure it doesn’t exceed screen width */
        justify-content: space-between; /* Spread toggles within the group */
        padding: 5px 8px;
        font-size: 0.8rem;
        display: flex;
        flex-wrap: wrap; /* Allow toggles to wrap if needed */
    }

    .game-area {
        flex-direction: column;
        min-height: 50vh;
    }

    .map-container {
        flex: 1;
        height: 50vh;
        margin: 3%;
    }

    #map {
        width: 100%;
        height: 100%;
        min-height: 35vh;
    }

    .drawing-status {
        font-size: 1.2em;
    }
    .controls-container {
        margin: 0px auto;
        width: 95%;
        padding: 10px;
    }
    .controls-container h2 {
        margin: 0px;
    }

    .btn {
        padding: 14px 20px;
        font-size: 1em;
    }

    .title {
        font-size: 1.3em;
    }

    .score {
        font-size: 1.8em;
    }

    .country-name {
        font-size: 1rem;
    }

    .capital-info {
        font-size: 0.8em;
    }

    .instructions {
        font-size: 0.75em;
    }

    .quiz-inputs label {
        font-size: 1em;
    }

    .quiz-input {
        font-size: 1.3em;
        padding: 6px;
    }

    .quiz-feedback {
        font-size: 0.75em;
    }

    .autocomplete-list {
        max-height: 120px;
        font-size: 0.8em;
    }

    .number-guessing-category {
        padding: 15px;
        margin-bottom: 20px;
    }

    .number-input-container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .input-suffix {
        text-align: center;
        min-width: auto;
    }
    .flag-controls {  position: absolute; margin-top: -5px; }
    .flag-grid-container h2 { font-size: 1.3rem; margin-bottom: 14px; }
    .flag-btn { padding: 6px 8px; }
}

@media (max-width: 480px) {
    .titleIndex {
        font-size: 3.3rem;
    }

    .menu-option {
        font-size: 1.3rem;
        padding: 0.7rem 1.2rem;
    }
}
#noDrawingModal .modal-content {
    max-width: 400px; /* Smaller width for a compact warning modal */
    padding: 15px;
}

#noDrawingModal .modal-header h2 {
    font-size: 1.5em; /* Slightly smaller header for warning */
    color: #e74c3c; /* Red to emphasize warning */
}

#noDrawingModal .modal-body p {
    font-family: 'Jockey One', sans-serif;
    font-size: 1em;
    color: #fffad7;
    text-align: center;
    margin: 10px 0;
}

#noDrawingModal .modal-footer {
    justify-content: center; /* Center buttons for simplicity */
    gap: 15px;
}

#noDrawingModal .btn.secondary {
    background: rgba(255, 250, 215, 0.2);
    border: 2px solid #e74c3c; /* Red border for cancel */
    /* color: #e74c3c; */
    color: #fffad7;
    font-family: 'Bungee', cursive;
}

#noDrawingModal .btn.secondary:hover {
    background: rgba(231, 76, 60, 0.3);
    transform: translateY(-2px);
}

#noDrawingModal .btn.primary {
    background: #2c3e50;
    font-size: 1rem;
    border: 2px solid #2ecc71;
    color: #fffad7;
    /* color:#2ecc71; */
    width: auto;
    padding: 10px 20px;
    margin: 0;
}

#noDrawingModal .btn.primary:hover {
    background: #27ae60;
    transform: translateY(-2px);
}

.settings-btn {
    position: absolute;
    top: 41px;
    right: 25px;
    z-index: 1000;
    font-family: 'Bungee', cursive;
    background: #101f31;
    color: #fffad7;
    opacity: 1;
    width: 150px;
    /* outline: 2px solid #101f31; */
    border: 2px solid #d3a213;
    padding: 10px 16px;
    border-radius: 8px;
    flex-shrink: 0;
    text-align: center;
    transition: all 0.2s ease;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.settings-btn:hover {
    background: linear-gradient(117deg, #fff0c7 0%, #fffad7 100%);
    color: #101f31;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); */
    transform: translateY(-1px);
}

.settings-btn:active {
    transform: translateY(0);
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

/* Mobile-specific styles for Guess The Country game */
@media (max-width: 768px) {
    /* Sorting Game */
    .sorting-game {
        width: 90%; /* Wider to use available space */
        margin: 10px auto;
        padding: 15px; /* Reduced padding for compactness */
        border-radius: 8px;
        font-size: 0.9rem; /* Slightly smaller font for mobile */
    }

    .sorting-game h2, .sorting-game h3 {
        font-size: 1.2rem; /* Smaller headings */
        margin: 5px 0;
    }

    .sorting-game p, .sorting-game p2 {
        font-size: 1.1rem; /* Smaller text for better fit */
        line-height: 1.4;
    }

    .sortable-item {
        padding: 8px; /* Reduced padding for compactness */
        font-size: 0.9rem;
    }
    .sortable-item.correct-answer {
        padding: 8px; /* Reduced padding for compactness */
        font-size: 0.9rem;
    }

    .sorting-feedback {
        font-size: 0.9rem;
        padding: 8px 10px;
        margin-bottom: 10px;
    }

    .sorting-game-row, .sorting-header, .game-modes-header {
        /* flex-direction: column; Stack vertically on mobile */
        /* align-items: flex-start; */
        gap: 8px;
    }

    .show-values-checkbox, .drawing-option-checkbox {
        margin-left: 0; /* Remove auto margin for vertical layout */
        width: 100%; /* Full width for better touch interaction */
    }

    .sorting-categories, .game-modes-options {
        gap: 5px; /* Reduced gap for compactness */
    }

    .drawing-options {
        /* flex-direction: column; Stack drawing options vertically */
        gap: 5px;
    }

    /* Toggles */

    .toggle-switch {
        width: 32px; /* Slightly smaller toggle */
        height: 16px;
        border-radius: 8px;
    }

    .toggle-slider {
        width: 12px;
        height: 12px;
        top: 2px;
        left: 2px;
    }

    .value{
        font-size: 0.8rem;;
    }

    .toggle-switch.active .toggle-slider {
        transform: translateX(16px); /* Adjust for smaller toggle */
    }

    /* Results Container */
    #results {
        width: 90%; /* Wider to use available space */
        margin: 10px auto;
        padding: 15px; /* Reduced padding */
        font-size: 0.9rem; /* Smaller font for mobile */
    }

    .results-container h3 {
        font-size: 1.3rem; /* Smaller heading */
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .results-container p {
        font-size: 0.95rem; /* Unified font size */
        padding: 6px 10px; /* Reduced padding */
        /* flex-direction: column; Stack label and value for readability */
        gap: 5px;
    }

    .results-content {
        gap: 3px; /* Tighter spacing */
    }

    .total-score {
        font-size: 1.2rem; /* Smaller total score */
        padding: 10px 12px;
        margin-top: 10px;
    }

    /* Submit Button */
    #submitBtn {
        width: 80%; /* Wider for easier tapping */
        font-size: 1.8rem; /* Smaller but still prominent */
        padding: 0.8rem 1.5rem;
        margin: 10px auto; /* Centered with reduced margin */
        border-radius: 10px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    }

    #submitBtn:hover {
        transform: translateY(-2px); /* Reduced lift for mobile */
    }

    #submitBtn:active {
        transform: translateY(0);
    }

    /* New Challenge Button */
    #newGameBtn {
        width: 80%; /* Wider for easier tapping */
        font-size: 1.8rem; /* Smaller but still prominent */
        padding: 0.8rem 1.5rem;
        margin: 10px auto; /* Centered with reduced margin */
        border-radius: 10px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    }

    #newGameBtn:hover {
        transform: translateY(-2px); /* Reduced lift */
    }

    #newGameBtn:active {
        transform: translateY(0);
    }

    .settings-btn {
        padding: 5px 10px;
        font-size: 0.85rem;
    }
    .settings-btn:hover {
        transform: translateY(-1px);
    }

    .settings-btn:active {
        transform: translateY(0);
    }

    .setting-item {
        margin-bottom: 5px;
    }

    .settings-section {
        margin-bottom: 0px;
    }
}

@media (max-width: 480px) {
    /* Sorting Game */
    .sorting-game {
        width: 95%; /* Almost full width */
        padding: 10px;
        font-size: 0.85rem;
    }
    .sorting-container{
        gap: 5px;
    }
    .correct-sort-container{
        gap: 5px;
    }
    .sorting-game h2, .sorting-game h3 {
        font-size: 1.1rem;
    }

    .sorting-game p, .sorting-game p2 {
        font-size: 1.1rem;
    }
    #number-game p2 {
        font-size: 1.1rem;
    }
    .sortable-item {
        padding: 6px;
        font-size: 0.85rem;
        max-width: 80px;
    }
    .sortable-item.correct-answer{
        padding: 6px;
    }
    .sortable-item.highlight{
        max-width: 80px;
    }

    /* Toggles */
    .controls {
        gap: 5px;
    }
    .toggle-group {
        font-size: 0.8rem;
        padding: 4px 4px;
        gap: 1px;
        margin-top: 6px;
        margin-bottom: 2px;
    }

    .toggle-switch {
        width: 26px;
        height: 14px;
        border-radius: 7px;
    }

    .toggle-slider {
        width: 10px;
        height: 10px;
        top: 2px;
        left: 2px;
    }

    .toggle-switch.active .toggle-slider {
        transform: translateX(14px);
    }

    /* Results Container */
    #results {
        width: 95%;
        padding: 10px;
        font-size: 0.85rem;
    }

    .results-container h3 {
        font-size: 1.4rem;
    }

    .results-container p {
        font-size: 0.9rem;
        padding: 5px 8px;
    }

    .total-score {
        font-size: 1.1rem;
        padding: 8px 10px;
    }

    /* Submit Button */
    #submitBtn {
        width: 90%;
        font-size: 2.5rem;
        /* padding: 0.7rem 1.2rem; */
    }

    /* New Challenge Button */
    #newGameBtn {
        width: 90%;
        /* font-size: 1.5rem; */
        /* padding: 0.7rem 1.2rem; */
    }

    .map-buttons{
        top: 1px;
        right: 0px;
    }
    #expandFlagGridBtn {
        display: none;;
    }
    .flag-tab {
        flex: 1; /* Maintain equal width on smaller screens */
        padding: 8px;
        font-size: 0.8rem;
    }
    .quick-mode-btn{
        font-size: 0.9rem;
    }
}

.all-games-btn:hover {
    background: #fffad7 !important;
    color: #101f31 !important;
    transform: translateY(-4px);
}

.footer {
    background: #101f31;
    padding: 20px;
    text-align: center;
    margin-top: auto;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 35px;
}

.footer-link {
    /* font-family: 'Jockey One', sans-serif; */
    font-family: 'Bungee', cursive;
    font-size: 1.9rem;
    color: #fffad7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #ffdd7c;
}

/* All Games Modal */
#allGamesModal .modal-content {
    max-width: 600px;
    background: #101f31;
    color: #fffad7;
    border-radius: 12px;
    padding: 20px;
}

#allGamesModal .modal-header {
    display: flex;
    justify-content: center; /* Changed from space-between to center */
    align-items: center;
    margin-bottom: 10px;
    position: relative; /* Added to allow absolute positioning of close button */
}

#allGamesModal .modal-header h2 {
    font-family: 'Bungee', cursive;
    font-size: 1.8rem;
    color: #ffdd7c;
    margin: 0; /* Ensure no extra margins disrupt centering */
}

#allGamesModal .modal-close {
    background: none;
    border: none;
    color: #fffad7;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute; /* Position close button absolutely */
    right: 10px; /* Adjust as needed */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
}

#allGamesModal .modal-close:hover {
    color: #e74c3c;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns for desktop */
    grid-template-rows: repeat(2, auto); /* 2 rows for desktop */
    gap: 20px;
    justify-items: center;
}

.game-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #fffad7;
    font-family: 'Jockey One', sans-serif;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.game-item:hover {
    transform: translateY(-2px);
}

.game-item svg {
    margin-bottom: 10px;
    transition: stroke 0.3s ease;
        margin-bottom: 10px;
    fill: #fffad7;
    stroke: #fffad7;
    transition: stroke 0.3s ease;
}

.game-item:hover svg {
    stroke: #ffdd7c;
    fill: #ffdd7c;
}
.quick-modes {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0;
    z-index: 1000;
    background: #101f31;
    /* padding: 5px 0; */
    outline: 2px solid #101f31;
}

.quick-mode-tab {
    flex: 1;
    font-family: 'Jockey One', sans-serif;
    font-size: 1.2rem;
    color: #fffad7;
    background: #101f31;
    border: 1px solid rgba(255, 250, 215, 0.2);
    border-right: none;
    padding: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

.quick-mode-tab:last-child {
    border-right: 1px solid rgba(255, 250, 215, 0.2);
}

.quick-mode-tab:hover {
    background: #2c3e50;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.quick-mode-tab.active {
    background: #ffdd7c;
    color: #101f31;
    border-color: #ffdd7c;
    opacity: 1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#statsBtn {
    position: absolute;
    top: 41px;
    left: 25px;
    z-index: 1000;
    font-family: 'Bungee', cursive;
    background: #101f31;
    color: #fffad7;
    opacity: 1;
    width: 150px;
    /* outline: 2px solid #101f31; */
    border: 2px solid #d3a213;
    padding: 10px 16px;
    border-radius: 8px;
    flex-shrink: 0;
    text-align: center;
    transition: all 0.2s ease;
}

.modal-content {
    margin: 5% auto;
    padding: 20px;
    border-radius: 15px;
    width: 80%;
    max-width: 600px;
    max-height: 89vh;
    overflow-y: auto;
    background: #101f31;
    border: 2px solid #4a6b8a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    color: #fffad7;
    font-family: 'Jockey One', sans-serif;
}

#button-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    /* margin-bottom: 3%; */
    margin-top: 1%;
    }

    #statsBtn,
    .settings-btn {
        min-width: 80px;
        max-width: 250px;
        width: 200px;
        font-size: 1.45rem;
        padding: 12px 8px;
        position: relative;
        top: auto;
    }
    #button-row1 {
    display: flex;
    justify-content: center; /* Center all child elements horizontally */
    width: 100%;
    max-width: 300px; /* Limit width for centered appearance */
    margin: 0.5% auto; /* Center the container with auto margins on left and right */
}
#settingsBtn1{
    right:0;
    width: 250px;
}

/* Media Queries */
@media (max-width: 768px) {
    .games-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile */
        grid-template-rows: repeat(3, auto); /* 3 rows for mobile */
        gap: 15px; /* Slightly smaller gap for mobile */
    }
    .quick-mode-tab {
        font-size: 0.9rem;
        padding: 6px;
    }

    .footer-links {
        gap: 5px;
    }

    #button-row {
        display: flex;
        justify-content: space-between; /* Space buttons to opposite sides */
        width: 100%;
        max-width: 300px; /* Limit width for centered appearance */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1%;
        margin-top: 0%;
    }

    #statsBtn,
    .settings-btn {
        min-width: 80px;
        max-width: 110px;
        font-size: 1rem;
        padding: 10px 10px;
        position: relative;
        top: auto;
    }

    #button-row1 {
    display: flex;
    justify-content: center; /* Center all child elements horizontally */
    width: 100%;
    max-width: 300px; /* Limit width for centered appearance */
    margin: 3% auto; /* Center the container with auto margins on left and right */
    margin-bottom: 3%;
    margin-top: 3%;
}

#settingsBtn1 {
    font-size: 1rem;
    padding: 8px 8px;
    /* Remove positioning properties that interfere with flex centering */
    position: static; /* Reset position to default (removes relative positioning) */
    width: 200px;
    max-width: none;
}

    .modal-content {
        max-height: 90vh;
    }
}

@media (max-width: 480px) {
    .quick-mode-tab {
        font-size: 0.8rem;
        padding: 5px;
    }
    .updateContainer {
        flex-wrap: wrap;
        justify-content: center;
    }
}

#copyNotification {
    text-align: center;
    font-family: 'Jockey One', sans-serif;
    font-size: 1.5rem;
    color: #101f31;
    transition: opacity 0.5s;
    display: none;
    opacity: 0;
    right: 0px;
    left: 0px;
    position: absolute;
}

#shareResultsBtn {
    font-family: 'Bungee', cursive;
    color: #fffad7;
    font-size: 2.2rem;
    margin: auto;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 15px;
    background: #101f31;
    border: 2px solid #101f31;
    box-shadow: 0 5px 15px rgba(133, 126, 93, 0.4);
    display: block;
    text-align: center;
    position: relative;
    animation: fadeIn 0.2s ease-in;
    margin: 1% auto 1% auto;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(16, 31, 49, 0.8);
    z-index: 10000;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.modal h2 {
    font-family: 'Bungee', cursive;
    font-size: 1.8rem;
    color: #ffdd7c;
}

.modal h3 {
    color: #ffdd7c;
    font-size: 1.3rem;
}

.modal-content p{
    font-size: 1.2rem;
}

.close {
    float: right;
    font-size: 2em;
    cursor: pointer;
    background: none;
    border: none;
    color: #fffad7;
    transition: color 0.3s, transform 0.3s;
}

.close:hover {
    color: #e74c3c;
    transform: rotate(90deg);
}

.mode-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.mode-tab {
    padding: 8px 16px;
    border: 2px solid #4a6b8a;
    border-radius: 8px;
    cursor: pointer;
    background: #101f31;
    color: #fffad7;
    font-family: 'Jockey One', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.mode-tab:hover {
    /* background: rgba(255, 250, 215, 0.3); */
    transform: translateY(-1px);
}

.mode-tab.active {
    background: #ffdd7c;
    color: #101f31;
    border-color: #ffdd7c;
}

.region-toggles {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-family: 'Jockey One', sans-serif;
    color: #fffad7;
}

.stats-table th, .stats-table td {
    border: 2px solid #4a6b8a;
    padding: 8px;
    text-align: left;
}

#totalGamesPlayed, #dailyStreak {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffdd7c;
}

.stats-table th {
    /* background: rgba(255, 250, 215, 0.2); */
    color: #ffdd7c;
    font-family: 'Bungee', cursive;
    font-size: 1.1rem;
}

#statsBtn:hover {
    background: linear-gradient(117deg, #fff0c7 0%, #fffad7 100%);
    color: #101f31;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); */
    transform: translateY(-1px);
}

.region-toggles {
    display: flex;
    gap: 10px; /* Reduced from 15px for tighter spacing */
    margin-bottom: 20px;
    flex-wrap: nowrap; /* Prevent wrapping to ensure single row */
    width: 100%; /* Fill the modal-content width */
    justify-content: space-between; /* Evenly space labels */
}

/* Style labels to dynamically fill available space */
.region-toggles label {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced from 10px for compactness */
    cursor: pointer;
    user-select: none;
    font-family: 'Jockey One', sans-serif;
    font-size: 1em;
    color: #fffad7;
    flex: 1; /* Labels take equal width */
    text-align: center; /* Center text within each label */
}

/* Adjust checkbox size for better fit */
.region-toggles input[type="checkbox"] {
    width: 25px; /* Reduced from 24px for smaller footprint */
    height: 25px; /* Reduced from 24px */
    background: rgba(255, 250, 215, 0.1);
    border: 2px solid #4a6b8a;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}

.region-toggles input[type="checkbox"]:checked {
    background: #ffe97c;
    transform: scale(1.1);
}

.region-toggles input[type="checkbox"]:checked::after {
    /* content: '✔'; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em; /* Reduced from 1.2em to match smaller checkbox */
    color: #101f31;
    line-height: 20px; /* Match new checkbox height */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
    .region-toggles {
        gap: 5px; /* Tighter spacing for small screens */
    }

    .region-toggles label {
        font-size: 0.85rem; /* Smaller font for mobile */
        gap: 5px; /* Tighter gap between checkbox and text */
    }

    .region-toggles input[type="checkbox"] {
        width: 20px; /* Smaller checkbox for mobile */
        height: 20px;
    }

    .region-toggles input[type="checkbox"]:checked::after {
        font-size: 0.8em; /* Adjust checkmark size */
        line-height: 16px;
    }
}

#logoBlue {
            width: 150px; /* Adjust size as needed */
            display: block;
            margin: 0 auto;
            animation: tilt 3s ease-in-out infinite;
        }
        @keyframes tilt {
            0% {
                transform: rotate(10deg); /* Start at right tilt */
            }
            50% {
                transform: rotate(-10deg); /* Tilt to the left */
            }
            100% {
                transform: rotate(10deg); /* End at right tilt for seamless loop */
            }
        }


.loading-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* SVG animation */
.loading-background {
    /* background-color: #101f31; */
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: 2px solid #ffdd7c; */
    /* border: 2px solid #101f31; */
}

.loading-svg {
    animation: tilt 1.5s infinite ease-in-out;
    width: 130px;
    /* outline: orange; */
    /* background: #101f31; */
}
.loading-text {
    margin-top: 10px;
    /* font-size: 34px; */
    font-size: 1.3em;
    font-weight: bold;
    color: #ffdd7c;
    /* color: #d3a213; */
    /* color: #101f31; */
}

.loading-text span {
    display: inline-block;
    animation: loading04 0.7s infinite;
}

.loading-text span:nth-child(2) { animation-delay: 0.1s; }
.loading-text span:nth-child(3) { animation-delay: 0.2s; }
.loading-text span:nth-child(4) { animation-delay: 0.3s; }
.loading-text span:nth-child(5) { animation-delay: 0.4s; }
.loading-text span:nth-child(6) { animation-delay: 0.5s; }
.loading-text span:nth-child(7) { animation-delay: 0.6s; }

@keyframes loading04 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
}