:root {
     --bg-color: #164ac5;
     --card-bg: #ffff;
     --accent: #81b1ff;
     --accent-hover: #2563eb;
     --text-color: #141414;
     --text-muted: #565656;
     --correct: #77fda8;
     --wrong: #ff8484;
 }

 .go-home {
     position: fixed;
     top: 20px;
     left: 20px;
     background-color: white;
     padding: 10px 10px;
     border-radius: 7px;
 }

 .go-home i {
     /* color: white; */
     /* font-size: 18px; */
 }

 .game-view {
     /* background-image: url("../images/background/space.jpg"); */
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     background: #00d2fc;
     background: linear-gradient(195deg,
             rgb(109, 0, 252) 1%,
             rgba(0, 117, 234, 1) 99%);
     /* background-color: var(--bg-color); */
     color: var(--text-color);
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100dvh;
     min-height: 100vh;
     padding: 20px;
 }

 .game-container {
     background-color: var(--card-bg);
     border-radius: 16px;
     width: 100%;
     max-width: 700px;
     padding: 30px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
     position: relative;
     overflow: hidden;
 }

 .main-heading {
     text-align: center;
     font-size: 1.8rem;
     margin-bottom: 20px;
     color: var(--text-color);
 }

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

 .stats-bar {
     display: flex;
     gap: 15px;
     font-weight: 500;
     color: var(--text-muted);
     font-size: 0.95rem;
 }

 .stat-item {
     color: var(--text-color);
     font-size: 18px;
 }

 .stat-item span {
     color: var(--text-color);
     font-size: 18px;
 }

  .stat-item i {
     color: var(--text-color);
 }

 .btn-settings {
     background: none;
     border: none;
     color: var(--text-color);
     font-size: 22px;
     cursor: pointer;
     transition: transform 0.2s;
 }

 .btn-settings:hover {
     transform: rotate(40deg);
 }

 .flag-wrapper {
     width: 100%;
     height: 220px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 25px;
     background-color: #d7d7d7;
     border-radius: 12px;
     overflow: hidden;
 }

 .flag-img {
     max-height: 180px;
     max-width: 90%;
     object-fit: contain;
 }

 .options-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
     margin-bottom: 20px;
 }

 .btn-option {
     background-color: rgba(255, 255, 255, 0.05);
     border: 2px solid rgba(0, 0, 0, 0.1);
     color: var(--text-color);
     padding: 14px 10px;
     border-radius: 10px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
     text-align: center;
 }

 .btn-option:hover:not(:disabled) {
     background-color: var(--accent);
     border-color: var(--accent);
 }

 .btn-option.correct {
     background-color: var(--correct) !important;
     border-color: var(--correct) !important;
 }

 .btn-option.wrong {
     background-color: var(--wrong) !important;
     border-color: var(--wrong) !important;
 }

 .btn-next,
 .btn-restart,
 .btn-start {
     width: 100%;
     background: #00d2fc;
     background: linear-gradient(195deg,
             rgb(109, 0, 252) 1%,
             rgba(0, 117, 234, 1) 99%);
     color: white;
     padding: 15px;
     outline: none;
     border: none;
     border-radius: 10px;
     font-weight: 500;
     cursor: pointer;
     font-size: 1rem;
     transition: background-color 0.2s;
 }

 .btn-start:hover,
 .btn-next:hover {
     background-color: var(--accent-hover);
 }

 .btn-next {
     display: none;
 }

 .btn-restart {
     margin-top: 15px;
     background-color: var(--correct);
 }

 .modal-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: var(--card-bg);
     border-radius: 16px;
     display: flex;
     flex-direction: column;
     padding: 30px;
     z-index: 10;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
     justify-content: center;
     text-align: center;
 }

 .modal-overlay.active {
     opacity: 1;
     pointer-events: all;
 }

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

 .setting-group {
     margin-bottom: 20px;
     text-align: left;
 }

 .setting-group label {
     display: block;
     margin-bottom: 8px;
     color: var(--text-muted);
     font-size: 0.9rem;
 }

 .setting-group select {
     width: 100%;
     padding: 10px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(0, 0, 0, 0.1);
     color: var(--text-color);
     outline: none;
 }

 .btn-apply {
     background: #00d2fc;
     background: linear-gradient(195deg,
             rgb(109, 0, 252) 1%,
             rgba(0, 117, 234, 1) 99%);
     color: white;
     margin-top: 10px;
     padding: 15px;
     border: none;
     border-radius: 8px;
     font-weight: 500;
     cursor: pointer;
 }

 .timer-container {
     width: 100%;
     height: 6px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 3px;
     margin-bottom: 20px;
     overflow: hidden;
     display: none;
 }

 .timer-bar {
     height: 100%;
     width: 100%;
     background-color: #40a6ff;
     transition: width 0.1s linear;
 }

 .start-title {
     font-size: 2.2rem;
     margin-bottom: 15px;
     color: var(--text-color);
 }

 .start-desc {
     color: var(--text-muted);
     margin-bottom: 30px;
     line-height: 1.5;
 }
 #congratsModal > *{
    color: var(--text-color);
 }
 #congratsModal > button{
    color: white;
 }
  #congratsModal strong {
    color: var(--text-color);
  }
 .congrats-title {
     font-size: 2rem;
     color: var(--correct);
     margin-bottom: 10px;
 }

 .congrats-stats {
     margin: 15px 0;
     font-size: 1.1rem;
     line-height: 1.6;
 }
 .congrats-stats #restartGame{
     color: var(--text-color);
 }

 @media screen and (max-width:576px) {
     .stats-bar {
     gap: 5px;
 }
     .stat-item {
     font-size: 14px;
 }
     .stat-item span{
     font-size: 14px;
 }

 }