/* ── hanukkah memory (shell + HUD come from games.css) ── */
.mm-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:0 clamp(12px,1.6vw,32px) clamp(12px,1.6vw,32px)}
.mm-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap,14px);perspective:1400px}
.sg-tools #mmHint{position:relative}
.sg-tools #mmHint i{position:absolute;top:-4px;left:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--sun);color:var(--ink);font-style:normal;font-weight:700;font-size:12px;display:grid;place-items:center}
.sg-tools #mmHint:disabled{opacity:.45;pointer-events:none}

/* card */
.mm-card{position:relative;width:var(--cw,140px);aspect-ratio:3/4;border:0;padding:0;background:none;cursor:pointer;font:inherit;
  opacity:0;translate:0 24px;scale:.9;transition:opacity .4s,translate .5s cubic-bezier(.2,.7,.2,1),scale .5s cubic-bezier(.34,1.4,.64,1);transition-delay:calc(var(--i,0) * 28ms)}
.mm-grid.in .mm-card{opacity:1;translate:none;scale:1}
.mm-card .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.3,.5,1)}
.mm-card.up .in,.mm-card.got .in{transform:rotateY(180deg)}
.mm-card .bk,.mm-card .fc{position:absolute;inset:0;border-radius:clamp(14px,1.2vw,22px);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}

/* back: brand colour tile, white frame, a big question mark */
.mm-card .bk{background:var(--b);border:clamp(4px,.4vw,7px) solid #fff;display:grid;place-items:center}
.mm-card .bk::before{content:"";position:absolute;inset:10%;border-radius:clamp(10px,.9vw,16px);border:2px dashed rgba(255,255,255,.55)}
.mm-card .bk b{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:calc(var(--cw,140px) * .42);line-height:1;color:#fff;transition:scale .35s cubic-bezier(.34,1.56,.64,1),rotate .35s}
.mm-card .bk s{position:absolute;width:18%;aspect-ratio:1;background:rgba(255,255,255,.35);text-decoration:none}
.mm-card .bk s:nth-of-type(1){top:13%;right:15%;border-radius:50%}
.mm-card .bk s:nth-of-type(2){bottom:14%;left:15%;clip-path:polygon(50% 0,100% 100%,0 100%)}
.mm-card:hover:not(.up):not(.got) .bk b{scale:1.14;rotate:-8deg}
.mm-card:hover:not(.up):not(.got){translate:0 -5px}
.mm-card:focus-visible{outline:3px solid var(--sun);outline-offset:4px;border-radius:20px}

/* face: white, item + its name */
.mm-card .fc{transform:rotateY(180deg);background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;padding:10% 8% 8%;border:clamp(4px,.4vw,7px) solid #fff;transition:border-color .3s,background .3s}
.mm-card .fc img{width:100%;flex:1;min-height:0;object-fit:contain}
.mm-card .fc span{font-weight:700;font-size:clamp(13px,calc(var(--cw,140px) * .12),22px);line-height:1.1;white-space:nowrap}
.mm-card.got .fc{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff)}
.mm-card.got{cursor:default;animation:mmGot .6s cubic-bezier(.34,1.56,.64,1)}
.mm-card.miss .in{animation:mmMiss .4s}
@keyframes mmGot{40%{scale:1.1}}
@keyframes mmMiss{25%{translate:-5px 0}50%{translate:5px 0}75%{translate:-3px 0}}
.mm-card.peek .in{transform:rotateY(180deg)}

/* sparkles on a match */
.mm-spark{position:fixed;z-index:40;width:12px;height:12px;pointer-events:none;background:var(--c,var(--sun))}
.mm-spark.r{border-radius:50%}
.mm-spark.t{clip-path:polygon(50% 0,100% 100%,0 100%)}

/* end-of-board stars */
.mm-stars{display:flex;gap:10px}
.mm-stars i{width:clamp(48px,4vw,72px);aspect-ratio:1;background:#e3e8f6;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);scale:.6;transition:background .3s,scale .5s cubic-bezier(.34,1.56,.64,1)}
.mm-stars i:nth-child(2){translate:0 -14px}
.mm-stars i.on{background:var(--sun);scale:1}

@media (max-width:720px){
  .mm-stage{padding:4px 10px 12px}
  .mm-card .bk::before{inset:8%}
}
@media (prefers-reduced-motion:reduce){
  .mm-card,.mm-card .in{transition-duration:.01s}
  .mm-card.got,.mm-card.miss .in{animation:none}
}