/* ============================================================
   HAFIZA KARTLARI — oyun sayfası stilleri
   ============================================================ */
.mm-page { padding: 16px 16px 36px; display: flex; justify-content: center; }
#mm { width: 100%; max-width: 680px; display: flex; flex-direction: column; align-items: center; }
.mm-head { width: 100%; display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; gap: 8px; }
.mm-head > .icon-btn { justify-self: start; }
.mm-titles { text-align: center; }
.mm-titles h1 { font-size: 28px; margin: 0; }
.mm-titles p { margin: 4px 0 0; color: var(--ink-dim); font-size: 14px; }

/* Seviyeler */
#mm-levels { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.mm-lv {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-dim);
  font-family: "Fredoka", sans-serif; font-size: 14px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mm-lv small { font-size: 11px; opacity: 0.7; }
.mm-lv:hover { border-color: var(--violet); color: var(--ink); }
.mm-lv.active { background: var(--violet); border-color: var(--violet); color: #fff; }
.mm-lv-stars { position: absolute; top: -9px; right: 6px; font-style: normal; font-size: 10px; letter-spacing: -1px; color: #ffcc33; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* Üst bilgi */
#mm-hud { width: 100%; max-width: 520px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 10px; margin: 14px 0 12px; }
.mm-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.mm-stat small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.mm-stat b { font-family: "Fredoka", sans-serif; font-size: 22px; color: var(--ink); }
#mm-restart {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px dashed var(--violet); background: transparent; color: var(--violet-bright);
  font-family: "Fredoka", sans-serif; font-size: 14px; cursor: pointer;
}
#mm-restart:hover { background: var(--badge-bg); }

/* Masa */
.mm-board { position: relative; display: flex; justify-content: center; }
#mm-grid {
  --c: 4; --r: 3; --gap: 8px; --ratio: 0.66;
  --cw: min(
    calc((min(94vw, 640px) - 24px - (var(--c) - 1) * var(--gap)) / var(--c)),
    calc((100dvh - 300px - (var(--r) - 1) * var(--gap)) / var(--r) * var(--ratio)),
    132px
  );
  display: grid;
  grid-template-columns: repeat(var(--c), max(var(--cw), 46px));
  gap: var(--gap);
  padding: 12px;
  border-radius: 22px;
  background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.18), transparent 70%), var(--bg-soft);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

.mm-card {
  position: relative;
  aspect-ratio: var(--ratio);
  padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 700px;
  animation: mm-deal 0.45s cubic-bezier(.34,1.4,.64,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes mm-deal { from { opacity: 0; transform: translateY(-14px) scale(0.8) rotate(-6deg); } }
.mm-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(.4, 1.3, .6, 1);
}
.mm-card.up .mm-inner { transform: rotateY(180deg); }
.mm-card:not(.up):hover .mm-inner { transform: translateY(-3px) rotate(-1.5deg); }
.mm-back, .mm-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 12%/8%;
}
.mm-back {
  background: url("/assets/memory/back.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}
.mm-face {
  transform: rotateY(180deg);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #fff 0%, color-mix(in srgb, var(--bg) 45%, #fff) 55%, var(--bg) 100%);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 -6px 0 rgba(0, 0, 0, 0.08);
}
.mm-face img { width: 86%; height: auto; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,0.2)); }

