/* ═══════════════════════════════════════════════════════
   GAMES / GAMES — تصميم الألعاب المحسن
   ═══════════════════════════════════════════════════════ */

/* ── بطاقات الألعاب المحسّنة ── */
.game-card-enhanced {
  background: var(--sur);
  border: 1.5px solid var(--brd);
  border-radius: var(--radius);
  padding: 16px 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.game-card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.game-card-enhanced:active {
  transform: scale(0.97);
}

.game-card-enhanced .gc-icon {
  font-size: 2rem;
  margin-bottom: 4px;
}

.game-card-enhanced .gc-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--txt);
}

.game-card-enhanced .gc-desc {
  font-size: .45rem;
  color: var(--muted);
  margin-top: 2px;
}

.game-card-enhanced .gc-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: .35rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
}

/* ── ألوان مخصصة لكل لعبة ── */
.game-card-enhanced.type-flash {
  background: linear-gradient(135deg, var(--v-bg), rgba(88, 166, 255, 0.05));
  border-color: var(--v-brd);
}
.game-card-enhanced.type-flash .gc-title { color: var(--v); }
.game-card-enhanced.type-flash .gc-badge { background: var(--v-bg); color: var(--v); border: 1px solid var(--v-brd); }

.game-card-enhanced.type-due {
  background: linear-gradient(135deg, var(--gold-bg), rgba(227, 179, 65, 0.05));
  border-color: var(--d-brd);
}
.game-card-enhanced.type-due .gc-title { color: var(--gold); }
.game-card-enhanced.type-due .gc-badge { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--d-brd); }

.game-card-enhanced.type-quiz {
  background: linear-gradient(135deg, var(--a-bg), rgba(130, 80, 223, 0.05));
  border-color: var(--a-brd);
}
.game-card-enhanced.type-quiz .gc-title { color: var(--a); }
.game-card-enhanced.type-quiz .gc-badge { background: var(--a-bg); color: var(--a); border: 1px solid var(--a-brd); }

.game-card-enhanced.type-writing {
  background: linear-gradient(135deg, var(--n-bg), rgba(26, 127, 55, 0.05));
  border-color: var(--n-brd);
}
.game-card-enhanced.type-writing .gc-title { color: var(--n); }
.game-card-enhanced.type-writing .gc-badge { background: var(--n-bg); color: var(--n); border: 1px solid var(--n-brd); }

.game-card-enhanced.type-scramble {
  background: linear-gradient(135deg, var(--d-bg), rgba(191, 135, 0, 0.05));
  border-color: var(--d-brd);
}
.game-card-enhanced.type-scramble .gc-title { color: var(--d); }
.game-card-enhanced.type-scramble .gc-badge { background: var(--d-bg); color: var(--d); border: 1px solid var(--d-brd); }

.game-card-enhanced.type-speed {
  background: linear-gradient(135deg, var(--p-bg), rgba(207, 34, 46, 0.05));
  border-color: var(--p-brd);
}
.game-card-enhanced.type-speed .gc-title { color: var(--p); }
.game-card-enhanced.type-speed .gc-badge { background: var(--p-bg); color: var(--p); border: 1px solid var(--p-brd); }

