.memory-page{color:#f3f4ed;background:#141615;min-height:100dvh;padding:0 20px 32px}.memory-topbar{border-bottom:1px solid #343d2f;justify-content:space-between;align-items:center;max-width:1060px;height:72px;margin:auto;display:flex}.memory-topbar>span{letter-spacing:.12em;color:#d4f77d;align-items:center;gap:9px;font-size:.75rem;font-weight:800;display:flex}.memory-content{text-align:center;width:min(100%,520px);margin:32px auto 0}.memory-kicker{color:#a7b59a;letter-spacing:.16em;font-size:.7rem;font-weight:700}.memory-content>h1{letter-spacing:-.055em;margin:6px 0 23px;font-size:clamp(2rem,6vw,3rem);font-weight:800}.memory-content>h1 span{color:#d4f77d}.memory-hud{background:#20261c;border:1px solid #394532;border-radius:13px;grid-template-columns:repeat(3,1fr);padding:16px 0;display:grid}.memory-hud>div+div{border-left:1px solid #394532}.memory-hud small{letter-spacing:.1em;color:#b0bca5;margin-bottom:7px;font-size:.65rem;display:block}.memory-hud strong{font-size:1.25rem}.memory-hud strong span{color:#94a186;font-size:.75rem;font-weight:500}.memory-hearts{justify-content:center;align-items:center;gap:5px;height:25px;display:flex}.memory-hearts .alive{color:#e9ad95}.memory-hearts .empty{color:#5c6456}.memory-instruction{min-height:105px;padding:23px 0 15px}.memory-instruction h2{letter-spacing:-.03em;outline:none;margin:0 0 7px;font-size:1.2rem}.memory-instruction p{color:#aebba3;max-width:430px;margin:auto;font-size:.875rem;line-height:1.5}.memory-board-wrap{background:#1e251a;border:1px solid #3b4a30;border-radius:20px;padding:14px;box-shadow:0 18px 50px #0003}.memory-board{grid-template-columns:repeat(var(--size),minmax(0,1fr));gap:clamp(5px,1.8vw,10px);display:grid}.memory-tile{aspect-ratio:1;opacity:1;color:#233315;background:#303b27;border:1px solid #4a573e;border-radius:clamp(6px,1.8vw,12px);place-items:center;padding:0;transition:background .2s,transform .18s,border-color .2s,box-shadow .2s;display:grid;box-shadow:0 3px #11170e}.memory-tile:disabled{cursor:default}.memory-tile:not(:disabled):hover{background:#414f33;border-color:#d4f77d;transform:translateY(-2px)}.memory-tile:not(:disabled):active{box-shadow:none;transform:translateY(2px)scale(.96)}.memory-tile:focus-visible{outline-offset:2px;outline:3px solid #f5ffc6}.memory-tile.lit{animation:.35s both memory-reveal;animation-delay:var(--tile-delay);background:#d4f77d;border-color:#edffc2;box-shadow:0 3px #819b4d,0 0 22px #d4f77d14}.memory-tile.found{background:#a2d6b2;border-color:#c6f3d4;animation:.25s ease-out memory-pop}.memory-tile.wrong{background:#d89785;border-color:#f6b5a1;animation:.3s memory-shake}.memory-tile.missed{color:#d4f77d;box-shadow:none;background:#39482b;border:2px solid #d4f77d}.memory-tile svg{width:42%;height:42%}.memory-tile-mark{opacity:.6;background:currentColor;border-radius:4px;width:18%;height:18%}.memory-preview-track{background:#303c25;border-radius:5px;height:4px;margin:14px 2px 0;overflow:hidden}.memory-preview-track i{background:#d4f77d;height:100%;transition:width 40ms linear;display:block}.memory-action{justify-content:center;align-items:center;min-height:78px;display:flex}.memory-action>button{gap:10px;min-height:48px;padding:0 24px}.memory-action>span{color:#c4d0b8;align-items:center;gap:8px;font-size:.875rem;display:flex}.memory-progression{color:#a6b798;justify-content:center;align-items:center;gap:7px;font-size:.75rem;display:flex}.memory-progression>i{background:#3c4832;border-radius:3px;width:28px;height:5px}.memory-progression>i.done{background:#d4f77d}.memory-progression>span{margin:0 5px}@keyframes memory-reveal{0%{opacity:.35;transform:rotateX(65deg)scale(.92)}to{opacity:1;transform:rotateX(0)scale(1)}}@keyframes memory-pop{50%{transform:scale(.94)}}@keyframes memory-shake{25%,75%{transform:translate(-3px)}50%{transform:translate(3px)}}@media (max-width:600px){.memory-content{margin-top:23px}.memory-page{padding:0 14px 26px}.memory-topbar{height:62px}.memory-topbar>span{gap:5px;font-size:.65rem}.memory-board-wrap{border-radius:15px;padding:10px}.memory-hud{padding:12px 0}.memory-instruction{min-height:116px}}@media (prefers-reduced-motion:reduce){.memory-page *{transition:none!important;animation:none!important}}.memory-board-wrap{width:min(100%,44dvh,440px);margin-inline:auto}@media (max-height:850px){.memory-content{margin-top:16px}.memory-content>h1{margin-bottom:14px;font-size:2rem}.memory-instruction{min-height:98px;padding:16px 0 12px}.memory-action{min-height:66px}}