.mm-card.got { cursor: default; }
.mm-card.got .mm-face {
  border-color: #ffcc33;
  box-shadow: 0 0 0 2px rgba(255, 204, 51, 0.5), 0 0 18px rgba(255, 204, 51, 0.55);
  animation: mm-got 0.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mm-got { 0% { transform: rotateY(180deg) scale(1); } 40% { transform: rotateY(180deg) scale(1.16) rotate(-4deg); } 70% { transform: rotateY(180deg) scale(0.96) rotate(3deg); } 100% { transform: rotateY(180deg) scale(1); } }
.mm-card.miss .mm-face { border-color: #ff6b8a; animation: mm-miss 0.4s ease; }
@keyframes mm-miss { 0%, 100% { transform: rotateY(180deg); } 25%, 75% { transform: rotateY(180deg) translateX(-4px); } 50% { transform: rotateY(180deg) translateX(4px); } }

#mm-grid.win .mm-card .mm-face { animation: mm-wave 0.7s ease-in-out both; animation-delay: var(--d, 0ms); }
@keyframes mm-wave { 50% { transform: rotateY(180deg) translateY(-10px) scale(1.06); } }

/* Ezber yazısı ve isim balonu */
#mm-peek {
  position: absolute; top: -16px; left: 50%; transform: translate(-50%, -6px) scale(0.9); z-index: 6;
  padding: 6px 16px; border-radius: 999px;
  background: var(--violet); color: #fff;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
#mm-peek.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#mm-peek.go { background: #4abf8c; box-shadow: 0 8px 20px rgba(74, 191, 140, 0.45); }

#mm-bubble {
  position: absolute; top: 50%; left: 50%; z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 22px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.95); color: #2a1a5e;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
}
#mm-bubble b { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 28px; line-height: 1.1; }
#mm-bubble span { font-family: "Fredoka", sans-serif; font-size: 14px; color: #e0560b; }
#mm-bubble.show { animation: mm-bubble 1.3s ease both; }
@keyframes mm-bubble {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  28%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.95); }
}

#mm-toast {
  position: fixed; top: 96px; left: 50%; transform: translate(-50%, -10px); z-index: 4600;
  background: var(--ink); color: var(--bg);
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px;
  padding: 10px 18px; border-radius: 12px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
#mm-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Pencereler */
.mm-modal { position: fixed; inset: 0; z-index: 4500; background: rgba(6, 4, 14, 0.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: mm-fade 0.25s ease-out; }
@keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }
.mm-mcard {
  position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.25), transparent 70%), var(--bg-soft);
  border: 1px solid var(--line); border-radius: 22px; padding: 24px 22px 20px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: mm-card-in 0.35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mm-card-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mm-mcard.end { animation: mm-end-in 0.6s cubic-bezier(.22, 1.2, .36, 1) both; }
@keyframes mm-end-in { 0% { transform: scale(1.9); opacity: 0; filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: scale(1); opacity: 1; } }
.mm-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); cursor: pointer; }
.mm-mcard h3 { font-size: 24px; margin: 6px 0 8px; }

/* Tanıtım: iki kart dönüp eşleşiyor */
.mm-demo { display: inline-flex; gap: 12px; margin: 4px 0 2px; }
.mm-dc { position: relative; width: 58px; aspect-ratio: 0.66; perspective: 500px; }
.mm-dc .mm-inner { animation: mm-demo-flip 3s ease-in-out infinite; }
.mm-dc.d2 .mm-inner { animation-name: mm-demo-flip2; }
.mm-dc .mm-face { border-width: 2px; }
@keyframes mm-demo-flip { 0%, 10% { transform: rotateY(0); } 20%, 85% { transform: rotateY(180deg); } 95%, 100% { transform: rotateY(0); } }
@keyframes mm-demo-flip2 { 0%, 30% { transform: rotateY(0); } 40%, 85% { transform: rotateY(180deg); } 95%, 100% { transform: rotateY(0); } }
.mm-how { list-style: none; padding: 0; margin: 10px 0 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.mm-how li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-dim); font-size: 14.5px; }
.mm-how li span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--violet); color: #fff; font-family: "Fredoka", sans-serif; font-size: 14px; }
.mm-go { font-size: 17px; padding: 13px 32px; }

