/* игра «Найди пару» (memory): стили только этой игры. Селекторы без #s-memory действуют на всю страницу — новые правила пишите через #s-memory. */
/* memory */
.mem-board{position:absolute;inset:0;display:grid;justify-content:center;align-content:center;gap:2.4vmin;padding:4vmin 4vmin;z-index:3;perspective:1200px}
.card{position:relative;transform-style:preserve-3d;transition:transform .45s;animation:pop-in .4s backwards}
.card.open{transform:rotateY(180deg)}
.card .face,.card .back{position:absolute;inset:0;border-radius:3vmin;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 .9vmin 0 rgba(0,0,0,.18)}
.card .back{background:radial-gradient(circle at 50% 45%,#ffd84d 0 22%,transparent 23%),repeating-linear-gradient(45deg,#7cc8f5 0 3vmin,#5fb4ea 3vmin 6vmin);border:.9vmin solid #fff}
.card .face{background:#fff;transform:rotateY(180deg);border:.9vmin solid #fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .face img{width:92%;height:92%;object-fit:contain}
.card.done .face{box-shadow:0 0 0 .8vmin #6be06b,0 .9vmin 0 rgba(0,0,0,.18);animation:win .6s}
@keyframes win{50%{transform:rotateY(180deg) scale(1.12)}}

/* memory v2 */
.card.miss{animation:shake .4s}
.card:not(.open):not(.done):nth-child(3n){animation:pop-in .4s backwards,peekc 5s 3s ease-in-out infinite}
@keyframes peekc{0%,90%,100%{rotate:0deg}93%{rotate:-4deg}97%{rotate:4deg}}
#s-memory .bg{object-position:50% 0}

/* memory v3: themes per level, deal animations, living pairs */
#mem-board{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;padding:0}
#mem-board .card{flex:none;width:var(--cw);height:var(--ch);animation:var(--dealA,pop-in .4s) backwards}
#mem-board[data-deal=wait] .card{animation:none}
#mem-board[data-deal=fly]{--dealA:deal-fly .75s cubic-bezier(.2,.8,.3,1.05)}
#mem-board[data-deal=rain]{--dealA:deal-rain .8s cubic-bezier(.3,.9,.4,1.15)}
#mem-board[data-deal=spin]{--dealA:deal-spin .8s cubic-bezier(.3,.8,.4,1.1)}
#mem-board.dealt .card{animation:none}
#mem-board.dealt .card:not(.open):not(.done):nth-child(3n){animation:peekc 5s 3s ease-in-out infinite}
#mem-board .card.miss{animation:shake .4s}
@keyframes deal-fly{from{translate:var(--fx,0) var(--fy,100vh);rotate:var(--fr);scale:.45}}
@keyframes deal-rain{from{translate:0 -115vh;rotate:var(--fr)}75%{translate:0 1.5vmin;rotate:0deg}}
@keyframes deal-spin{from{scale:0;rotate:-540deg}70%{scale:1.08}}
/* card backs: a pattern + an emblem in a white circle */
#mem-board .card .back{display:flex;align-items:center;justify-content:center}
#mem-board .card .back i{width:52%;aspect-ratio:1;border-radius:50%;background:#fff no-repeat center/72% auto;box-shadow:0 .5vmin 0 rgba(0,0,0,.12);display:block}
#mem-board[data-back=hearts] .back{background:radial-gradient(circle,#fff6 0 18%,transparent 19%) 0 0/4.4vmin 4.4vmin,#ff8fc0}
#mem-board[data-back=farm] .back{background:repeating-linear-gradient(90deg,#7ed46b 0 2.6vmin,#66c057 2.6vmin 5.2vmin)}
#mem-board[data-back=picnic] .back{background:linear-gradient(90deg,#fff8 50%,transparent 0) 0 0/4.4vmin 4.4vmin,linear-gradient(#fff8 50%,transparent 0) 0 0/4.4vmin 4.4vmin,#ff6b6b}
#mem-board[data-back=party] .back{background:radial-gradient(circle,#ffd84d 0 14%,transparent 15%) 0 0/3.6vmin 3.6vmin,radial-gradient(circle,#ff8fc8 0 14%,transparent 15%) 1.8vmin 1.8vmin/3.6vmin 3.6vmin,#9a6cff}
#mem-board[data-back=toys] .back{background:repeating-linear-gradient(45deg,#7cc8f5 0 3vmin,#5fb4ea 3vmin 6vmin)}
#mem-board[data-back=stage] .back{background:radial-gradient(circle at 50% 40%,#ffe9a8,transparent 60%),repeating-conic-gradient(from 0deg at 50% 50%,#ff5b8a 0 15deg,#ff7aa2 15deg 30deg)}
#mem-board[data-back=jungle] .back{background:radial-gradient(ellipse 40% 25% at 30% 30%,#8fd16a 0 98%,transparent),radial-gradient(ellipse 40% 25% at 75% 75%,#8fd16a 0 98%,transparent),#3f9a4a}
#mem-board[data-back=night] .back{background:radial-gradient(circle,#fff 0 6%,transparent 8%) 0 0/3.4vmin 3.4vmin,radial-gradient(circle,#ffe58a 0 5%,transparent 7%) 1.7vmin 2.2vmin/3.4vmin 3.4vmin,linear-gradient(#24306e,#3d4fa8)}
#mem-board[data-back=night] .back i{background:radial-gradient(circle at 64% 38%,#3d4fa8 0 34%,transparent 35%),radial-gradient(circle,#ffe066 0 46%,#fff 47%)}
#mem-board[data-theme=night] .card .face{background:#fffbea}
#mem-board[data-theme=outfit] .card .face{background:linear-gradient(#fff,#ffeef6)}
/* family in hats from "Dress up": the box .fh is the round portrait; a hat's brim line (share of its own height,
   the same values as in Dress up) goes to the line --y of the portrait, so the hair goes under the hat */
#mem-board .face .pic{position:relative}
#mem-board .face .fh{position:absolute;left:10%;bottom:3%;width:80%;aspect-ratio:1}
#mem-board .face .fh .pic{position:absolute;inset:0;width:100%;height:100%}
#mem-board .face .hat{position:absolute;left:calc(50% + var(--x,0%));top:var(--y);width:var(--w);height:auto;translate:-50% calc(var(--ay) * -100%);rotate:var(--r,0deg);z-index:2;filter:drop-shadow(0 .3vmin .3vmin rgba(0,0,0,.2))}
#mem-board .face .hat.crown{--w:46%;--y:17%;--ay:1}
#mem-board .face .hat.pirate{--w:80%;--y:22%;--ay:.658;--x:1%}
#mem-board .face .hat.party{--w:24%;--y:9%;--ay:.93;--x:7%;--r:12deg}
#mem-board .face .hat.sunhat{--w:68%;--y:27%;--ay:.858}
#mem-board .face .hat.chef{--w:58%;--y:23%;--ay:1}
#mem-board .face .hat.bow{--w:36%;--y:11%;--ay:.6;--x:17%;--r:14deg}
/* the magic card */
#mem-board .card .face.magic,#mem-board[data-theme] .card .face.magic{background:radial-gradient(circle,#fff7c2,#ffd1f0 60%,#c9a8ff)}
#mem-board .face.magic img{width:70%;height:70%;animation:wob 1s infinite}
#mem-board .card.gone{opacity:0;transition:opacity .7s .2s;pointer-events:none}
/* a hint: the pair glows for a moment */
#mem-board .card.glow .back{animation:glowb .42s 4 alternate ease-in-out}
@keyframes glowb{to{box-shadow:0 0 0 1.3vmin #ffd400,0 0 5vmin 2vmin #fff3a0;scale:1.09}}
/* a found pair comes alive */
#mem-board .card.alive-animal .pic{animation:alive-hop .5s 3 ease-out}
#mem-board .card.alive-fam .pic,#mem-board .card.alive-famhat .face{animation:alive-wave .4s 4 alternate ease-in-out}
#mem-board .card.alive-food .pic{animation:chomp .3s 4}
#mem-board .card.alive-toy .pic{animation:alive-spin .9s 1 ease-in-out}
#mem-board .card.alive-outfit .pic{animation:dance2 .35s 4 alternate ease-in-out}
#mem-board .face .pic.waving{width:96%;height:96%}
@keyframes alive-hop{40%{translate:0 -14%;scale:1.06 .96}70%{translate:0 0;scale:1.06 .92}}
@keyframes alive-wave{from{rotate:-5deg}to{rotate:5deg}}
@keyframes alive-spin{to{rotate:360deg}}
/* every three pairs the child jumps in to cheer */
.mem-cheer{position:absolute;left:50%;bottom:0;height:30vh;z-index:6;pointer-events:none;animation:mem-cheer 1.7s ease-in-out forwards}
@keyframes mem-cheer{0%{translate:-50% 105%}22%{translate:-50% 0}32%{translate:-50% -4%}42%,78%{translate:-50% 0}100%{translate:-50% 105%}}
@media (orientation:portrait){.mem-cheer{height:22vh}}

/* polish (14.10): feel layers — plan agents/polish/memory_plan.md. Only transform/opacity; none of them takes a touch */
#mem-board .card:not(.gone){transition:transform .5s cubic-bezier(.34,1.32,.5,1),scale .14s ease-out}
#mem-board .card:not(.open):not(.done):not(.glow):active{scale:.94 .94}
.mem-fxl{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.mem-flash,.mem-pulse,.mem-veil{position:absolute;inset:0;opacity:0;pointer-events:none}
.mem-flash{background:#fff}
.mem-pulse{background:radial-gradient(circle at 50% 50%,transparent 25%,var(--pc,#ffe27a) 130%)}
.mem-veil{background:#fff}
.mem-ringfx{position:absolute;width:16vmin;height:16vmin;margin:-8vmin 0 0 -8vmin;border:1.1vmin solid #ffd23f;border-radius:50%;opacity:0;pointer-events:none}
.mem-plus{position:absolute;font-weight:900;font-size:7vmin;line-height:1;text-shadow:0 0 .6vmin #fff,0 .4vmin 0 rgba(0,0,0,.2),-.3vmin 0 0 #fff,.3vmin 0 0 #fff;opacity:0;pointer-events:none;white-space:nowrap}
.mem-say{position:absolute;left:calc(50% + 8vmin);top:calc(2vmin + env(safe-area-inset-top));z-index:2;font-weight:900;font-size:8vmin;color:#fff;-webkit-text-stroke:.9vmin #ff7a3d;paint-order:stroke fill;text-shadow:0 .8vmin 0 #c9531c,0 0 3vmin rgba(255,230,120,.9);white-space:nowrap;opacity:0;pointer-events:none}
.mem-say.rec{-webkit-text-stroke-color:#b26cff;text-shadow:0 .8vmin 0 #6a3fb8,0 0 3vmin rgba(255,230,120,.9)}
/* the rainbow shimmer under the cards, for the end of a round */
.mem-rb{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden}
.mem-rb i{position:absolute;left:0;top:0;width:260%;height:100%;background:linear-gradient(100deg,#ff7b9c,#ffb347,#ffe86b,#7be08a,#5fc4ff,#b48cff,#ff7b9c,#ffb347,#ffe86b,#7be08a);display:block}
/* a living background: soft twinkling glints under the cards */
.mem-glints{position:absolute;inset:0;z-index:1;pointer-events:none}
.mem-glints i{position:absolute;width:2.2vmin;height:2.2vmin;margin:-1.1vmin;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,rgba(255,255,255,.0) 70%);box-shadow:0 0 2vmin 1vmin rgba(255,255,255,.5);opacity:0;animation:mem-tw 3s ease-in-out infinite}
@keyframes mem-tw{0%,100%{opacity:0;scale:.4}50%{opacity:.9;scale:1.1}}
/* the freeze frame: only the living background stops */
#s-memory.mem-hold .amb *,#s-memory.mem-hold .mem-glints i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mem-glints i{animation:none}}