.memory-page h1{margin:0 0 8px}.memory-page .intro{margin:0 0 12px;color:#555;font-size:13px;line-height:1.5}.memory-page .controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px;color:#666;font-size:13px}.memory-page .controls label{display:inline-flex;align-items:center;gap:5px}.memory-page .controls select{padding:4px 6px;border:1px solid #cccccc;border-radius:6px;background:#fff;font:inherit}.memory-page .controls .pill{margin-left:auto}.memory-page .pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px 6px;border:1px solid #b4196d;border-radius:8px;background:linear-gradient(#ff9fd2,#e8309a 55%,#d01e8a);color:#fff;font:700 13px/1.2 Arial,Helvetica,sans-serif;text-shadow:0 1px 0 rgba(90,0,50,.5);box-shadow:inset 0 1px #ffffff80,0 2px 3px #00000040;cursor:pointer}.memory-page .pill:hover{filter:brightness(1.08)}.memory-page .plain{padding:4px 11px 5px;border:1px solid #e6c3d4;border-radius:8px;background:#fff5fa;color:#b4196d;font:700 12px/1.2 Arial,Helvetica,sans-serif;cursor:pointer}.memory-page .plain[aria-pressed=false]{border-color:#ddd;background:#f6f6f6;color:#999}.memory-page .plain:hover{filter:brightness(.97)}.memory-page .plaque{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;margin:0 0 10px;padding:7px 16px 8px;border:1px solid #e0bf6e;border-radius:10px;background:linear-gradient(#fffdf6,#fff2d9);color:#8a6a2a;font-size:12px;box-shadow:inset 0 1px #fff,0 1px 2px #7850001f}.memory-page .plaque b{margin-left:3px;color:#5a3e12;font-size:15px;font-variant-numeric:tabular-nums}.board.memory{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;border-radius:18px;border:3px solid #d9ad4a;outline:1px solid #f3dc9a;outline-offset:-7px;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.34) 0 1px,transparent 1px 30px),repeating-linear-gradient(-45deg,rgba(255,255,255,.34) 0 1px,transparent 1px 30px),repeating-linear-gradient(45deg,rgba(150,30,90,.13) 0 1px,transparent 1px 30px),repeating-linear-gradient(-45deg,rgba(150,30,90,.13) 0 1px,transparent 1px 30px),radial-gradient(ellipse at 50% 0%,#fde1ed,#f5bcd6 55%,#eaa4c6);background-position:0 0,0 0,2px 2px,2px 2px,0 0;box-shadow:inset 0 0 46px #aa286e38,0 12px 26px -12px #78004680}.board.memory.n20{grid-template-columns:repeat(5,1fr)}.board.memory.n24,.board.memory.n30{grid-template-columns:repeat(6,1fr)}.board.memory .wait{grid-column:1 / -1;padding:70px 0;color:#9a3b6c;text-align:center;font-size:14px;animation:breathe 1.6s ease-in-out infinite alternate}@keyframes breathe{0%{opacity:.55}to{opacity:1}}.memory .card{position:relative;padding:0;border:0;background:none;font:inherit;cursor:pointer;perspective:1100px;animation:deal .6s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--k, 0) * 40ms)}.memory .card:before{content:"";display:block;padding-top:100%}@keyframes deal{0%{opacity:0;transform:translateY(-36px) rotate(-7deg) scale(.6)}to{opacity:1;transform:none}}.memory .turn{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.8,.3,1)}.memory .card.open .turn{transform:rotateY(180deg)}@media(hover:hover){.memory .card:not(.open):hover .turn{transform:rotateY(-14deg) translateZ(10px)}}.memory .back,.memory .face{position:absolute;inset:0;border-radius:11px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.memory .back{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3b8'/%3E%3Cstop offset='.5' stop-color='%23e6b43c'/%3E%3Cstop offset='1' stop-color='%23a87b1c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M50 90 C20 68 6 52 6 34 A20 20 0 0 1 50 22 A20 20 0 0 1 94 34 C94 52 80 68 50 90Z'/%3E%3C/svg%3E"),radial-gradient(circle at 20% 30%,rgba(255,255,255,.95) 0 1px,transparent 2.2px),radial-gradient(circle at 70% 65%,rgba(255,240,180,.95) 0 1px,transparent 2.2px),radial-gradient(circle at 45% 85%,rgba(255,255,255,.8) 0 .8px,transparent 1.8px),radial-gradient(circle at 85% 15%,rgba(255,230,150,.9) 0 .8px,transparent 1.8px),linear-gradient(160deg,#ff8fcb,#e2318f 45%,#ad176d);background-size:36% 36%,23px 29px,31px 23px,17px 19px,27px 31px,100% 100%;background-position:center 52%,0 0,5px 7px,9px 3px,2px 11px,0 0;background-repeat:no-repeat,repeat,repeat,repeat,repeat,no-repeat;box-shadow:inset 0 0 0 3px #f6d98a,inset 0 0 0 4px #b98a2a,inset 0 0 0 7px #ffffff29,0 6px 14px -6px #5a003299}.memory .back:after{content:"";position:absolute;inset:-40% -70%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);transform:translate(-70%);animation:sweep 7s ease-in-out infinite;animation-delay:calc(var(--g, 0) * -.55s)}@keyframes sweep{0%,72%{transform:translate(-70%)}to{transform:translate(70%)}}.memory .face{display:grid;place-items:center;background:#fffaf3;transform:rotateY(180deg);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #e2c27a,0 6px 14px -6px #5a003299}.memory .face img{display:block;width:100%;height:100%;padding:9%;box-sizing:border-box;object-fit:contain}.memory .card:focus-visible{outline:3px solid #ffffff;outline-offset:3px;border-radius:11px;box-shadow:0 0 0 6px #d01e8a}.memory .card.open{cursor:default}.memory .card.found .turn{animation:found .7s ease both}@keyframes found{0%,to{transform:rotateY(180deg) scale(1)}40%{transform:rotateY(180deg) scale(1.1)}}.memory .card.found .face{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #e7b94a,0 0 0 2px #ffd86b,0 0 18px #ffc850cc}.memory .card.miss .turn{animation:miss .4s ease both}@keyframes miss{0%,to{transform:rotateY(180deg) translate(0)}25%{transform:rotateY(180deg) translate(-5px)}75%{transform:rotateY(180deg) translate(5px)}}.memory .card[data-link]{cursor:pointer}.memory .card[data-link]:hover .face{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #e7b94a,0 0 0 3px #ff7ac2,0 0 22px #ff78bee6}.memory .fx{position:absolute;z-index:1;pointer-events:none;overflow:visible}.memory .fx:before{content:"";position:absolute;inset:0;border:4px solid #ffe27a;border-radius:50%;box-shadow:0 0 12px #ffd86b,inset 0 0 12px #ffd86b;animation:ring .9s ease-out both}@keyframes ring{0%{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.7)}}.memory .fx i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--c, #ffe27a);box-shadow:0 0 8px var(--c, #ffe27a);animation:burst var(--t, 1.2s) cubic-bezier(.1,.7,.3,1) both}.memory .fx i.star,.memory .rain i.star{border-radius:0;clip-path:polygon(50% 0%,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0% 50%,38% 38%)}.memory .fx i.star{width:24px;height:24px;margin:-12px;box-shadow:none}@keyframes burst{0%{opacity:1;transform:translate(0) scale(.5)}30%{transform:translate(calc(var(--dx) * .5),calc(var(--dy) * .5)) scale(1.3)}65%{opacity:1}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}.memory .rain{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;pointer-events:none}.memory .rain i{position:absolute;top:-12px;left:var(--x);width:var(--s, 6px);height:var(--s, 6px);border-radius:50%;background:var(--c, #ffe27a);opacity:0;animation:rain var(--t, 3s) linear both;animation-delay:var(--d, 0s)}@keyframes rain{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}to{opacity:.9;transform:translateY(1000px) rotate(600deg)}}.memory .done{position:absolute;left:50%;top:50%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;max-width:86%;padding:18px 28px 20px;border-radius:16px;background:#460a2ddb;color:#fff;text-align:center;box-shadow:0 10px 30px #0006,inset 0 0 0 2px #e7b94a;transform:translate(-50%,-50%);animation:done .5s ease both}@keyframes done{0%{opacity:0;transform:translate(-50%,-40%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.memory .done b{font:700 24px/1.1 Arial Black,Arial,sans-serif;color:#ffe08a;text-shadow:0 2px 0 rgba(0,0,0,.35)}.memory .done span{font-size:14px;color:#ffd6ec}.memory .done .row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}.memory .done .pill{padding:6px 18px;font-size:15px}.memory .done .plain{background:#ffffff1f;border-color:#fff6;color:#fff;font-size:14px;padding:6px 14px}.memory .stars{display:flex;gap:7px}.memory .stars i{width:28px;height:28px;background:#5e4a5c;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.memory .stars i.lit{background:linear-gradient(#fff3b0,#f2c21b 60%,#c9931a);animation:star .5s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--k, 1) * .18s + .2s)}@keyframes star{0%{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}.memory-page .said{margin-top:10px;text-align:center}.memory-page .used{margin:6px 0 0;color:#777;font-size:12px;line-height:1.6}@media(max-width:600px){.board.memory{gap:7px;padding:10px;border-radius:14px}.board.memory.n24,.board.memory.n30{grid-template-columns:repeat(5,1fr)}.memory-page .plaque{gap:4px 12px;padding:6px 10px}.memory .done{padding:14px 18px 16px}.memory .done b{font-size:20px}}@media(max-width:420px){.board.memory.n20,.board.memory.n24{grid-template-columns:repeat(4,1fr)}}@media(prefers-reduced-motion:reduce){.memory .card,.memory .back:after,.memory .card.found .turn,.memory .card.miss .turn,.memory .fx i,.memory .rain i,.memory .done,.memory .stars i.lit,.board.memory .wait{animation:none}.memory .rain i{opacity:0}.memory .turn{transition:none}}
