:root {
  --primary-text-color: #333;
  --container-bg-color: rgba(255, 255, 255, 0.93);
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  --rainbow-c1: #E81416; /* Rot */
  --rainbow-c2: #FFA500; /* Orange */
  --rainbow-c3: #FAEB36; /* Gelb */
  --rainbow-c4: #79C314; /* Grün */
  --rainbow-c5: #487DE7; /* Blau */
  --rainbow-c6: #4B0082; /* Indigo */
  --rainbow-c7: #8B00FF; /* Violett */

  --button-primary-bg-start: #007bff;
  --button-primary-bg-end: #0056b3;
  --button-primary-hover-bg-start: #0056b3;
  --button-primary-hover-bg-end: #004085;
  --button-primary-text-color: #fff;

  --button-start-bg-start: #28a745;
  --button-start-bg-end: #1e7e34;
  --button-start-hover-bg-start: #1e7e34;
  --button-start-hover-bg-end: #155724;

  --button-active-selection-bg-start: #20c997;
  --button-active-selection-bg-end: #17a2b8;

  --button-skip-bg-start: #ffc107;
  --button-skip-bg-end: #e0a800;
  --button-skip-hover-bg-start: #e0a800;
  --button-skip-hover-bg-end: #c69500;
  --button-skip-text-color: #212529;

  --button-back-bg: #6c757d;
  --button-back-hover-bg: #5a6268;
  
  --border-color-light: #ccc;
  --border-color-medium: #aaa;
  --correct-border-color: green;
  --incorrect-border-color: red;
  --error-color: red;
  --focus-outline-color: #0056b3;  
  --flag-bg-color: #f0f0f0;  
}

body {
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/1280px-The_Earth_seen_from_Apollo_17.jpg') no-repeat center center fixed;
  background-size: cover;
  color: var(--primary-text-color);
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 20px auto;
  padding: 20px;
  background: var(--container-bg-color);
  border-radius: 10px;  
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);  
}

header {
  text-align: center;
  margin-bottom: 20px;  
  padding: 10px 15px;  
  background-color: white;  
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: relative;  
}

header h1 {
  margin: 0;
  font-size: 2.5em;  
  font-weight: 700;  
  padding: 5px 0;
  line-height: 1.2;  
}
header h1 .char1 { color: var(--rainbow-c1); }
header h1 .char2 { color: var(--rainbow-c2); }
header h1 .char3 { color: var(--rainbow-c3); }
header h1 .char4 { color: var(--rainbow-c4); }
header h1 .char5 { color: var(--rainbow-c5); }
header h1 .char6 { color: var(--rainbow-c6); }
header h1 .char7 { color: var(--rainbow-c7); }

#muteButton {  
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 12px;
    font-size: 0.9em;
    text-transform: none;  
    background-image: linear-gradient(to right, #6c757d 0%, #495057 100%);
    color: white;
}
#muteButton:hover {
    background-image: linear-gradient(to right, #5a6268 0%, #343a40 100%);
}

#menu, #quizStandard, #catalog, #quizMcText, #quizMcImage, #reviewSection {  
  padding: 25px;  
  margin-top: 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.button-base {
  margin: 5px;
  padding: 12px 20px;  
  border: none;
  border-radius: 6px;  
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;  
  letter-spacing: 0.5px;  
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  text-align: center;
  /* For <a> tags styled as buttons */
  text-decoration: none;
  display: inline-block;
}
.button-base:hover {
  transform: translateY(-2px);  
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.button-base:active {
  transform: translateY(0px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.button-base:disabled, .button-base.disabled, .button-base.disabled-option {  
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-image: linear-gradient(to right, #6c757d 0%, #495057 100%);
    color: var(--button-primary-text-color);
}

.button-primary {
  background-image: linear-gradient(to right, var(--button-primary-bg-start) 0%, var(--button-primary-bg-end) 100%);
  color: var(--button-primary-text-color);
}
.button-primary:hover:not(:disabled) {
  background-image: linear-gradient(to right, var(--button-primary-hover-bg-start) 0%, var(--button-primary-hover-bg-end) 100%);
}

#startButton {
  background-image: linear-gradient(to right, var(--button-start-bg-start) 0%, var(--button-start-bg-end) 100%);
  color: var(--button-primary-text-color);
}
#startButton:hover:not(.disabled) {
  background-image: linear-gradient(to right, var(--button-start-hover-bg-start) 0%, var(--button-start-hover-bg-end) 100%);
}
 
.category-buttons button,
.mode-buttons button {
  background-image: linear-gradient(to right, #6c757d 0%, #495057 100%);  
  color: var(--button-primary-text-color);
  min-width: 120px;  
}
.category-buttons button:hover:not(:disabled),
.mode-buttons button:hover:not(:disabled) {
  background-image: linear-gradient(to right, #5a6268 0%, #343a40 100%);
}

.category-buttons button.active,
.mode-buttons button.active {
  background-image: linear-gradient(to right, var(--button-active-selection-bg-start) 0%, var(--button-active-selection-bg-end) 100%);
  color: var(--button-primary-text-color);
  box-shadow: 0 0 10px var(--button-active-selection-bg-end);  
}

#skipButton {
  background-image: linear-gradient(to right, var(--button-skip-bg-start) 0%, var(--button-skip-bg-end) 100%);
  color: var(--button-skip-text-color);
}
#skipButton:hover:not(:disabled) {
  background-image: linear-gradient(to right, var(--button-skip-hover-bg-start) 0%, var(--button-skip-hover-bg-end) 100%);
}

.back-button {
  background: var(--button-back-bg);
  color: var(--button-primary-text-color);
}
.back-button:hover:not(:disabled) {
  background: var(--button-back-hover-bg);
}

#reviewMistakesButton {
    background-image: linear-gradient(to right, var(--button-skip-bg-start) 0%, var(--button-skip-bg-end) 100%);
    color: var(--button-skip-text-color);
    margin-top: 15px;
}
#reviewMistakesButton:hover {
    background-image: linear-gradient(to right, var(--button-skip-hover-bg-start) 0%, var(--button-skip-hover-bg-end) 100%);
}