/* Sonuç */
.mm-end-stars { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.mm-end-stars i { font-style: normal; font-size: 46px; line-height: 1; color: rgba(255, 255, 255, 0.15); }
.mm-end-stars i.on { color: #ffcc33; text-shadow: 0 0 16px rgba(255, 204, 51, 0.6); animation: mm-star 0.5s cubic-bezier(.34,1.8,.64,1) both; animation-delay: calc(0.45s + var(--i) * 0.22s); }
.mm-end-stars i:nth-child(2) { font-size: 58px; transform: translateY(-6px); }
.mm-end-stars i.on:nth-child(2) { --y: -6px; }
@keyframes mm-star { from { transform: translateY(var(--y, 0)) scale(0) rotate(-90deg); opacity: 0; } to { transform: translateY(var(--y, 0)) scale(1) rotate(0); opacity: 1; } }
.mm-end-level { color: var(--violet-bright); font-family: "Fredoka", sans-serif; font-size: 14px; margin: 0 0 8px; }
.mm-end-moves { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 10px; }
.mm-end-moves b { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 50px; line-height: 1; color: var(--ink); }
.mm-end-moves span { color: var(--ink-dim); font-size: 15px; }
.mm-end-moves em { font-style: normal; font-family: "Fredoka", sans-serif; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #4abf8c; color: #fff; align-self: center; }
.mm-end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mm-end-stats div { display: flex; flex-direction: column; align-items: center; }
.mm-end-stats b { font-family: "Fredoka", sans-serif; font-size: 19px; color: var(--ink); }
.mm-end-stats span { font-size: 12px; color: var(--ink-faint); }
.mm-end-main { display: flex; gap: 10px; margin-bottom: 12px; }
.mm-end-main .btn { flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; }
.mm-end-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-sub {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 8px 12px; border-radius: 999px;
  border: 1.5px solid var(--line); background: rgba(139, 92, 246, 0.08);
  color: var(--ink); font-family: "Fredoka", sans-serif; font-size: 14.5px; line-height: 1.15;
  text-decoration: none; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.mm-sub svg { flex: none; width: 18px; height: 18px; color: var(--violet-bright); }
.mm-sub:hover { border-color: var(--violet); background: rgba(139, 92, 246, 0.2); transform: translateY(-2px); }
.mm-share-preview { text-align: left; white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--ink); margin: 6px 0 14px; }
.mm-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.mm-share-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-family: "Fredoka", sans-serif; font-size: 13px; text-decoration: none; cursor: pointer; }
.mm-share-btn .ic { font-size: 20px; height: 24px; display: inline-flex; align-items: center; }
.mm-share-btn svg { width: 22px; height: 22px; }
.mm-share-btn:hover { border-color: var(--violet); }

/* Seçilme olmasın */
.page:has(#mm) main, #mm, #mm *, .mm-modal, .mm-modal * { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.mm-share-preview { -webkit-user-select: text; user-select: text; }

@media (max-width: 640px) {
  .mm-page { padding-top: 10px; }
  .mm-titles h1 { font-size: 22px; }
  .mm-titles p { display: none; }
  #mm-levels { margin-top: 8px; }
  .mm-lv { padding: 5px 11px; font-size: 13px; }
  .mm-lv small { display: none; }
  #mm-hud { margin: 12px 0 8px; gap: 6px; }
  .mm-stat b { font-size: 19px; }
  #mm-restart-l { display: none; }
  #mm-restart { padding: 7px 11px; }
  #mm-grid {
    --gap: 6px; padding: 8px; border-radius: 16px;
    --cw: min(
      calc((100vw - 32px - 16px - (var(--c) - 1) * var(--gap)) / var(--c)),
      calc((100dvh - 250px - (var(--r) - 1) * var(--gap)) / var(--r) * var(--ratio))
    );
  }
  #mm-bubble b { font-size: 24px; }
  body:has(#mm) .egg-moon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-card, .mm-card.got .mm-face, #mm-grid.win .mm-card .mm-face, .mm-dc .mm-inner { animation: none; }
  .mm-inner { transition-duration: 0.01s; }
}


/* ---------- Sağ üst: yıldız / geçmiş düğmesi (Anagram tarzı) ---------- */
.mm-statsbox {
  justify-self: end;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 10px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink);
  font-family: "Fredoka", sans-serif; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.mm-statsbox:hover { border-color: var(--violet); transform: translateY(-2px); }
.mm-statsbox span { font-size: 15px; }
.mm-statsbox b { color: #ffcc33; }
.mm-statsbox small { font-size: 11px; color: var(--ink-dim); }

/* ---------- Geçmiş penceresi ---------- */
.mm-modal:has(.history) { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 4, 14, 0.84); }
.mm-mcard.history { width: min(480px, 100%); display: flex; flex-direction: column; overflow: hidden; padding-bottom: 14px; }
.mm-h-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
.mm-h-sum div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 14px; background: var(--bg-soft-2); border: 1px solid var(--line); }
.mm-h-sum b { font-family: "Fredoka", sans-serif; font-size: 22px; color: var(--ink); line-height: 1.1; }
.mm-h-sum span { font-size: 12px; color: var(--ink-faint); }
.mm-h-sum .gold { border-color: rgba(255, 204, 51, 0.6); background: linear-gradient(180deg, rgba(255, 204, 51, 0.16), rgba(255, 204, 51, 0.04)); }
.mm-h-sum .gold b { color: #ffcc33; }

.mm-h-scroll {
  text-align: left;
  max-height: min(58vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -10px; padding: 0 10px 8px;
  scrollbar-width: thin; scrollbar-color: var(--violet) transparent;
  will-change: transform; transform: translateZ(0);
}
.mm-h-scroll::-webkit-scrollbar { width: 8px; }
.mm-h-scroll::-webkit-scrollbar-track { background: rgba(139, 92, 246, 0.08); border-radius: 99px; }
.mm-h-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a67bfb, #7c3aed); border-radius: 99px; }
.mm-h-title { margin: 6px 0 8px; font-family: "Fredoka", sans-serif; font-size: 15.5px; color: var(--ink); }

/* Yıldızlar: dolu altın, boş sönük */
.mm-st { display: inline-flex; gap: 1px; }
.mm-st i { font-style: normal; font-size: 15px; line-height: 1; color: rgba(255, 255, 255, 0.16); }
.mm-st i.on { color: #ffcc33; }

/* Rekorlar: 4 seviye kartı */
.mm-recs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.mm-rec {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px;
  padding: 10px 12px; border-radius: 14px;
  border: 1.5px solid rgba(166, 123, 251, 0.45); background: var(--bg-soft-2);
  font-family: "Fredoka", sans-serif;
}
.mm-rec b { font-size: 16px; color: var(--ink); }
.mm-rec small { font-size: 12px; color: var(--ink-faint); justify-self: end; }
.mm-rec .mm-st { grid-column: 1; }
.mm-rec em { grid-column: 1 / -1; font-style: normal; font-size: 12.5px; color: var(--ink-dim); font-family: "Manrope", sans-serif; }
.mm-rec.s3 { border-color: rgba(255, 204, 51, 0.75); background: linear-gradient(180deg, rgba(255, 204, 51, 0.16), rgba(255, 204, 51, 0.04)); }
.mm-rec.s3 b { color: #ffe08a; }
.mm-rec.none { opacity: 0.5; border-color: var(--line); }

/* Son oyunlar: günlere göre gruplu satırlar */
.mm-day { margin: 12px 0 6px; font-family: "Fredoka", sans-serif; font-size: 13px; letter-spacing: 0.04em; color: var(--violet-bright); }
.mm-day:first-child { margin-top: 0; }
.mm-row {
  display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px; border-radius: 13px;
  background: var(--bg-soft-2); border: 1px solid var(--line);
  font-family: "Fredoka", sans-serif;
}
.mm-row time { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.mm-row-lv { font-size: 15px; color: var(--ink); }
.mm-row-lv small { font-size: 11.5px; color: var(--ink-faint); margin-left: 3px; }
.mm-row-n { text-align: right; font-size: 13px; color: var(--ink); line-height: 1.15; }
.mm-row-n small { font-size: 11.5px; color: var(--ink-faint); }
.mm-row.s3 { border-color: rgba(255, 204, 51, 0.55); background: linear-gradient(90deg, rgba(255, 204, 51, 0.12), rgba(255, 204, 51, 0.02)); }
.mm-h-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; text-align: center; }
.mm-h-empty img { width: 90px; height: 90px; object-fit: contain; }
.mm-h-empty p { margin: 0; color: var(--ink-dim); font-size: 14.5px; }

@media (max-width: 640px) {
  .mm-head { grid-template-columns: 64px 1fr 64px; }
  .mm-row { grid-template-columns: 42px 1fr auto auto; gap: 8px; padding: 8px 10px; }
  .mm-st i { font-size: 13px; }
}