/* Memory Kartları — koyu tema (3-Word Challenge ile aynı renk paleti).
   5. ve 6. sınıf 1. tema sayfaları için; 8. sınıf sürümü (memory1.css,
   açık/mor tema) bu dosyadan bağımsız ve dokunulmadı. */

:root{
  --bg-1:#07111f;
  --bg-2:#101a33;
  --panel:rgba(13,22,42,.72);
  --panel-strong:rgba(14,24,47,.92);
  --text:#f7fbff;
  --muted:#aebbd0;
  --line:rgba(255,255,255,.12);

  --accent:#e53935;
  --accent-2:#ff6f61;
  --good:#26d98b;
  --bad:#ff5d73;
  --warn:#ffbf4b;

  --shadow:0 20px 50px rgba(0,0,0,.4);
}

*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }

body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align:center;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 8%, rgba(229,57,53,.20), transparent 28rem),
    radial-gradient(circle at 90% 0%, rgba(255,111,97,.13), transparent 25rem),
    linear-gradient(145deg,var(--bg-1),var(--bg-2));
  min-height:100svh;
  -webkit-user-select:none; user-select:none;
}

h1{ margin:54px 0 6px; font-size:clamp(20px,3.4vw,28px); font-weight:900; letter-spacing:-.01em; }

#start-area, #scoreboard, #timer{ margin:10px auto; max-width:90%; }

#timer{
  display:inline-block;
  padding:6px 16px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--muted);
  font-weight:800;
  font-size:.85em;
}

input, select{ font-family:inherit; }

button{ font-family:inherit; }

/* ── Başlangıç kartı ── */
.mg-start-card{
  background:var(--panel-strong);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:26px 22px 22px;
  max-width:420px;
  margin:18px auto;
}
.mg-start-card h2{ margin:0 0 4px; font-size:1.3em; color:var(--accent-2); }

.mg-field{ display:flex; flex-direction:column; gap:6px; text-align:left; margin-bottom:14px; }
.mg-field label{ font-weight:800; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.mg-field .control{ width:100%; min-width:0; margin:0; }
.mg-field-row{ flex-direction:row; align-items:flex-end; gap:10px; }
.mg-subfield{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.mg-subfield label{ font-weight:800; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.mg-subfield-grow{ flex:1; min-width:0; }

.mg-unit-badge{
  display:flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; border-radius:999px; box-sizing:border-box;
  background:rgba(229,57,53,.14);
  border:1px solid rgba(229,57,53,.4);
  color:var(--accent-2); font-weight:800; font-size:14px; white-space:nowrap;
}

.control{
  height:44px; min-width:180px; padding:0 14px;
  font:600 15px/1.2 inherit;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  transition:.2s ease;
  appearance:none;
}
.control:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(229,57,53,.25); }
.control:hover{ border-color:rgba(255,255,255,.3); }
.control::placeholder{ color:var(--muted); }

.mg-level-row{ display:flex; gap:8px; flex-wrap:wrap; }
.level-btn{
  flex:1; min-width:0; height:44px; padding:0 8px;
  border-radius:12px; border:1px solid var(--line); cursor:pointer;
  background:rgba(255,255,255,.05); color:var(--text);
  font:700 14px/1 inherit; transition:.2s ease;
}
.level-btn:hover{ border-color:rgba(255,255,255,.35); }
.level-btn.selected{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:var(--accent); color:#fff;
  box-shadow:0 6px 18px rgba(229,57,53,.35);
}

.start-btn{
  width:100%; margin:8px 0 0; min-width:0;
  padding:13px 16px; font-size:1em; font-weight:900;
  color:#fff; border:0; cursor:pointer; border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 12px 30px rgba(229,57,53,.35);
  transition:.2s ease;
}
.start-btn:hover{ filter:brightness(1.06); }
.start-btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* ── Oyun tahtası ── */
#game-board{ display:flex; flex-wrap:wrap; justify-content:center; padding:14px; gap:10px; }

.card{
  perspective:900px; cursor:pointer;
  width:22vw; height:15vw; max-width:90px; max-height:70px; margin:0;
  transition:transform .2s ease;
}
.card:not(.matched):hover{ transform:translateY(-4px); }

.card-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.3,1.05);
}
.card.revealed .card-inner, .card.matched .card-inner{ transform:rotateY(180deg); }

