/* Gameplay only. Shared page/header/dialog rules remain in page.css. */
.memory-stage{padding:5px 0 12px;position:relative}
.memory-board{width:100%;padding:3px;box-sizing:border-box;position:relative}
.memory-board.is-portrait{width:min(100%,max(280px,calc(75svh - 190px)));margin-inline:auto}
.memory-grid{--size:3;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));gap:clamp(6px,2.1cqw,10px);isolation:isolate}
.memory-card{appearance:none;border:0;padding:0;margin:0;min-width:0;width:100%;aspect-ratio:1;display:block;position:relative;background:transparent;border-radius:clamp(9px,3cqw,15px);perspective:850px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#e8cf99}
.memory-card:focus-visible{outline:3px solid #f2d69a;outline-offset:3px;z-index:2}
.memory-card:disabled{cursor:default;opacity:1}
.card-turn{display:block;position:absolute;inset:0;transform-style:preserve-3d;border-radius:inherit;box-shadow:0 5px 13px #0006}
.memory-card.is-open .card-turn{transform:rotateY(180deg)}
/* Rotation has one uninterrupted easing curve; depth settles independently. */
.card-depth{position:absolute;inset:0;display:block;border-radius:inherit;transform-style:preserve-3d;transform:translateZ(0)}
.memory-card.is-opening .card-turn{animation:memory-reveal 760ms cubic-bezier(.32,.04,.2,1) both}
.memory-card.is-closing .card-turn{animation:memory-conceal 760ms cubic-bezier(.32,.04,.2,1) both}
.memory-card.is-opening .card-depth,.memory-card.is-closing .card-depth{animation:memory-depth 920ms cubic-bezier(.37,0,.63,1) both}
@keyframes memory-reveal{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}
@keyframes memory-conceal{from{transform:rotateY(180deg)}to{transform:rotateY(0deg)}}
/* Every depth is behind the resting plane. Neither scale nor angle overshoots. */
@keyframes memory-depth{0%{transform:translateZ(0)}58%{transform:translateZ(-8px)}77%{transform:translateZ(-20px)}89%{transform:translateZ(-2px)}96%{transform:translateZ(-5px)}100%{transform:translateZ(0)}}
body.memory-paused .card-turn,body.memory-paused .card-depth,body.memory-paused .card-face::after{animation-play-state:paused}
.card-side{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-back{transform:translateZ(.25px);border:1px solid #b89658;background:radial-gradient(ellipse at 25% 0%,#36696b7a,transparent 70%),linear-gradient(140deg,#183f45,#102c36 52%,#0a202b);box-shadow:inset 0 0 0 3px #112a31,inset 0 0 0 4px #c3a66a55,inset 0 1px 0 #ffffcc40}
.card-back:before{content:"";position:absolute;inset:10%;border:1px solid #d7bd804d;border-radius:3px;transform:rotate(45deg) scale(.7)}
.card-back:after{content:"";position:absolute;inset:10%;background:linear-gradient(115deg,transparent 30%,#eddaa515 48%,transparent 65%);border-radius:inherit;pointer-events:none}
.card-back img{width:53%;height:53%;opacity:.95}
.card-face{visibility:hidden;transform:rotateY(180deg) translateZ(.25px);background-color:#f2e9db;background-image:var(--atlas);background-size:300% 600%;background-position:var(--photo-x) var(--photo-y);border:1px solid #c6ac79;box-shadow:inset 0 0 0 3px #fff8;transition:box-shadow 220ms}
/* Do not composite the concealed photograph after the flip has settled. */
.memory-card.is-open .card-face,.memory-card.is-opening .card-face,.memory-card.is-closing .card-face{visibility:visible}
.memory-card.is-open .card-back{visibility:hidden}
.memory-card.is-opening .card-back,.memory-card.is-closing .card-back{visibility:visible}
.memory-card.is-matched .card-face{border-color:#e5d59e;box-shadow:inset 0 0 0 3px #cfb67c,0 0 12px #c5b57930}
.memory-card.is-new-pair .card-face::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px #fff2ca;opacity:0;pointer-events:none;animation:pair-found 480ms ease-out}
@keyframes pair-found{0%,100%{opacity:0}40%{opacity:.7}}
.memory-centre{aspect-ratio:1;display:grid;place-items:center;position:relative;opacity:.75}
.memory-centre:before,.memory-centre:after{content:"";position:absolute;inset:21%;border:1px solid #bda47144;border-radius:50%}
.memory-centre:after{inset:30%;border-radius:6px;transform:rotate(45deg)}
.memory-centre img{width:28%;height:28%;opacity:.8}
.memory-caption{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 8px 0;color:#d1bc94;font-size:12px;letter-spacing:.06em}
.caption-line{height:1px;width:36px;background:linear-gradient(90deg,transparent,#c6a96d66)}
.caption-line:last-child{transform:rotate(180deg)}
.memory-error{font-size:14px;color:#f2c5b9;line-height:1.5;padding:12px;border:1px solid #ad8064;border-radius:10px}
.memory-stage #retry{width:100%}
.memory-board[aria-busy="true"]{pointer-events:none}
.memory-result{text-align:center}
.memory-result-emblem{width:76px;height:76px;display:grid;place-items:center;margin:0 auto 20px;border:1px solid #bf9e61;border-radius:24px;color:#f0d29a;font-size:56px;background:radial-gradient(ellipse at top,#34595d,#102a30);box-shadow:0 8px 30px #0005}
.memory-result .eyebrow{color:#ccb58b;font-size:12px;letter-spacing:.08em}
.memory-result h2{font-size:clamp(24px,6.5cqw,30px);line-height:1.2}
.memory-result-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:24px 0}
.memory-result-values div{display:flex;flex-direction:column;padding:15px 4px;border:1px solid #b89c5a40;background:#ffffff04;border-radius:12px;gap:7px}
.memory-result-values strong{font-size:23px;color:#f0d29a}.memory-result-values span{font-size:11px;color:#c5c4bd;line-height:1.3}
.memory-result>.primary-button,.memory-result>.secondary-button{width:100%;margin-top:10px;justify-content:center}
body.memory-reduced .memory-card .card-turn,body.memory-reduced .memory-card .card-depth,body.memory-reduced .card-face::after{animation:none}
@media(prefers-reduced-motion:reduce){.memory-card .card-turn,.memory-card .card-depth,.card-face::after{animation:none}}
@container gf-page (min-width:600px){.memory-board.is-portrait{width:min(100%,max(280px,calc(75svh - 240px)))}.memory-stage{max-width:810px;width:calc(100% - 32px);margin-inline:auto}.memory-grid{gap:14px}.memory-caption{font-size:15px;margin-top:20px}}