/* MATCH THE PICTURES — oyun kiti */
:root{ --gk-accent:#16A34A; --gk-accent-d:#14532D; }
.mp-main{ flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; }
.mp-grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(var(--mp-cols,5),minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; }
.mp-card{ position:relative; min-height:0; display:flex; flex-direction:column; border-radius:22px; background:rgba(42,37,96,.85); border:3px solid var(--gk-line); border-bottom:7px solid var(--gk-shadow);
  padding:8px; gap:8px; transition:transform .15s, border-color .2s, background .2s; animation:mfIn .45s cubic-bezier(.34,1.56,.64,1) both; }
.mp-num{ position:absolute; top:6px; left:6px; z-index:2; width:28px; height:28px; border-radius:10px; background:var(--gk-gold); color:#1B1740; font-family:'Fredoka',sans-serif; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; }
.mp-pic{ flex:1; min-height:0; border-radius:16px; background:transparent; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.mp-pic img{ width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; }
.mp-emoji{ font-size:56px; }
.mp-slot{ flex-shrink:0; height:clamp(38px,6.5vh,52px); border-radius:14px; border:3px dashed rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(16px,2.8vh,24px); color:rgba(255,255,255,.4); white-space:nowrap; overflow:hidden; padding:0 6px; }
.mp-grid.picking .mp-card:not(.ok){ cursor:pointer; border-color:rgba(255,210,63,.6); }
.mp-grid.picking .mp-card:not(.ok):hover, .mp-card.over{ transform:translateY(-4px) scale(1.02); border-color:var(--gk-gold) !important; background:rgba(74,63,158,.9); }
.mp-card.over .mp-slot{ border-color:var(--gk-gold); }
.mp-card.ok{ border-color:#4ADE80; background:rgba(22,101,52,.55); border-bottom-color:#14532D; }
.mp-card.ok .mp-slot{ border:0; background:#22C55E; color:#fff; animation:gkPop .45s cubic-bezier(.34,1.56,.64,1); }
.mp-card.ok .mp-slot::before{ content:'✓ '; }
.mp-card.bad{ animation:gkShake .45s; border-color:#F87171; }
.mp-bankwrap{ flex-shrink:0; padding:12px 14px; border-radius:24px; background:rgba(42,37,96,.85); border:2px solid var(--gk-line); border-bottom:6px solid var(--gk-shadow); }
.mp-bank{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.mp-chip{ min-height:54px; padding:0 20px; border:0; border-radius:16px; cursor:grab; touch-action:none; user-select:none; color:#fff; background:var(--c);
  border-bottom:6px solid rgba(0,0,0,.28); font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(18px,3vh,26px); text-shadow:0 2px 0 rgba(0,0,0,.18); transition:transform .12s, opacity .25s; }
.mp-chip:hover{ transform:translateY(-3px); }
.mp-chip.sel{ box-shadow:0 0 0 4px #FFD23F, 0 0 26px rgba(255,210,63,.75); transform:translateY(-4px) scale(1.06); animation:gkPulse .5s infinite alternate; }
.mp-chip.lifted{ opacity:.35; }
.mp-chip.used{ opacity:0; transform:scale(.4); pointer-events:none; width:0; padding:0; margin:0 -5px; min-width:0; overflow:hidden; transition:all .35s; }
.mp-chip.bad{ animation:gkShake .45s; }
.mp-ghost{ position:fixed; z-index:30000; pointer-events:none; transform:translate(-50%,-60%) rotate(-4deg) scale(1.1); box-shadow:0 14px 30px rgba(0,0,0,.45); cursor:grabbing; }
.mp-help{ text-align:center; font-size:14px; font-weight:800; color:var(--gk-muted); margin-bottom:8px; }
@keyframes mfIn{ from{ opacity:0; transform:scale(.6) rotate(-6deg); } to{ opacity:1; transform:none; } }
@media (max-width:980px){ .mp-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:minmax(150px,auto); } .mp-card{ min-height:150px; } }
@media (max-width:640px){
  .mp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:150px; gap:10px; }
  .mp-card{ border-radius:16px; padding:6px; gap:6px; }
  .mp-bankwrap{ position:sticky; bottom:84px; z-index:5; padding:8px; border-radius:18px; box-shadow:0 -8px 24px rgba(0,0,0,.35); }
  .mp-chip{ min-height:44px; padding:0 12px; font-size:17px; border-radius:12px; }
  .mp-bank{ gap:6px; }
  .mp-help{ display:none; }
}
/* masaüstü: kelimeler solda sütun, resimler sağda büyük */
@media (min-width:981px){
  .mp-main{ flex-direction:row; }
  .mp-bankwrap{ order:-1; width:clamp(250px,24vw,360px); display:flex; flex-direction:column; justify-content:center; padding:14px; }
  .mp-bank{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .mp-chip{ padding:0 8px; min-height:clamp(46px,7.5vh,62px); font-size:clamp(16px,2.6vh,24px); }
  .mp-chip.used{ width:auto; margin:0; padding:0 8px; transform:scale(.85); }
  .mp-help{ font-size:13px; margin-bottom:12px; }
}

/* yazılı kutu (resimsiz): ay sırası vb. */
.mp-card.tile{ background:color-mix(in srgb, var(--tc,#7C3AED) 30%, rgba(42,37,96,.9)); border-color:color-mix(in srgb, var(--tc,#7C3AED) 70%, transparent); }
.mp-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; line-height:1; }
.mp-tile i{ font-style:normal; font-size:clamp(26px,5vh,42px); }
.mp-tile b{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(34px,7vh,60px); color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.25); }
.mp-tile small{ font-weight:800; font-size:clamp(13px,2vh,17px); color:rgba(255,255,255,.8); }
@media (max-width:640px){
  .mp-grid:has(.tile){ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:112px; }
  .mp-card.tile{ min-height:0; padding:6px; gap:4px; }
  .mp-tile b{ font-size:30px; } .mp-tile i{ font-size:20px; } .mp-tile small{ font-size:11px; }
}
@media (max-width:640px){
  .mp-grid:has(.tile){ grid-auto-rows:118px; }
  .mp-card.tile .mp-tile i{ display:none; }
  .mp-card.tile .mp-tile b{ font-size:28px; }
  .mp-card.tile .mp-slot{ height:40px; font-size:15px; }
}

/* boşluk doldurma + sonda kontrol */
.mp-card.given{ opacity:.8; }
.mp-card.given .mp-slot{ background:rgba(255,255,255,.18) !important; color:#fff; border:0; }
.mp-card.given .mp-slot::before{ content:'' !important; }
.mp-card.filled .mp-slot{ border:3px solid var(--gk-gold); background:rgba(255,210,63,.18); color:#FDE68A; font-weight:700; cursor:pointer; }
.mp-card.bad .mp-slot{ border-color:#EF4444 !important; background:rgba(239,68,68,.35) !important; color:#fff; }
.mp-checkbtn{ margin-top:12px; width:100%; }
.mp-checkbtn.pulse{ animation:gkPulse .5s infinite alternate; }

/* takvim sayfası kartı */
.mp-card.cal{ background:rgba(42,37,96,.9); border-color:rgba(255,255,255,.25); padding:8px; }
.mp-calpage{ position:relative; width:100%; height:100%; background:#fff; border-radius:12px; display:flex; flex-direction:column; align-items:center; overflow:hidden; box-shadow:0 4px 0 rgba(0,0,0,.25); }
.mp-calhead{ width:100%; height:clamp(16px,2.6vh,24px); background:var(--tc); display:flex; justify-content:space-around; align-items:flex-start; flex-shrink:0; }
.mp-calhead i{ width:8px; height:14px; margin-top:-6px; border-radius:4px; background:#374151; }
.mp-calpage b{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(15px,2.5vh,22px); color:var(--tc); margin-top:2px; text-transform:uppercase; letter-spacing:.5px; }
.mp-calpage > span{ font-size:clamp(16px,2.8vh,26px); line-height:1.1; }
.mp-caldays{ flex:1; min-height:0; width:84%; display:grid; grid-template-columns:repeat(7,1fr); gap:3px; align-content:center; padding-bottom:4px; }
.mp-caldays em{ height:clamp(4px,.8vh,7px); border-radius:2px; background:#E5E7EB; }
.mp-card.cal.ok .mp-calpage{ box-shadow:0 0 0 4px #22C55E; }
.mp-card.cal .mp-slot{ font-size:clamp(12px,1.7vh,16px); line-height:1.1; text-align:center; padding:0 4px; }
@media (max-width:640px){ .mp-grid:has(.cal){ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:124px; } .mp-caldays{ display:none; } }
.mp-card.cal.ok .mp-slot{ font-size:clamp(15px,2.3vh,20px); }
@media (max-width:640px){ .mp-calpage b{ font-size:13px; letter-spacing:0; } .mp-calpage > span{ font-size:16px; } }