.game-card-enhanced.type-memory {
  background: linear-gradient(135deg, #e0f2fe, rgba(2, 132, 199, 0.05));
  border-color: #7dd3fc;
}
.game-card-enhanced.type-memory .gc-title { color: #0284c7; }
.game-card-enhanced.type-memory .gc-badge { background: #e0f2fe; color: #0284c7; border: 1px solid #7dd3fc; }

.game-card-enhanced.type-guess {
  background: linear-gradient(135deg, #fef3c7, rgba(217, 119, 6, 0.05));
  border-color: #fcd34d;
}
.game-card-enhanced.type-guess .gc-title { color: #d97706; }
.game-card-enhanced.type-guess .gc-badge { background: #fef3c7; color: #d97706; border: 1px solid #fcd34d; }

.game-card-enhanced.type-match {
  background: linear-gradient(135deg, #fce4ec, rgba(190, 24, 93, 0.05));
  border-color: #f48fb1;
}
.game-card-enhanced.type-match .gc-title { color: #be185d; }
.game-card-enhanced.type-match .gc-badge { background: #fce4ec; color: #be185d; border: 1px solid #f48fb1; }

.game-card-enhanced.type-typing {
  background: linear-gradient(135deg, #e0f7fa, rgba(0, 150, 136, 0.05));
  border-color: #80cbc4;
}
.game-card-enhanced.type-typing .gc-title { color: #009688; }
.game-card-enhanced.type-typing .gc-badge { background: #e0f7fa; color: #009688; border: 1px solid #80cbc4; }

/* ── MATCH GAME ── */
.match-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.match-card {
  background: var(--sur);
  border: 2px solid var(--brd);
  border-radius: var(--rsm);
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  font-size: .7rem;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh);
}
.match-card.sel {
  border-color: var(--v);
  background: var(--v-bg);
  color: var(--v);
}
.match-card.ok {
  border-color: var(--n);
  background: var(--n-bg);
  color: var(--n);
  pointer-events: none;
}
.match-card.err {
  border-color: var(--p);
  background: var(--p-bg);
  animation: shake_ .3s ease;
}
@keyframes shake_ {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ── TYPING GAME ── */
.type-input {
  width: 100%;
  padding: 10px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem;
  font-weight: 700;
  background: var(--sur2);
  border: 2px solid var(--brd);
  border-radius: var(--rsm);
  color: var(--txt);
  outline: none;
  text-align: center;
  direction: ltr;
  letter-spacing: .1em;
  transition: border-color var(--t);
}
.type-input:focus {
  border-color: var(--v);
  box-shadow: 0 0 0 3px var(--v-bg);
}
.type-input.ok {
  border-color: var(--n);
  background: var(--n-bg);
}
.type-input.err {
  border-color: var(--p);
  background: var(--p-bg);
  animation: shake_ .3s ease;
}

/* ── SCRAMBLE GAME ── */
.scramble-letters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 12px 0;
}
.scr-tile {
  width: 36px;
  height: 36px;
  border-radius: var(--rsm);
  background: var(--v-bg);
  border: 2px solid var(--v-brd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .85rem;
  font-weight: 700;
  color: var(--v);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.scr-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh);
}
.scr-tile:active {
  transform: scale(.9);
}
.scr-tile.used {
  background: var(--brd);
  border-color: var(--brd2);
  color: var(--muted);
  cursor: not-allowed;
}
.scr-slots {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0 14px;
}
.scr-slot {
  width: 36px;
  height: 36px;
  border-radius: var(--rsm);
  background: var(--sur2);
  border: 2px dashed var(--brd2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .85rem;
  font-weight: 700;
  color: var(--txt);
  cursor: pointer;
  transition: all .15s;
}
.scr-slot.filled {
  background: var(--n-bg);
  border-style: solid;
  border-color: var(--n-brd);
  color: var(--n);
}

/* ── SPEED QUIZ ── */
.speed-timer {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  margin: 8px 0;
}
.speed-bar {
  height: 8px;
  background: var(--brd);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 12px;
}
.speed-fill {
  height: 100%;
  border-radius: 20px;
  transition: width .1s linear;
}
.speed-score {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: .6rem;
  font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 10px;
}
/* ═══ لعبة بناء الكلمات ═══ */
.gb-tile {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  font-weight: 800;
  background: var(--sur);
  border: 1.5px solid var(--v-brd);
  color: var(--v);
  border-radius: var(--rsm);
  padding: 8px 14px;
  cursor: pointer;
  transition: transform .12s, background .12s;
}
.gb-tile:hover { transform: translateY(-2px); background: var(--v-bg); }
.gb-word {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .6rem;
  font-weight: 700;
  background: var(--n-bg);
  color: var(--n);
  border: 1px solid var(--n-brd);
  border-radius: 20px;
  padding: 3px 10px;
}
.gb-word.miss { background: var(--sur2); color: var(--muted); border-color: var(--brd); text-decoration: line-through; }

/* ═══ لعبة توقّع المعنى (المعلم الافتراضي) ═══ */
.gp-opt {
  background: var(--sur);
  border: 1.5px solid var(--brd);
  border-radius: var(--rsm);
  padding: 12px;
  cursor: pointer;
  font-size: .68rem;
  font-weight: 700;
  color: var(--txt);
  transition: border-color .15s, background .15s;
  text-align: center;
}
.gp-opt:hover:not(:disabled) { border-color: var(--v); }
.gp-opt.ok { border-color: var(--n); background: var(--n-bg); }
.gp-opt.bad { border-color: var(--p); background: var(--p-bg); }

/* ═══ بطاقة اللعبة الموحّدة — بديل 15 كتلة inline مكررة ═══ */
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 768px) {
  .games-grid { grid-template-columns: repeat(3, 1fr); }
}
.game-tile {
  background: linear-gradient(135deg, var(--gbg), transparent);
  border: 1.5px solid var(--gbr);
  border-radius: var(--radius, var(--r));
  padding: 16px 14px;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow, var(--sh));
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.game-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover, var(--sh2));
}
.game-tile:active { transform: translateY(-1px); }
.game-tile-ic { font-size: 2rem; margin-bottom: 4px; }
.game-tile-t { font-size: .7rem; font-weight: 700; color: var(--gc); }
.game-tile-d { font-size: .48rem; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.game-tile-b {
  display: inline-block;
  margin-top: 7px;
  font-size: .4rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 12px;
  background: var(--gbg);
  color: var(--gc);
  border: 1px solid var(--gbr);
}