@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
:root{font-family:Outfit,system-ui,sans-serif;color:#edf2fc;background:#0c1425;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 10%,#27527c44,transparent 55%);min-height:100vh}button,select{font:inherit}button{cursor:pointer;border:1px solid #ffffff18;background:#243651;color:#f2f5ff;border-radius:11px;padding:12px 16px}button:disabled{cursor:default}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #ffda75;outline-offset:3px}main{max-width:900px;margin:auto;padding:25px 24px}header{display:flex;justify-content:space-between;align-items:center}header a{font-size:12px;text-decoration:none;color:#b8cce8}header button{width:38px;height:38px;border-radius:50%;padding:0;font-size:20px}.memory-intro{display:flex;justify-content:space-between;align-items:center;padding:30px 0 25px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700;color:#7bd5ee}h1{font-size:47px;letter-spacing:-1.7px;line-height:1.06;margin:15px 0}em{font-style:normal;color:#9adef4}.memory-intro p{font-size:13px;color:#9db2d0}.memory-intro img{width:170px;height:180px;object-fit:contain;transform:rotate(8deg);filter:drop-shadow(0 12px 24px #2f9fd133)}.memory-game{background:#17253c;border:1px solid #ffffff12;border-radius:24px;padding:25px;box-shadow:0 20px 60px #0003}.memory-stats{display:flex;justify-content:space-between;align-items:center;gap:10px}.memory-stats small,.memory-stats label{color:#91a9c8;font-size:9px;letter-spacing:1.5px}.memory-stats strong{display:block;font-size:24px;color:#e4f5ff;margin-top:6px}.memory-stats select{display:block;font-size:22px;font-weight:700;width:100px;margin-top:4px;border:0;background:transparent;color:#fff}.memory-progress{height:5px;background:#0d182b;border-radius:4px;overflow:hidden;margin:20px 0 9px}.memory-progress span{display:block;height:100%;background:linear-gradient(90deg,#79c7e7,#ffe093);transition:width .3s}#memory-target{font-size:10px;color:#a5bad7;margin:0 0 18px;text-align:center}#memory-board{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:10px}.memory-card{aspect-ratio:.86;border-radius:13px;padding:6px;position:relative;overflow:hidden;touch-action:manipulation;background:linear-gradient(145deg,#2d4972,#1a2e4d);border:1px solid #87bdf43a;box-shadow:inset 0 0 0 5px #162d4840,0 3px 6px #0002;transition:background .2s,transform .15s}.memory-card:not(:disabled):hover{transform:translateY(-3px);border-color:#c1e8ff}.card-back{display:grid;place-content:center;align-items:center;text-align:center;height:100%;font-size:32px;color:#8fcceb}.card-back small{font-size:7px;letter-spacing:2px;color:#668db9;margin-top:7px}.memory-card.face-up{background:radial-gradient(ellipse at 50% 40%,#426286,#263955);border-color:#b7e2fc88;animation:revealCard .22s ease-out}.memory-card img{width:100%;height:80%;object-fit:contain;filter:drop-shadow(0 3px 4px #0004)}.memory-card.matched{background:radial-gradient(ellipse at 50% 40%,#487366,#203c3e);border-color:#8dd9b688}.card-name{display:block;font-size:clamp(7px,1.1vw,10px);color:#e0edff;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:1.2}.match-check{position:absolute;top:5px;right:6px;color:#9ce6be;font-size:12px}.character-aurora{filter:hue-rotate(80deg)!important}.character-violet{filter:hue-rotate(240deg)!important}.character-rose{filter:hue-rotate(290deg) saturate(.8)!important}.character-ruby{filter:hue-rotate(325deg) saturate(1.6)!important}.character-ice{filter:hue-rotate(145deg)!important}.character-lime{filter:hue-rotate(45deg) saturate(1.3)!important}#memory-status{text-align:center;min-height:35px;line-height:1.5;font-size:12px;color:#b6cbe6;margin:18px 0 10px}.memory-actions{display:flex;justify-content:space-between;gap:10px}.memory-actions button{font-size:12px}#memory-next,#memory-win-next,#memory-help-close{background:#ffce59;color:#30210a;font-weight:700}.memory-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:25px 0}.memory-notes>div{background:#142136;padding:16px;border-radius:14px;font-size:17px;color:#80cde9}.memory-notes b{display:block;font-size:12px;color:#e0ecfc;margin:6px 0}.memory-notes span{font-size:10px;line-height:1.6;color:#94accb;display:block}footer{text-align:center;font-size:8px;letter-spacing:2px;color:#7391b3;padding:10px 0}footer>span{color:#ffd478;margin:0 8px}footer p{font-size:9px;letter-spacing:0;line-height:1.7;color:#6e87a8;max-width:550px;margin:13px auto}dialog{background:radial-gradient(ellipse at 50% 30%,#2c4969,#16243c);color:#edf2fc;border:1px solid #a7d6f63b;max-width:440px;width:92%;border-radius:22px;padding:26px;max-height:92dvh;overflow-y:auto;line-height:1.6}dialog::backdrop{background:#050c1bcc;backdrop-filter:blur(6px)}dialog h2{line-height:1.2}dialog p{font-size:13px;color:#b7cce6}#memory-win{text-align:center}#memory-win button{width:100%;margin-top:10px}.secondary{background:transparent;color:#a9c3df}.memory-celebration{display:flex;align-items:center;justify-content:center;gap:12px;color:#ffdc77;font-size:30px}.memory-celebration img{width:140px;height:145px;object-fit:contain;animation:memoryCheer 1s ease-in-out 3}#memory-win-stars{color:#ffde82;font-size:29px;letter-spacing:5px;margin:10px 0}#memory-win-bonus{display:block;font-size:23px;color:#ffdd84}#memory-win-tip{font-size:11px}@keyframes revealCard{from{transform:scale(.9);opacity:.5}to{transform:scale(1);opacity:1}}@keyframes memoryCheer{0%,100%{transform:rotate(-5deg)}50%{transform:translateY(-9px) rotate(5deg)}}@media(max-width:550px){main{padding:20px 13px}.memory-intro{padding:20px 5px}h1{font-size:34px}.memory-intro img{width:105px;height:135px}.memory-intro p{font-size:11px;max-width:220px}.memory-game{padding:15px;border-radius:20px}.memory-stats strong{font-size:20px}.memory-stats select{font-size:19px;width:72px}.memory-stats small,.memory-stats label{font-size:8px}#memory-board{gap:6px}.memory-card{border-radius:8px;padding:3px}.card-back{font-size:23px}.card-back small{font-size:5px;letter-spacing:1px}.card-name{font-size:7px}.memory-notes{gap:7px}.memory-notes>div{padding:12px}.memory-notes b{font-size:10px}.memory-notes span{font-size:9px}.match-check{font-size:10px;top:2px;right:4px}}@media(prefers-reduced-motion:reduce){.memory-card.face-up,.memory-celebration img{animation:none}.memory-progress span{transition:none}}

.next-reward{margin:0 0 16px;padding:13px 16px;background:#28342d;border:1px solid #ffcf5930;border-radius:12px;color:#ffe096;font-size:12px;line-height:1.6}.memory-collection{background:#142136;border:1px solid #ffffff12;padding:24px;border-radius:22px;margin:24px 0}.memory-collection h2{font-size:27px;margin:12px 0}.memory-collection h3{font-size:15px;margin:24px 0 10px}.memory-collection p{font-size:12px;line-height:1.6;color:#a5bad8}.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.memory-badge{display:flex;flex-direction:column;align-items:center;text-align:center;background:#0f1b2d;border:1px dashed #ffffff17;border-radius:13px;padding:14px 8px;opacity:.5}.memory-badge>span{font-size:24px;height:35px;color:#7e94b3}.memory-badge b{font-size:11px;margin:9px 0;color:#bacce6}.memory-badge small{font-size:10px;color:#819abf;line-height:1.5}.memory-badge.earned{opacity:1;border-style:solid;border-color:#ffd16c55;background:linear-gradient(145deg,#423e2c,#1e2b3b)}.memory-badge.earned>span{color:#ffda6f}.memory-badge.earned b{color:#ffe6a3}.back-options{display:flex;flex-wrap:wrap;gap:8px}.back-options button{font-size:11px;padding:10px 12px}.back-options button:disabled{opacity:.4}.back-options button[aria-pressed="true"]{border-color:#ffdc7b;background:#3a392a;color:#ffe7a0}.guardian-reward{display:flex;align-items:center;gap:25px;padding-top:20px;margin-top:25px;border-top:1px solid #ffffff10}.guardian-portrait{position:relative;flex-shrink:0;width:125px;height:155px}.guardian-portrait img{width:100%;height:100%;object-fit:contain}.prism-guardian,.character-guardian{filter:hue-rotate(135deg) saturate(.9) drop-shadow(0 0 13px #73e3de55)!important}.guardian-portrait>span{position:absolute;top:0;right:0;color:#ffdc76;font-size:27px}.guardian-reward h3{font-size:23px;margin:10px 0}.card-back{border-radius:9px}.card-back.back-ice{background:radial-gradient(ellipse at 50% 30%,#91deff55,#153552);color:#b9eeff;text-shadow:0 0 13px #aee8ff}.card-back.back-galaxy{background:radial-gradient(circle at 25% 20%,#ffffff80 0 1px,transparent 2px),radial-gradient(circle at 75% 70%,#e8c0ff99 0 1px,transparent 2px),linear-gradient(145deg,#593a85,#172b53);color:#dfb6ff}.card-back.back-guardian{background:radial-gradient(ellipse at 50% 50%,#66d9d755,#113948);color:#b2fff1}.card-back.back-gold{background:linear-gradient(145deg,#9a7c28,#4d3a18);color:#fff0af;text-shadow:0 0 12px #ffde6d}.card-back.back-gold small{color:#ecd695}body[data-memory-back="gold"] .memory-card{border-color:#e7c465;box-shadow:inset 0 0 0 3px #cda84b33,0 0 10px #ffde6d15}body[data-memory-theme="galaxy"]{background:radial-gradient(circle at 10% 20%,#fff8 0 1px,transparent 2px),radial-gradient(circle at 80% 50%,#fff8 0 1px,transparent 2px),radial-gradient(ellipse at 70% 5%,#5a28846b,transparent 55%),#100f27;background-size:170px 200px,270px 310px,100% 100%,auto}body[data-memory-theme="galaxy"] .memory-game{background:#251d40eb}.win-reward{padding:12px;background:#34554b55;border-radius:12px;color:#c1f4e5!important}@media(max-width:550px){.memory-collection{padding:16px}.badge-grid{grid-template-columns:repeat(2,1fr)}.guardian-reward{gap:12px}.guardian-portrait{width:85px;height:115px}.guardian-reward h3{font-size:19px}.memory-collection p{font-size:11px}.next-reward{font-size:11px}}

/* Stable two-sided card elements keep the 3D flip continuous between turns. */
#memory-board{perspective:1100px}.memory-card,.memory-card.face-up,.memory-card.matched{background:transparent!important;border:0;box-shadow:none!important;padding:0;overflow:visible;isolation:isolate;perspective:800px;animation:none}.memory-card{transition:transform .18s;z-index:0}.memory-card:focus-visible{outline-offset:5px}.memory-card.just-matched{z-index:2}.memory-flipper{position:absolute;inset:0;display:block;border-radius:inherit;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform .48s cubic-bezier(.2,.75,.25,1)}.memory-card.face-up .memory-flipper{transform:rotateY(180deg)}.memory-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:inherit;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #87bdf455;box-shadow:inset 0 0 0 4px #162d4840,0 5px 12px #0003}.memory-face-back{background:linear-gradient(145deg,#385681,#1a2e4d)}.memory-face-back>.card-back{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.memory-face-back .card-back small{margin:0}.memory-face-front{transform:rotateY(180deg);background:radial-gradient(ellipse at 50% 35%,#50739b,#20344f);border-color:#b6defa99;padding:5px}.memory-face-front img{height:78%;width:95%;object-fit:contain}.memory-face-front .card-name{width:100%;text-align:center;flex-shrink:0;line-height:1.4}.memory-face-front .match-check{opacity:0}.matched .memory-face-front .match-check{opacity:1}.matched .memory-face-front{background:radial-gradient(ellipse at 50% 40%,#496f66,#1a3b3c);border-color:#a5efd2}.memory-face-front:after{content:'';pointer-events:none;position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 40%,#ffffff4d 49%,transparent 58%);transform:translateX(-90%);opacity:0}.just-matched .memory-face-front:after{animation:memoryShine .75s .1s ease-out both}.just-matched .memory-face-front{animation:memoryMatchGlow .85s ease-out both}.just-matched .memory-face-front img{animation:memoryMatchPop .6s .1s ease-out}.memory-match-burst{position:absolute;inset:0;display:block;pointer-events:none;z-index:4}.memory-match-burst i{position:absolute;left:50%;top:50%;width:5px;height:9px;border-radius:2px;background:#ffdf80;opacity:0}.just-matched .memory-match-burst i{animation:memorySpark .72s ease-out calc(.15s + var(--delay)) both}.memory-match-burst i:nth-child(2n){background:#a0f7e0}.memory-match-burst i:nth-child(3n){background:#d7b6ff}body[data-memory-back="gold"] .memory-face{border:2px solid #e8cd7c;box-shadow:0 0 12px #ffd65f26}.memory-card:not(:disabled):hover .memory-face-back{border-color:#caeaff;box-shadow:0 0 15px #82bff029,inset 0 0 0 4px #ffffff09}@keyframes memoryShine{0%{opacity:0;transform:translateX(-90%)}20%{opacity:1}100%{opacity:0;transform:translateX(90%)}}@keyframes memoryMatchGlow{0%{box-shadow:0 0 0 0 #99ffddaa}40%{box-shadow:0 0 22px 3px #99ffdd99}100%{box-shadow:0 0 0 0 #99ffdd00}}@keyframes memoryMatchPop{0%,100%{transform:scale(1)}45%{transform:scale(1.12) rotate(-4deg)}70%{transform:scale(1.04) rotate(3deg)}}@keyframes memorySpark{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-12px) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-68px) scale(.25)}}@media(max-width:550px){.memory-match-burst i{width:4px;height:7px}.memory-face-front{padding:3px}.memory-face{box-shadow:inset 0 0 0 3px #162d4840,0 3px 7px #0002}}@media(prefers-reduced-motion:reduce){.memory-flipper{transition:none}.memory-card,.memory-card:not(:disabled):hover{transform:none}.memory-match-burst{display:none}.just-matched .memory-face-front,.just-matched .memory-face-front:after,.just-matched .memory-face-front img{animation:none}.memory-face-front:after{display:none}.just-matched .memory-face-front{border-color:#ffe19a;box-shadow:0 0 0 2px #ffe19a55}}

.memory-audio{display:flex;align-items:center;gap:10px;margin-top:18px;padding:10px 12px;background:#0e1a2c;border-radius:12px}.memory-audio button{font-size:11px;padding:8px 11px;min-width:110px;background:#243751}.memory-audio button[aria-pressed="true"]{border-color:#8bdbd966;color:#b8f0e6}.memory-audio label{font-size:10px;color:#a7bfdc;margin-left:auto}.memory-audio input{accent-color:#8ed5e6;width:110px;min-width:45px;height:24px;cursor:pointer}.memory-audio output{font-size:10px;color:#bed3eb;min-width:28px;text-align:right}#memory-audio-note{font-size:10px;color:#a5b9d4}#memory-audio-note:empty{display:none}@media(max-width:450px){.memory-audio{gap:7px;padding:8px}.memory-audio button{min-width:93px;padding:8px;font-size:10px}.memory-audio input{width:75px}.memory-audio label{font-size:9px}}