/* Memory Match / Hafıza Kartları. Builds on the Kids design system v3 tokens in kids-product.css. */
.mm-stage{position:relative;overflow:hidden;background:
 radial-gradient(600px 300px at 100% 0,rgba(165,148,255,.16),transparent 70%),
 radial-gradient(500px 280px at 0 100%,rgba(61,213,243,.10),transparent 70%),var(--k-surface)}
.mm-stage .kg-toolbar h2{font-size:1.5rem!important}
.mm-stage .kg-score span{min-height:40px}

/* ---------- Setup pickers ---------- */
.mm-setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px;margin:0 0 20px}
.mm-group{min-width:0}
.mm-group-deck{grid-column:1/-1}
.mm-label{margin:0 0 6px!important;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--k-muted)!important}
.mm-setup .kg-levels{border-radius:22px;width:fit-content;max-width:100%}
.mm-setup .kg-levels button{display:inline-flex;align-items:center;gap:8px;line-height:1.2;text-align:left;overflow-wrap:break-word;min-width:0}
.mm-setup .kg-levels button small{font-size:.78em;font-weight:700;opacity:.75}
.mm-chip-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fbf8ff;flex:none}
.mm-chip-icon svg{width:24px;height:24px;display:block}
.mm-setup .kg-levels button[aria-pressed="true"] .mm-chip-icon{box-shadow:0 0 0 2px var(--k-violet)}
.mm-setup .kg-levels button:focus-visible{outline:4px solid var(--k-gold);outline-offset:2px}

