/* ==========================================================================
   WAT GEBEURT ER? - GAME STYLES
   ========================================================================== */

#app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.screen {
  display: none;
  animation: fadeIn 0.4s ease-out;
}

.screen.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   START SCREEN
   -------------------------------------------------------------------------- */
.game-title {
  text-align: center;
  font-size: 2.5rem;
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

.game-intro {
  text-align: center;
  font-size: 1.2rem;
  color: var(--text-muted);
  margin-bottom: 3rem;
}

.level-select-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.level-options {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.level-option {
  cursor: pointer;
  flex: 1;
  min-width: 200px;
  max-width: 250px;
}

.level-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.level-card {
  background: var(--bg-card);
  border: 3px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.level-option input[type="radio"]:checked + .level-card {
  border-color: var(--accent1);
  background: var(--bg-hover);
  box-shadow: 0 4px 12px var(--shadow-color);
  transform: translateY(-4px);
}

.level-option input[type="radio"]:focus-visible + .level-card {
  outline: 3px solid var(--accent1);
  outline-offset: 4px;
}

.level-card h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-color);
  font-size: 1.4rem;
}

.level-desc {
  color: var(--text-muted);
  font-size: 1rem;
  display: block;
  margin-bottom: 1rem;
}

.best-score {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent2);
  min-height: 1.2rem;
}

#btn-start {
  display: block;
  margin: 0 auto;
  font-size: 1.5rem;
  padding: 1rem 3rem;
}

/* --------------------------------------------------------------------------
   GAME SCREEN
   -------------------------------------------------------------------------- */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-muted);
}

.scenario-container {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px var(--shadow-color);
}

.scene-box {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-body);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.scene-icon {
  font-size: 3rem;
  line-height: 1;
  min-width: 60px;
  text-align: center;
}

.scene-text {
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 0;
  color: var(--text-color);
}

.question-text {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-color);
  text-align: center;
}

.answers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.btn-answer {
  background: var(--bg-body);
  border: 2px solid var(--border-color);
  color: var(--text-color);
  font-size: 1.2rem;
  padding: 1.2rem 1.5rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: inherit;
  display: flex;
  align-items: center;
}

.btn-answer:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--accent1);
}

.btn-answer:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-answer:focus-visible {
  outline: 3px solid var(--accent1);
  outline-offset: 2px;
}

