/* Bilgi Adası — oyun sayfalarının ortak iskeleti (HUD, başla/sonuç ekranı, Bilge balonu) */
html, body { height: 100%; overflow: hidden; }
body { touch-action: manipulation; }

.sahne {
  position: relative; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
  user-select: none; -webkit-user-select: none;
}

.hud {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 14px 0;
}
.hud-grup { display: flex; gap: 8px; align-items: center; }
.geri { text-decoration: none; }
.ilerleme { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.ilerleme i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 2px rgba(43,35,80,.14); }
.ilerleme i.dogru { background: var(--dogru); box-shadow: none; }
.ilerleme i.yanlis { background: var(--yanlis); box-shadow: none; }
.ilerleme i.simdi { background: #fff; box-shadow: 0 0 0 3px var(--vurgu, var(--tr)); }
@media (max-width: 420px) { .ilerleme { gap: 3px; } .ilerleme i { width: 9px; height: 9px; } }

.oyun-alan {
  position: relative; z-index: 3; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 14px max(16px, env(safe-area-inset-bottom));
  gap: 14px;
}
.oyun-alan[hidden] { display: none; }

.gorev {
  background: #fff; border-radius: 24px; padding: 10px 22px;
  font-size: clamp(1.3rem, 5vw, 1.9rem); font-weight: 800; line-height: 1.15; text-align: center;
  box-shadow: 0 8px 0 rgba(43,35,80,.14); max-width: 100%;
}
.gorev small { display: block; font-size: .55em; font-weight: 700; color: var(--metin-soluk); }

/* Bilge konuşma balonu (sol alt) */
.bilge {
  position: absolute; z-index: 8; left: 10px; bottom: 12px;
  display: flex; align-items: flex-end; gap: 4px; pointer-events: none;
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
}
.bilge.goster { opacity: 1; transform: translateY(0); }
.bilge .baykus { width: 68px; height: 68px; }
.bilge .balon-konusma { margin-bottom: 40px; font-size: 1.05rem; max-width: 240px; }

/* Başla / sonuç ekranları */
.ekran {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center; padding: 16px;
  background: rgba(43, 35, 80, .35); backdrop-filter: blur(3px);
}
.ekran[hidden] { display: none; }
.kutu {
  background: var(--zemin); border-radius: 30px; padding: 22px 22px 26px;
  width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  text-align: center; box-shadow: 0 10px 0 rgba(0,0,0,.2);
}
.kutu h1 { margin: 0; font-size: 2.2rem; line-height: 1.05; }
.kutu .alt { color: var(--metin-soluk); margin: 6px 0 16px; font-weight: 600; font-size: 1.05rem; }
.kutu .baykus { margin: 0 auto -6px; width: 96px; height: 96px; }
.seviyeler { display: grid; gap: 12px; }
.seviye { font-size: 1.3rem; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.seviye small { display: block; font-size: .9rem; font-weight: 600; opacity: .9; }
.seviye .yy { color: #fff3c4; letter-spacing: 1px; white-space: nowrap; }
.kutu .butonlar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.puan-satir { font-weight: 800; font-size: 1.2rem; margin-top: 6px; }
.yeni-yildiz { color: var(--mat-koyu); font-weight: 800; }
.tekrar-liste { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.tekrar-liste span { background: #fff; border-radius: 12px; padding: 4px 12px; font-weight: 800; box-shadow: 0 3px 0 #e6def7; }

.sahne { background: linear-gradient(180deg, #a9e2ff 0%, #d9f3ff 55%, #fff6e6 100%); }

/* ---------- Sınıflandırma ---------- */
.sf-kart {
  background: #fff; border-radius: 28px; padding: 14px 30px 12px; min-width: 200px;
  text-align: center; box-shadow: 0 10px 0 rgba(43,35,80,.15);
}
.sf-kart.gel { animation: kartGel .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes kartGel { from { transform: scale(.5) translateY(-30px); opacity: 0; } }
.sf-emoji { font-size: clamp(3.4rem, 14vw, 5rem); line-height: 1.1; }
.sf-ad { font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight: 800; }
.sf-kutular { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 12px; width: min(760px, 100%); }
@media (max-width: 560px) { .sf-kutular { grid-template-columns: repeat(var(--n2), 1fr); } }
.sf-kutu {
  position: relative; border: 0; border-radius: 22px; padding: 10px 6px 12px;
  background: #fff; box-shadow: 0 6px 0 var(--k), inset 0 0 0 3px var(--k);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-weight: 800; font-size: 1.05rem; color: var(--metin);
  transition: transform .08s;
}
.sf-kutu:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--k), inset 0 0 0 3px var(--k); }
.sf-kutu-resim { font-size: 2.4rem; line-height: 1.1; min-height: 2.6rem; display: grid; place-items: center; }
.sf-kutu-resim svg { width: 84px; height: 84px; }
.sf-kutu-ad { line-height: 1.1; }
.sf-sayi {
  position: absolute; top: -8px; right: -6px; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 999px; background: var(--k); color: #fff; font-size: .95rem; line-height: 28px;
  transform: scale(0); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.sf-sayi.var { transform: scale(1); }
.sf-tus { position: absolute; left: 10px; top: 6px; font-size: .75rem; opacity: .35; }
.sf-kutu.ipucu { animation: ipucuNabiz .7s ease-in-out infinite; }
@keyframes ipucuNabiz { 50% { background: #fff3c4; transform: scale(1.04); } }
.sf-kutu.zipla { animation: zipla2 .4s; }
@keyframes zipla2 { 40% { transform: translateY(-8px) scale(1.05); } }

/* ---------- Eşleştirme ---------- */
.es-acik { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(640px, 100%); }
.es-sutun { display: flex; flex-direction: column; gap: 10px; }
.es-kart {
  border: 0; border-radius: 18px; padding: 10px 12px; background: #fff; color: var(--metin);
  box-shadow: 0 5px 0 #d9d3ee; font-weight: 800; font-size: clamp(1rem, 4.2vw, 1.3rem);
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px;
  transition: transform .1s, background .2s, opacity .3s;
}
.es-kart:active { transform: translateY(3px); }
.es-emoji { font-size: 1.8em; line-height: 1; }
.es-kart.secili { background: var(--vurgu); color: #fff; box-shadow: 0 5px 0 var(--vurgu-koyu); }
.es-kart.hata { background: var(--yanlis); color: #fff; box-shadow: 0 5px 0 #d63a4e; }
.es-acik .es-kart.bulundu { background: var(--dogru); color: #fff; box-shadow: 0 5px 0 var(--hb-koyu); opacity: .55; cursor: default; }

.es-hafiza { display: grid; grid-template-columns: repeat(var(--s), 1fr); gap: 10px; width: min(560px, 100%); }
.es-hafiza .es-kart { aspect-ratio: 1; min-height: 0; padding: 4px; position: relative; flex-direction: column; font-size: clamp(.8rem, 3.4vw, 1.1rem); }
.es-hafiza .es-kart .on { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; line-height: 1.05; }
.es-hafiza .es-kart .arka { display: none; }
.es-hafiza .es-kart.kapali { background: var(--vurgu); box-shadow: 0 5px 0 var(--vurgu-koyu); }
.es-hafiza .es-kart.kapali .on { display: none; }
.es-hafiza .es-kart.kapali .arka { display: block; color: #fff; font-size: 2rem; opacity: .7; }
.es-hafiza .es-kart:not(.kapali) { animation: cevir .25s; }
@keyframes cevir { from { transform: rotateY(90deg); } }
.es-hafiza .es-kart.bulundu { background: #e7f9ee; box-shadow: 0 5px 0 var(--dogru); }

/* ---------- Sıralama ---------- */
.sr-resim { font-size: 1.6em; margin-right: 8px; vertical-align: -.15em; }
.sr-yuvalar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: flex-end; max-width: 100%; }
.sr-yuva {
  min-width: 70px; min-height: 64px; padding: 6px 10px; border-radius: 16px;
  border: 3px dashed rgba(43,35,80,.25); background: rgba(255,255,255,.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; font-size: clamp(1rem, 4vw, 1.3rem); position: relative;
}
.sr-yuva small { position: absolute; top: 2px; left: 7px; font-size: .7rem; opacity: .45; }
.sr-yuva.dolu { border: 3px solid var(--vurgu); background: #fff; animation: zipla2 .3s; }
.sr-yuvalar.tamam .sr-yuva { border-color: var(--dogru); background: #e7f9ee; }
.sr-havuz { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 720px; }
.sr-kart {
  border: 0; border-radius: 18px; padding: 10px 16px; background: #fff; color: var(--metin);
  box-shadow: 0 5px 0 var(--vurgu); font-weight: 800; font-size: clamp(1.05rem, 4.4vw, 1.4rem);
  display: flex; flex-direction: column; align-items: center; min-width: 70px;
}
.sr-kart:active { transform: translateY(3px); }
.sr-kart.gitti { visibility: hidden; }
.sr-emoji { font-size: 1.7em; line-height: 1.1; }

/* Tren teması */
.sr-yuvalar.tren { flex-wrap: nowrap; gap: 4px; align-items: flex-end; overflow: visible; }
.lokomotif { font-size: clamp(2.8rem, 11vw, 4rem); line-height: 1; transform: scaleX(-1); margin-left: -6px; }
.tren .sr-yuva {
  min-width: clamp(58px, 17vw, 86px); min-height: clamp(50px, 13vw, 64px); border-radius: 10px 10px 4px 4px;
  border: 3px solid rgba(43,35,80,.2); background: rgba(255,255,255,.6); margin-bottom: 12px;
}
.tren .sr-yuva::before, .tren .sr-yuva::after {
  content: ""; position: absolute; bottom: -13px; width: 16px; height: 16px; border-radius: 50%;
  background: #2b2350; box-shadow: inset 0 0 0 4px #6b6390;
}
.tren .sr-yuva::before { left: 8px; } .tren .sr-yuva::after { right: 8px; }
.tren .sr-yuva.dolu { background: var(--vurgu); color: #fff; border-color: var(--vurgu-koyu); }
.sr-yuvalar.tren.tamam { animation: trenGit 1.4s ease-in forwards .2s; }
.sr-yuvalar.tren.tamam .sr-yuva { background: var(--dogru); border-color: var(--hb-koyu); color: #fff; }
@keyframes trenGit { 20% { transform: translateX(-10px); } 100% { transform: translateX(110vw); } }
/* Ray: trenin hemen altında */
.sr-yuvalar.tren { position: relative; padding-bottom: 8px; }
.sr-yuvalar.tren::after {
  content: ""; position: absolute; left: -40vw; right: -40vw; bottom: 0; height: 8px; z-index: -1;
  background: repeating-linear-gradient(90deg, #8b5a2b 0 10px, transparent 10px 22px), linear-gradient(#6b6390, #6b6390) top / 100% 3px no-repeat;
}
.sr-yuvalar.tren.tamam::after { display: none; }