:root{--night:#1E1A5C;--deep:#16124A;--raised:#2A2470;--moon:#FFD36E;--ink:#FFF8EC;--soft:#CFC8F0;--pink:#FF8FB1}
*{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--ink);font-family:'Nunito',system-ui,sans-serif}
body{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:14px max(16px,env(safe-area-inset-left)) 28px}
.bar{width:100%;max-width:640px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.back{color:var(--soft);text-decoration:none;font-weight:800}
.back:hover{color:var(--moon)}
h1{font-family:'Fredoka',sans-serif;font-size:clamp(1.6rem,6vw,2.3rem);margin:14px 0 4px;text-align:center}
.sub{color:var(--soft);text-align:center;margin:0 0 14px}
.modes{display:flex;gap:8px;margin-bottom:16px}
.modes button{font:inherit;font-weight:800;border:2px solid rgba(255,243,196,.25);background:transparent;color:var(--ink);border-radius:999px;padding:9px 18px;cursor:pointer;font-size:1rem}
.modes button[aria-pressed="true"]{background:var(--moon);color:var(--deep);border-color:var(--moon)}
.grid{display:grid;gap:12px;width:100%;max-width:560px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{aspect-ratio:1;perspective:700px;border:0;padding:0;background:none;cursor:pointer;border-radius:20px}
.card:focus-visible{outline:4px solid var(--moon);outline-offset:3px}
.inner{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}
.card.up .inner,.card.done .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;overflow:hidden}
.back-face{background:radial-gradient(circle at 70% 30%,#3A33A0,#2A2470 60%);border:3px solid rgba(255,243,196,.25)}
.back-face svg{width:46%;height:46%}
.front-face{background:#fff;transform:rotateY(180deg);border:4px solid var(--moon)}
.front-face img{width:100%;height:100%;object-fit:cover}
.card.done .front-face{border-color:#6BCB77;box-shadow:0 0 0 4px rgba(107,203,119,.35)}
.status{margin-top:16px;font-weight:800;color:var(--soft);min-height:1.6em;text-align:center}
.win{display:none;flex-direction:column;align-items:center;gap:10px;margin-top:10px;text-align:center}
.win.show{display:flex}
.win b{font-family:'Fredoka',sans-serif;font-size:2rem;color:var(--moon)}
.again{font:inherit;font-weight:800;font-size:1.1rem;border:0;border-radius:999px;padding:14px 26px;background:var(--moon);color:var(--deep);cursor:pointer}
@media (prefers-reduced-motion:reduce){.inner{transition:none}}