.btn-answer:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.btn-answer.correct {
  background: var(--success-bg, #e6f4ea);
  border-color: var(--success-color, #1e8e3e);
  color: #0d652d;
}
[data-theme="dark"] .btn-answer.correct {
  background: rgba(30, 142, 62, 0.2);
  color: #81c995;
}

.btn-answer.incorrect {
  background: var(--error-bg, #fce8e6);
  border-color: var(--error-color, #d93025);
  color: #b31412;
}
[data-theme="dark"] .btn-answer.incorrect {
  background: rgba(217, 48, 37, 0.2);
  color: #f28b82;
}

.answer-letter {
  font-weight: 700;
  margin-right: 1rem;
  color: var(--accent1);
  min-width: 25px;
}

/* --------------------------------------------------------------------------
   FEEDBACK & EXPLANATION
   -------------------------------------------------------------------------- */
.feedback-area {
  background: var(--bg-body);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  border-left: 6px solid var(--accent2);
  animation: slideDown 0.3s ease-out;
}

.feedback-area.hidden {
  display: none;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.feedback-title {
  margin: 0 0 0.5rem 0;
  color: var(--text-color);
  font-size: 1.3rem;
}

.feedback-title.success {
  color: var(--success-color, #1e8e3e);
}
[data-theme="dark"] .feedback-title.success {
  color: #81c995;
}

.explanation-text {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-color);
  margin-bottom: 1rem;
}

.science-term-box {
  background: var(--bg-card);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border: 1px dashed var(--accent1);
}

.science-term-box.hidden {
  display: none;
}

.science-term-box strong {
  color: var(--accent1);
  font-size: 1.1rem;
  margin-left: 0.5rem;
}

.btn-next {
  display: block;
  width: 100%;
  padding: 1rem;
  font-size: 1.2rem;
}

/* --------------------------------------------------------------------------
   RESULT SCREEN
   -------------------------------------------------------------------------- */
.result-box {
  text-align: center;
  background: var(--bg-card);
  border-radius: 16px;
  padding: 3rem 2rem;
  box-shadow: 0 4px 12px var(--shadow-color);
}

.result-score {
  font-size: 4rem;
  color: var(--accent1);
  margin: 0 0 1rem 0;
}

.result-feedback {
  font-size: 1.8rem;
  color: var(--text-color);
  margin: 0 0 3rem 0;
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.result-actions button, .result-actions a {
  min-width: 250px;
}

/* --------------------------------------------------------------------------
   REACTION ANIMATIONS AREA
   -------------------------------------------------------------------------- */
.reaction-area {
  min-height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  margin: 1rem 0;
  overflow: hidden;
  position: relative;
}

.reaction-area.hidden {
  display: none;
}

/* Reaction Specifics */
.r-item {
  position: absolute;
  transition: all 1s ease-in-out;
}

/* Melt */
.anim-melt .ice { opacity: 1; transform: scale(1); }
.anim-melt .water { opacity: 0; transform: scale(0.5) translateY(20px); }
.anim-melt.active .ice { opacity: 0; transform: scale(0.5) translateY(20px); }
.anim-melt.active .water { opacity: 1; transform: scale(1) translateY(0); }

/* Wilt */
.anim-wilt .plant { transform: scale(1) rotate(0deg); filter: grayscale(0%); }
.anim-wilt.active .plant { transform: scale(0.9) rotate(15deg); filter: grayscale(80%); opacity: 0.7; }

/* Attract */
.anim-attract .magnet { transform: translateX(50px); z-index: 2; }
.anim-attract .paperclip { transform: translateX(-50px); }
.anim-attract.active .paperclip { transform: translateX(10px) rotate(15deg); }

/* Float/Sink */
.anim-float-sink { width: 100%; height: 120px; border-bottom: 4px solid #4facfe; position: relative; }
.anim-float-sink .cork-shape { position: absolute; left: 30%; top: 10px; width: 16px; height: 16px; background-color: #d2b48c; border-radius: 4px; }
.anim-float-sink .stone { position: absolute; left: 60%; top: 10px; }
.anim-float-sink.active .cork-shape { top: 70px; transform: translateY(-5px); animation: bob 2s infinite ease-in-out; }
.anim-float-sink.active .stone { top: 90px; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Illuminate */
.anim-illuminate .bulb { filter: brightness(0.5); text-shadow: none; }
.anim-illuminate.active .bulb { filter: brightness(1.2); text-shadow: 0 0 20px #f6e05e, 0 0 40px #f6e05e; }

/* Shadow */
.anim-shadow { display: flex; align-items: center; gap: 1rem; width: 100%; justify-content: center; }
.anim-shadow .beam { width: 0; height: 20px; background: rgba(255, 255, 0, 0.3); transition: width 0.5s ease; }
.anim-shadow .shadow-blob { opacity: 0; transform: scale(0.5); background: rgba(0,0,0,0.5); width: 40px; height: 60px; border-radius: 50%; filter: blur(4px); transition: all 0.5s ease; }
.anim-shadow.active .beam { width: 60px; }
.anim-shadow.active .shadow-blob { opacity: 1; transform: scale(1) translateX(20px); }

/* Dissolve */
.anim-dissolve .salt { opacity: 1; transform: translateY(0) scale(1); }
.anim-dissolve.active .salt { opacity: 0; transform: translateY(30px) scale(0.2); filter: blur(5px); }

/* Bend Bridge */
.anim-bend { display: flex; justify-content: center; gap: 3rem; width: 100%; }
.bridge-flat { border-bottom: 4px solid var(--text-color); width: 80px; position: relative; transition: all 0.5s ease; }
.bridge-folded { border-bottom: 4px dashed var(--text-color); width: 80px; position: relative; transition: all 0.5s ease; }
.weight { position: absolute; top: -30px; left: 30px; font-size: 1.5rem; opacity: 0; transition: opacity 0.3s ease; }
.anim-bend.active .weight { opacity: 1; }
.anim-bend.active .bridge-flat { transform: translateY(15px); border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; }

/* Droplets */
.anim-droplets .glass { position: relative; }
.anim-droplets .drop { position: absolute; font-size: 0.5rem; opacity: 0; color: #4facfe; transition: all 0.5s ease; }
.anim-droplets.active .drop { opacity: 1; }
.anim-droplets.active .drop:nth-child(2) { top: 20px; left: 10px; }
.anim-droplets.active .drop:nth-child(3) { top: 40px; left: 30px; }
.anim-droplets.active .drop:nth-child(4) { top: 15px; left: 40px; }

/* Repel */
.anim-repel { display: flex; gap: 10px; }
.anim-repel .mag1 { transform: translateX(0); transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.anim-repel .mag2 { transform: translateX(0) scaleX(-1); transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.anim-repel.active .mag1 { transform: translateX(-40px); }
.anim-repel.active .mag2 { transform: translateX(40px) scaleX(-1); }

/* Push */
.anim-push .car { transform: translateX(-60px); transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1); }
.anim-push.active .car { transform: translateX(80px); }

/* Solar */
.anim-solar .zap { opacity: 0.2; filter: grayscale(100%); transition: all 0.5s ease; }
.anim-solar.active .zap { opacity: 1; filter: grayscale(0%); text-shadow: 0 0 10px #f6e05e; transform: scale(1.2); }

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .screen,
  .feedback-area {
    animation: none !important;
  }

  .r-item,
  .anim-float-sink .cork-shape,
  .beam,
  .shadow-blob,
  .bridge-flat,
  .mag1,
  .mag2,
  .car,
  .zap {
    transition: none !important;
    animation: none !important;
  }

  .anim-melt.active .ice { display: none; }
  .anim-float-sink.active .cork-shape { animation: none; top: 70px; }
}

/* RTL Support */
html[dir="rtl"] .answer-letter {
  margin-right: 0;
  margin-left: 1rem;
}

html[dir="rtl"] .scene-box {
  flex-direction: row-reverse;
}

html[dir="rtl"] .btn-answer {
  text-align: right;
}

/* Ensure scenario content is LTR even if UI is RTL */
html[dir="rtl"] .scenario-container[lang="nl"] .answers {
  direction: ltr;
}
html[dir="rtl"] .scenario-container[lang="nl"] .btn-answer {
  text-align: left;
}
html[dir="rtl"] .scenario-container[lang="nl"] .answer-letter {
  margin-right: 1rem;
  margin-left: 0;
}
html[dir="rtl"] .scenario-container[lang="nl"] .question-text,
html[dir="rtl"] .scenario-container[lang="nl"] .scene-text,
html[dir="rtl"] .scenario-container[lang="nl"] .explanation-text {
  text-align: left;
}