/* ---------- Two players ---------- */
.mm-players{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
.mm-player{display:flex;align-items:center;gap:10px;margin:0!important;padding:12px 16px;border-radius:18px;background:var(--k-bg-2);border:2px solid var(--k-line-soft);font-weight:800;color:var(--k-ink)!important;font-family:"Manrope",Inter,sans-serif;transition:border-color .2s,box-shadow .2s,background .2s}
.mm-player b{margin-left:auto;font-size:1.4rem;color:var(--k-gold)}
.mm-player-dot{width:14px;height:14px;border-radius:50%;flex:none;background:var(--k-cyan)}
.mm-player[data-player="1"] .mm-player-dot{background:var(--k-pink)}
.mm-player.is-turn{border-color:var(--k-cyan);background:rgba(61,213,243,.1);box-shadow:0 0 0 4px rgba(61,213,243,.15)}
.mm-player[data-player="1"].is-turn{border-color:var(--k-pink);background:rgba(255,159,211,.1);box-shadow:0 0 0 4px rgba(255,159,211,.15)}

/* ---------- Board ---------- */
.mm-table{padding:clamp(10px,2.2vw,22px);border-radius:24px;background:rgba(7,11,33,.55);border:1px solid var(--k-line-soft)}
.mm-board{--cols:4;--ratio:1.19;--bw:720px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(8px,1.6vw,16px);margin:0 auto;
 width:min(100%,var(--bw),max(300px,calc((100svh - 170px)*var(--ratio))))}
.mm-board[data-size="small"]{--cols:3;--ratio:1.34;--bw:540px}
.mm-board[data-size="medium"]{--cols:4;--ratio:1.19;--bw:720px}
.mm-board[data-size="large"]{--cols:5;--ratio:1.12;--bw:800px}
.mm-card{position:relative;display:block;width:100%;aspect-ratio:5/5.6;min-height:44px;padding:0;margin:0;border:0;background:transparent;border-radius:clamp(12px,2vw,20px);perspective:1000px;color:inherit;-webkit-tap-highlight-color:transparent}
.mm-card:focus-visible{outline:4px solid var(--k-gold);outline-offset:4px}
.mm-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .48s cubic-bezier(.3,1.35,.5,1)}
.mm-card[data-state="up"] .mm-inner,.mm-card[data-state="matched"] .mm-inner{transform:rotateY(180deg)}
.mm-side{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;border-radius:clamp(12px,2vw,20px);-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.mm-side svg{display:block;width:78%;height:78%}
.mm-back{background:
 radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 45%),
 linear-gradient(145deg,#6d5ce8 0%,#3b3aa8 55%,#232a7a 100%);
 border:3px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 5px rgba(7,11,33,.22),0 8px 18px rgba(2,4,20,.45);transition:filter .18s,box-shadow .18s}
.mm-back svg{width:84%;height:84%}
.mm-face{transform:rotateY(180deg);background:linear-gradient(160deg,#ffffff,#eef1ff);border:3px solid #ffffff;box-shadow:0 8px 18px rgba(2,4,20,.45)}
.mm-board[data-deck="animals"] .mm-face{background:linear-gradient(160deg,#fffdf6,#ffefd6)}
.mm-board[data-deck="fruit"] .mm-face{background:linear-gradient(160deg,#fbfff4,#e6f8d8)}
.mm-board[data-deck="shapes"] .mm-face{background:linear-gradient(160deg,#ffffff,#f1ecff)}
.mm-board[data-deck="space"] .mm-face{background:linear-gradient(160deg,#f6f8ff,#e1e7ff)}
.mm-card[data-state="down"]:hover .mm-back{filter:brightness(1.14);box-shadow:inset 0 0 0 5px rgba(7,11,33,.22),0 0 0 3px rgba(246,201,108,.55),0 10px 22px rgba(2,4,20,.5)}
.mm-card[data-state="down"]{cursor:pointer}
.mm-card[data-state="up"] .mm-face{box-shadow:0 0 0 4px var(--k-cyan),0 10px 24px rgba(2,4,20,.5)}
.mm-card[data-state="matched"]{cursor:default}
.mm-card[data-state="matched"] .mm-face{border-color:#d9fff0;box-shadow:0 0 0 4px var(--k-mint),0 0 26px rgba(98,227,171,.45)}
.mm-card[data-state="matched"] .mm-face:after{content:"";position:absolute;top:7%;right:7%;width:clamp(16px,22%,28px);aspect-ratio:1;border-radius:50%;background:var(--k-mint) no-repeat center/60% auto;
 background-image:linear-gradient(transparent,transparent);box-shadow:0 2px 6px rgba(2,4,20,.3)}
.mm-card[data-state="matched"] .mm-face:before{content:"";position:absolute;z-index:1;top:calc(7% + clamp(4px,5.5%,7px));right:calc(7% + clamp(5px,7.5%,9px));width:clamp(5px,6%,8px);height:clamp(9px,11%,14px);border:solid #0b3a2a;border-width:0 3px 3px 0;transform:rotate(45deg)}
.mm-card.is-wrong .mm-face{box-shadow:0 0 0 4px var(--k-coral),0 10px 24px rgba(2,4,20,.5)}
.mm-card.is-wrong{animation:mm-shake .42s ease .45s}
.mm-card.is-pop{animation:mm-pop .55s ease .3s}
.mm-turn-2 .mm-card[data-state="down"]:hover .mm-back{box-shadow:inset 0 0 0 5px rgba(7,11,33,.22),0 0 0 3px rgba(255,159,211,.6),0 10px 22px rgba(2,4,20,.5)}
@keyframes mm-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes mm-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ---------- Win panel ---------- */
.mm-win{position:relative;z-index:2;animation:mm-rise .5s ease both}
.mm-win h3:focus{outline:none}
.mm-win h3:focus-visible{outline:4px solid var(--k-gold);outline-offset:4px;border-radius:8px}
.mm-win .kg-stars{gap:10px}
.mm-star{width:52px;height:52px;fill:#2c3570;stroke:#4a568f;stroke-width:1.2;stroke-linejoin:round}
.mm-star.is-on{fill:var(--k-gold);stroke:#ffe6a8;filter:drop-shadow(0 4px 10px rgba(246,201,108,.45));animation:mm-star .5s cubic-bezier(.3,1.6,.5,1) both}
.mm-star.is-on:nth-child(2){animation-delay:.15s}
.mm-star.is-on:nth-child(3){animation-delay:.3s}
.mm-best{font-weight:800;color:var(--k-gold)!important;min-height:0}
.mm-best:empty{display:none}
.mm-win-actions{justify-content:center}
@keyframes mm-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mm-star{from{transform:scale(.2) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}

.mm-actions{justify-content:flex-start}

/* ---------- Sticker album ---------- */
.mm-album{margin-top:26px;padding-top:22px;border-top:1px solid var(--k-line-soft)}
.mm-album-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.mm-album h3{margin:0!important;font-size:1.25rem!important}
.mm-album-count{margin:0!important;font-weight:800;color:var(--k-gold)!important;font-family:"Manrope",Inter,sans-serif}
.mm-album .kp-small{margin:4px 0 14px}
.mm-album-decks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mm-album-deck{background:var(--k-bg-2);border:1px solid var(--k-line-soft);border-radius:18px;padding:12px 14px}
.mm-album-deck h4{margin:0 0 8px;font-size:.9rem;color:var(--k-ink);font-family:"Manrope",Inter,sans-serif}
.mm-stickers{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;list-style:none;margin:0;padding:0}
.mm-sticker{aspect-ratio:1;border-radius:9px;background:rgba(255,255,255,.04);border:1px dashed #33407f;display:grid;place-items:center;position:relative}
.mm-sticker svg{width:86%;height:86%;filter:grayscale(1) brightness(.55);opacity:.28;transition:filter .3s,opacity .3s}
.mm-sticker.is-found{background:#fbf8ff;border:1px solid #ffffff}
.mm-sticker.is-found svg{filter:none;opacity:1}
.mm-sticker.is-new{animation:mm-pop .6s ease}
.mm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Confetti ---------- */
.mm-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.mm-bit{position:absolute;top:-20px;left:var(--x);width:10px;height:14px;border-radius:3px;background:var(--c);animation:mm-fall 2.6s cubic-bezier(.25,.6,.4,1) var(--d) both}
.mm-bit.is-star{width:14px;height:14px;border-radius:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes mm-fall{0%{transform:translateY(0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translateY(720px) rotate(var(--r));opacity:0}}

/* ---------- Responsive ---------- */
@media(max-width:720px){
 .mm-setup{grid-template-columns:1fr}
 .mm-album-decks{grid-template-columns:1fr}
}
@media(max-width:560px){
 .mm-board[data-size="medium"]{--cols:3}
 .mm-board[data-size="large"]{--cols:4}
 .mm-board{width:100%}
 .mm-setup{gap:10px}
 .mm-setup .kg-levels{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,5.2em),1fr));gap:4px;border-radius:20px}
 .mm-group-deck .kg-levels{grid-template-columns:repeat(auto-fit,minmax(min(100%,7.6em),1fr))}
 .mm-setup .kg-levels button{justify-content:center;padding:6px 8px;min-width:0;border-radius:16px;text-align:center}
 .mm-group-deck .kg-levels button{justify-content:flex-start}
 .mm-group-size .kg-levels button{flex-direction:column;gap:0}
 .mm-player{padding:10px 12px;font-size:.92rem}
 .mm-star{width:44px;height:44px}
 .mm-stickers{grid-template-columns:repeat(5,minmax(0,1fr))}
 .mm-table{padding:8px;border-radius:18px}
}
@media(max-width:360px){.mm-players{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
 .mm-inner{transition:none}
 .mm-card.is-wrong,.mm-card.is-pop,.mm-win,.mm-star.is-on,.mm-sticker.is-new{animation:none}
 .mm-sticker svg,.mm-back,.mm-player{transition:none}
 .mm-confetti{display:none}
}
@media print{.mm-setup,.mm-album,.mm-actions,.mm-confetti{display:none!important}}