.vault-memory{--c-surface:#fff;--c-surface-2:#f6f8fb;--c-border:#e2e5e9;--k-chisel:#27354c;--c-primary:#226e61;--c-text:#151719;--c-soft-grad:linear-gradient(135deg,#eaf3fc,#fff4e9);--ease:cubic-bezier(.22,1,.36,1);width:100%;max-width:340px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px;box-sizing:border-box}
.vault-memory .tile{position:relative;inline-size:var(--w,90px);block-size:var(--h,108px);padding:0;border:0;background:none;border-radius:16px;perspective:800px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex:none}
.vault-memory .tile .inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .42s var(--ease);border-radius:16px}
.vault-memory .tile.up .inner{transform:rotateY(180deg)}
.vault-memory .tile .face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.vault-memory .tile .back{background:var(--c-surface);box-shadow:0 0 0 1px var(--c-border),0 1px 2px color-mix(in oklab,var(--k-chisel) 6%,transparent);display:grid;place-items:center}
.vault-memory .tile .back::before{content:"";position:absolute;inset:6px;border-radius:11px;background:var(--c-soft-grad);opacity:.55}
.vault-memory .tile .back .mkw{position:relative;opacity:.9}
.vault-memory .tile:hover:not(.up) .back{box-shadow:0 0 0 1.5px color-mix(in oklab,var(--c-primary) 45%,transparent)}
.vault-memory .tile:active:not(.up) .inner{transform:scale(.96)}
.vault-memory .tile .front{transform:rotateY(180deg);background:var(--c-surface-2);box-shadow:0 0 0 1px var(--c-border)}
.vault-memory .tile .front img{inline-size:100%;block-size:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.vault-memory .tile .nm{position:absolute;inset-inline:0;inset-block-end:0;padding:3px 4px 4px;font-size:clamp(11px,calc(var(--w,90px) * .14),14px);font-weight:800;line-height:1.2;text-align:center;color:var(--c-text);
  background:color-mix(in srgb,var(--c-surface) 86%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(102%);transition:transform .35s var(--ease) .15s}
.vault-memory .tile.matched .nm{transform:none}
.vault-memory .tile.matched{cursor:default}
.vault-memory .tile.matched .front{box-shadow:0 0 0 2.5px var(--c-primary)}
.vault-memory .tile.matched .inner{animation:matched .5s var(--ease)}
@keyframes matched{0%{transform:rotateY(180deg)}45%{transform:rotateY(180deg) scale(1.07)}100%{transform:rotateY(180deg)}}
.vault-memory .tile.shake .inner{animation:shake .38s ease-in-out}
@keyframes shake{0%,100%{transform:rotateY(180deg)}25%{transform:rotateY(180deg) translateX(-4px) rotate(-1.5deg)}75%{transform:rotateY(180deg) translateX(4px) rotate(1.5deg)}}
.board.revealed .vault-memory .tile:not(.matched) .front{box-shadow:0 0 0 1.5px color-mix(in oklab,var(--c-primary) 30%,transparent)}

.vault-memory .tile{width:100%;height:auto;aspect-ratio:5/6;min-height:70px}.vault-memory .back b{position:relative;font:800 15px Assistant,sans-serif;color:#272c35}.vault-memory .front img.contain{object-fit:contain;background:#fff;padding:5px;box-sizing:border-box}.vault-memory .fallback{display:grid;place-items:center;height:100%;font:800 38px Assistant}.vault-memory .tile:focus-visible{outline:3px solid #2968bf;outline-offset:4px}.vault-memory .memory-hint{grid-column:1/-1;min-height:40px;border:1px solid #e2e5e9;border-radius:12px;background:#fff;font:700 14px Assistant}.vault-memory .memory-hint:disabled{opacity:.45}#vaultPuzzleStage:has(.vault-memory){flex:0 1 auto;min-height:0;background:none}.vault-memory .tile .nm{display:none}@media(prefers-reduced-motion:reduce){.vault-memory .inner{transition:none!important;animation:none!important}}