button:focus,  
input[type="text"]:focus,
#catalogGrid img:focus,
.mc-option-button:focus,
.mc-flag-option:focus {
  outline: 3px solid var(--focus-outline-color);  
  outline-offset: 2px;
  box-shadow: 0 0 8px var(--focus-outline-color);
}

#timer, #catalogTimer, #timerMcText, #timerMcImage {
  font-size: 1.2em;
  margin-bottom: 10px;
  font-weight: 500;
}
#progressDisplay, #progressDisplayMcText, #progressDisplayMcImage {
    font-size: 1em;
    color: #555;
    margin-bottom: 10px;
}

#flagContainer, #flagContainerMcText {  
  text-align: center;
  margin-bottom: 20px;
}
#flagImage, #flagImageMcText {  
  width: 300px;   
  height: 180px;  
  object-fit: contain;  
  background-color: var(--flag-bg-color);  
  display: block;
  margin: 0 auto;  
  border: 3px solid var(--border-color-light);  
  border-radius: 8px;  
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);  
}

#answer {
  width: calc(100% - 28px);  
  padding: 12px;  
  font-size: 1.1em;  
  margin-bottom: 15px;  
  border: 2px solid var(--border-color-medium);  
  border-radius: 6px;
}
#answer:focus { border-color: var(--focus-outline-color); }

#feedback, #catalogFeedback, #menuFeedback, #feedbackMcText, #feedbackMcImage {
  margin-top: 15px;
  font-weight: bold;
  text-align: center;
  color: var(--primary-text-color);
  min-height: 1.4em;  
  font-size: 1.1em;  
}
#menuFeedback { color: var(--error-color); }

#catalogGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;  
  margin-top: 20px;
}
#catalogGrid img {
  width: 100%;  
  height: 70px;   
  object-fit: contain;  
  background-color: var(--flag-bg-color);  
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#catalogGrid img:hover {
  transform: scale(1.08);  
  border-color: var(--primary-text-color);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.correct {  
  border-color: var(--correct-border-color) !important;
  box-shadow: 0 0 10px var(--correct-border-color);  
}
#catalogGrid img.correct {  
    pointer-events: none;  
    opacity: 0.6;
}
 
.target-found {  
    border: 3px dashed var(--correct-border-color) !important;
    transform: scale(1.05);
}
.incorrect-selection {  
    border-color: var(--incorrect-border-color) !important;
    opacity: 0.7;
}
 
.mc-option-button.correct, .mc-flag-option.correct { }
.mc-option-button.incorrect-selection, .mc-flag-option.incorrect-selection {
    border: 3px solid var(--incorrect-border-color) !important;  
    opacity: 0.7;
}
.mc-option-button.target-revealed, .mc-flag-option.target-revealed {  
    border-style: dashed !important;
    opacity: 1 !important;
}

.mc-options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.mc-option-button {  
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px;  
    font-size: 0.95em;  
    text-transform: none;  
    background-image: linear-gradient(to right, #6c757d 0%, #495057 100%);  
    color: var(--button-primary-text-color);
}
.mc-option-button:hover:not(:disabled) {
    background-image: linear-gradient(to right, #5a6268 0%, #343a40 100%);
}
.mc-target-country {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 20px;
}
.mc-image-options {  
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));  
    gap: 15px;
}
.mc-flag-option {
    height: 90px;  
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;  
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    position: relative;  
    display: flex;  
    align-items: center;
    justify-content: center;
    background-color: var(--flag-bg-color);  
    padding: 5px;  
    box-sizing: border-box;
}
.mc-flag-option.disabled-option {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;  
}
.mc-flag-option img {
    max-width: 100%;  
    max-height: 100%;
    object-fit: contain;  
    display: block;  
}
.mc-flag-option:hover:not(.disabled-option) {
    transform: scale(1.05);
    border-color: var(--primary-text-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

#reviewSection {
    text-align: center;
}
#mistakesList {
    list-style-type: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
#mistakesList li {
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#mistakesList img {
    width: 150px;  
    height: 90px;
    object-fit: contain;
    background-color: var(--flag-bg-color);
    border: 1px solid var(--border-color-medium);
    border-radius: 4px;
    margin-bottom: 10px;
}
#mistakesList p {
    margin: 5px 0;
    font-weight: bold;
}
.mistake-reason {
    font-size: 0.9em;
    color: #555;
}