/* MEMORY FLIP — oyun kiti */
:root{ --gk-accent:#0EA5E9; --gk-accent-d:#075985; }
.mf-page .gk-chip, .mf-page .gk-iconbtn{ background:#163E6E; border-color:#23598F; border-bottom-color:#081A33; }
.mf-grid{ flex:1; min-height:0; width:100%; margin:0 auto; display:flex; flex-wrap:wrap; gap:12px; perspective:1200px; justify-content:center; align-content:center; }
.mf-grid .mf-card{ width:var(--mf-size,120px); height:var(--mf-size,120px); flex:none; }
.mf-card{ position:relative; border:0; padding:0; background:none; cursor:pointer; animation:mfIn .45s cubic-bezier(.34,1.56,.64,1) both; }
.mf-inner{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.3,1.3,.5,1); }
.mf-card.up .mf-inner, .mf-card.done .mf-inner{ transform:rotateY(180deg); }
.mf-back, .mf-face{ position:absolute; inset:0; border-radius:18px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mf-back{ background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px),
    linear-gradient(145deg,#6D28D9,#4338CA); border-bottom:6px solid #2E1065; box-shadow:0 6px 14px rgba(0,0,0,.3); }
.mf-back b{ font-size:calc(var(--mf-size,120px) * .44); line-height:1; filter:drop-shadow(0 6px 6px rgba(0,0,0,.35)); animation:mfRocket 2.8s ease-in-out infinite; }
.mf-back::after{ content:''; position:absolute; inset:0; background:radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 75% 20%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 65% 80%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 75%, #fff 50%, transparent 51%); opacity:.8; }
@keyframes mfRocket{ 0%,100%{ transform:translate(-4%,4%) rotate(-4deg); } 50%{ transform:translate(4%,-8%) rotate(4deg); } }
.mf-card:hover:not(.up):not(.done) .mf-back{ filter:brightness(1.15); }
.mf-face{ transform:rotateY(180deg); border-bottom:6px solid rgba(0,0,0,.25); }
.mf-img{ background:#fff; padding:4px; }
.mf-img img{ width:100%; height:100%; object-fit:contain; border-radius:12px; }
.mf-word{ background:var(--c); padding:6px; }
.mf-word span{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:calc(var(--mf-size,120px) * .2); color:#fff; text-align:center; line-height:1.05; text-shadow:0 3px 0 rgba(0,0,0,.2); }
.mf-card.done .mf-face{ box-shadow:0 0 0 4px #4ADE80, 0 0 22px rgba(74,222,128,.6); animation:mfMatch .5s ease-out; }
.mf-card.done::after{ content:'✓'; position:absolute; top:-8px; right:-8px; width:30px; height:30px; border-radius:50%; background:#22C55E; color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; z-index:3; border:3px solid #fff; }
.mf-card.bad .mf-face{ box-shadow:0 0 0 4px #EF4444; animation:gkShake .45s; }
@keyframes mfIn{ from{ opacity:0; transform:scale(.6) rotate(-6deg); } to{ opacity:1; transform:none; } }
@keyframes mfMatch{ 0%{ transform:rotateY(180deg) scale(1); } 50%{ transform:rotateY(180deg) scale(1.08); } 100%{ transform:rotateY(180deg) scale(1); } }
@media (max-width:640px){
  .mf-grid{ gap:7px; flex:none; }
  .mf-back, .mf-face{ border-radius:12px; border-bottom-width:4px; }
  .mf-card.done::after{ width:22px; height:22px; font-size:12px; top:-5px; right:-5px; }
}