/* ===================== Ilm for Kids — Homepage Games Room styles ===================== */
/* Scoped to the game modal content; relies on --night, --night-2, --gold, --gold-dark,
   --cream, --paper, --line, --ink, --ink-soft, --radius, --radius-sm from styles.css. */

#modal .modal-box{max-width:560px;max-height:85vh;overflow-y:auto;}

.game-wrap{text-align:left;}
.game-eyebrow{font-size:.78rem;letter-spacing:.06em;font-weight:700;color:var(--gold-dark);margin:0 0 .3rem;}
.game-title{font-family:'Fredoka',sans-serif;font-size:1.3rem;color:var(--night);margin:0 0 .6rem;}
.game-sub{color:var(--ink-soft);font-size:.9rem;margin:0 0 1rem;}
.game-win{color:var(--gold-dark);font-weight:700;margin-top:1rem;text-align:center;}
.game-score{font-family:'Fredoka',sans-serif;font-size:1.6rem;color:var(--night);margin:.4rem 0 1.2rem;}

.game-finish-btn{
  margin-top:1rem;width:100%;border-radius:999px;padding:.75rem 1.2rem;
  font-weight:700;font-family:'Fredoka',sans-serif;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--night) 0%,var(--night-2) 70%,var(--gold-dark) 150%);
  color:var(--cream);box-shadow:0 5px 0 var(--night-2);transition:transform .15s ease;
}
.game-finish-btn:disabled{opacity:.45;cursor:not-allowed;}
.game-finish-btn:not(:disabled):hover{transform:translateY(-2px);}

/* Match the Dua */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.match-col{display:flex;flex-direction:column;gap:.5rem;}
.match-card{
  text-align:left;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.6rem .8rem;font-size:.85rem;
  color:var(--ink);cursor:pointer;font-family:inherit;transition:.15s;
}
.match-card:hover{border-color:var(--gold);}
.match-card.picked{border-color:var(--night);box-shadow:0 0 0 2px var(--night) inset;}
.match-card.matched{background:#CFE4D6;border-color:#2F6B45;color:#2F5B3E;cursor:default;font-weight:600;}
.match-card.shake{animation:ilmShake .35s;}

@keyframes ilmShake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}

/* Build the Salah */
.salah-steps{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;}
.salah-step{
  text-align:left;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.65rem .9rem;font-size:.88rem;
  color:var(--ink);cursor:pointer;font-family:inherit;transition:.15s;
}
.salah-step:hover:not(:disabled){border-color:var(--gold);}
.salah-step.matched{background:#CFE4D6;border-color:#2F6B45;color:#2F5B3E;cursor:default;font-weight:600;}
.salah-step.shake{animation:ilmShake .35s;}
.salah-chosen{margin:0;padding-left:1.2rem;color:var(--ink-soft);font-size:.85rem;}
.salah-chosen li{margin-bottom:.2rem;}

/* Quiz (shared pattern with other pages) */
.quiz-question{margin-bottom:1.1rem;}
.quiz-question:last-child{margin-bottom:0;}
.quiz-q-text{font-weight:700;color:var(--night);margin:0 0 .5rem;font-size:.92rem;}
.quiz-options{display:flex;flex-direction:column;gap:.4rem;}
.quiz-option{
  text-align:left;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.55rem .8rem;cursor:pointer;
  font-family:inherit;font-size:.86rem;color:var(--ink-soft);transition:.15s;
}
.quiz-option:hover:not(:disabled){border-color:var(--gold);}
.quiz-option:disabled{cursor:default;}
.quiz-option.correct{background:#CFE4D6;border-color:#2F6B45;color:#2F5B3E;font-weight:700;}
.quiz-option.incorrect{background:#FBE7DA;border-color:var(--gold-dark);color:#8A4A17;}

/* Islamic Quest */
.quest-mode-grid{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:.5rem;}
.quest-mode-btn{
  display:flex;align-items:center;gap:.8rem;text-align:left;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.8rem 1rem;cursor:pointer;font-family:inherit;transition:.15s;
}
.quest-mode-btn:hover{border-color:var(--gold);transform:translateY(-1px);}
.quest-mode-icon{
  width:2.4rem;height:2.4rem;border-radius:999px;flex-shrink:0;
  background:var(--night);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:1.05rem;
}
.quest-mode-label{font-weight:700;color:var(--night);font-size:.95rem;}
.quest-scene-text{color:var(--ink);font-size:.95rem;line-height:1.5;margin:0 0 1rem;}
.quest-explain{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.7rem .9rem;font-size:.85rem;color:var(--ink-soft);margin:.8rem 0 0;
}

@media(max-width:520px){
  .match-grid{grid-template-columns:1fr;}
}