.card-face{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden;
  border-radius:14px;
  padding:4px;
  text-align:center;
  font-weight:800;
  overflow:hidden;
}

/* Kartın kapalı yüzü: sembol yok, sıcak tonlu ışıltılı bir dalga + kayan
   parlama şeridi ile "üst düzey" bir görünüm. Açık zeminde, koyu arka
   planın üstünde göz alıcı biçimde parlasın diye tasarlandı. */
.card-back{
  background:linear-gradient(135deg,#fffdf5 0%,#ffe08a 45%,#c9840c 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(201,132,0,.3),
    0 12px 24px rgba(0,0,0,.4),
    0 0 26px rgba(246,185,26,.4);
}

.card-front{
  background:linear-gradient(145deg,#ffffff,#eef1f7);
  color:#16222f;
  transform:rotateY(180deg);
  border:1px solid rgba(255,255,255,.7);
  font-size:.78em;
  line-height:1.15;
  overflow-wrap:anywhere;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 0 0 1px rgba(255,255,255,.4),
    0 8px 18px rgba(0,0,0,.35),
    0 0 18px rgba(255,111,97,.18);
}

.card.matched .card-front{
  background:linear-gradient(145deg,#eafff5,var(--good));
  color:#04261a;
  border-color:rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 0 0 1px rgba(38,217,139,.4),
    0 10px 20px rgba(0,0,0,.35),
    0 0 24px rgba(38,217,139,.5);
}

.card.mismatch .card-front{
  border:2px solid var(--bad);
  box-shadow:0 0 0 4px rgba(255,93,115,.25), 0 0 22px rgba(255,93,115,.4);
}
.card.mismatch .card-inner{ animation:cardShake .4s ease; }
@keyframes cardShake{
  20%,60%{ transform:rotateY(180deg) translateX(-4px); }
  40%,80%{ transform:rotateY(180deg) translateX(4px); }
}

@media (min-width:768px){
  #game-board{ display:grid; justify-content:center; gap:14px; padding:20px; }
  .card{ width:120px; height:82px; font-size:.9rem; margin:0; }
  #game-board.easy-grid{ grid-template-columns:repeat(4,120px); }
  #game-board.medium-grid{ grid-template-columns:repeat(6,120px); }
  #game-board.hard-grid{ grid-template-columns:repeat(6,120px); }
  #game-board.all-grid{ grid-template-columns:repeat(6,120px); }
}
@media (min-width:1024px){
  .card{ font-size:1em; }
}

/* ── Modallar / overlay'ler ── */
.mg-modal-overlay{
  position:fixed; inset:0; z-index:3000;
  background:rgba(3,8,16,.78);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.mg-modal-overlay[hidden]{ display:none; }
.mg-modal-box{
  background:var(--panel-strong);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px 24px; max-width:380px; width:100%;
  text-align:center; box-shadow:var(--shadow);
}
.mg-modal-box h3{ margin:0 0 8px; color:var(--accent-2); }
.mg-modal-box p{ color:var(--text); }
.mg-modal-box .mg-restart-btn{ width:100%; margin-top:18px; }

.mg-restart-row{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:0 0 8px; }
.mg-restart-btn{
  padding:9px 16px; border-radius:10px; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  font:700 13px/1 inherit;
}
.mg-restart-btn:hover{ filter:brightness(1.06); }
.mg-restart-btn-secondary{
  background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--line);
}
.mg-restart-btn-secondary:hover{ border-color:rgba(255,255,255,.3); filter:none; }

.mg-score-table{ width:100%; border-collapse:collapse; font-size:13px; }
.mg-score-table th, .mg-score-table td{ padding:7px 8px; text-align:left; border-bottom:1px solid var(--line); color:var(--text); }
.mg-score-table th{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.mg-score-table tbody tr:last-child td{ border-bottom:none; }
.mg-score-table tbody tr:nth-child(1) td:first-child{ color:var(--warn); font-weight:900; }

.top3-box{
  position:sticky; bottom:0;
  background:rgba(10,17,33,.92);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
  padding:12px 16px;
  max-width:900px;
  margin:12px auto;
  border-radius:14px 14px 0 0;
  box-shadow:0 -8px 26px rgba(0,0,0,.3);
}
.top3-box h4{ margin:0 0 8px; font-weight:800; color:var(--muted); }

.top3-tabs{ display:flex; gap:6px; justify-content:center; margin:0 0 10px; }
.top3-tab-btn{
  flex:1; max-width:110px;
  padding:7px 10px;
  border-radius:9px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font:700 12px/1 inherit;
  cursor:pointer;
  transition:.2s ease;
}
.top3-tab-btn:hover{ border-color:rgba(255,255,255,.3); }
.top3-tab-btn.selected{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 4px 14px rgba(229,57,53,.35);
}

/* ── Sıfırlama alanı ── */
#reset-area{ margin-top:10px; }
#resetBtn{
  padding:8px 16px; border-radius:10px; border:1px solid rgba(255,93,115,.4); cursor:pointer;
  background:rgba(255,93,115,.14); color:#ffb3bd; font:700 12px/1 inherit;
}
#resetBtn:hover{ background:rgba(255,93,115,.24); color:#fff; }
#reset-quiz{ color:var(--text); }
#reset-quiz input{
  margin:6px 0; padding:8px 12px; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.06); color:var(--text); font-size:14px;
}
#reset-quiz button{
  padding:7px 14px; border-radius:9px; border:0; cursor:pointer; margin-left:6px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font:700 12px/1 inherit;
}
#resetFeedback{ margin-top:6px; font-size:12px; color:var(--bad); font-weight:700; }

/* ── Üst köşe kontrolleri ── */
.mg-back-link{
  position:fixed; top:12px; left:12px; z-index:9999;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  background:var(--panel-strong);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  font:700 14px/1.2 inherit;
  color:var(--accent-2); text-decoration:none;
}
.mg-back-link:hover, .mg-back-link:focus-visible{ border-color:rgba(255,255,255,.3); }
.mg-fs-btn{
  position:fixed; top:12px; right:12px; z-index:9999;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0;
  background:var(--panel-strong);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  font-size:17px; color:var(--accent-2); cursor:pointer;
}
.mg-fs-btn:hover{ border-color:rgba(255,255,255,.3); }

@media (max-width:767px){
  .mg-fs-btn{ position:static; display:inline-flex; margin:0 0 10px 8px; width:34px; height:34px; font-size:15px; }
  .mg-back-link{ position:static; display:inline-flex; margin:0 0 10px; padding:6px 12px; font-size:12px; }
  h1{ margin-top:14px; }
}

/* ── Dondurma (freeze) uyarısı: kolay modda art arda hata ── */
.freeze-overlay{
  position:fixed; inset:0; display:none; place-items:center; z-index:1000;
  background:rgba(3,8,16,.82); backdrop-filter:blur(2px);
}
.freeze-overlay.show{ display:grid; }
.freeze-card{
  background:var(--panel-strong);
  border:2px solid var(--bad);
  border-radius:20px;
  padding:22px 24px; text-align:center;
  box-shadow:var(--shadow);
  width:min(520px,92vw);
}
.freeze-card h2{ margin:6px 0 8px; color:#ffb3bd; }
.freeze-count{ font-weight:900; color:var(--bad); font-size:clamp(48px,12vw,84px); line-height:1; margin:2px 0 8px; text-shadow:0 6px 0 rgba(0,0,0,.4); }
.freeze-note{ margin:0; color:var(--text); font-weight:700; }

#page-footer{ text-align:center; font-size:.85em; color:var(--muted); padding:20px 0; margin-top:20px; }
#page-footer a{ color:var(--accent-2); }