*{box-sizing:border-box}
:root{--bg:#071513;--panel:#102822;--teal:#1f8a70;--teal2:#42c7a4;--gold:#ffd166;--gold2:#f59e0b;--cream:#fff8df;--muted:#c9ddd5;--ink:#06100e}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top,#19483e 0,#071513 62%);color:var(--cream);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 14%,rgba(66,199,164,.15),transparent 15%),radial-gradient(circle at 88% 8%,rgba(255,209,102,.13),transparent 16%),linear-gradient(30deg,rgba(255,255,255,.025) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.025) 87.5%);background-size:auto,auto,44px 76px}
button{font:inherit;border:0;cursor:pointer}
.hidden{display:none!important}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;background:rgba(7,21,19,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,209,102,.22)}
.logo{font-weight:900;font-size:14px;color:var(--gold);text-decoration:none;letter-spacing:1.4px}
nav{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
nav a{text-decoration:none;color:#dbf4ec;padding:8px 10px;border-radius:999px;font-size:13px;font-weight:800}
nav a.active,nav a:hover{background:var(--gold);color:var(--ink)}
.wrap{max-width:880px;margin:0 auto;padding:18px 12px 44px}
.intro{min-height:calc(100dvh - 72px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px}
.memory-preview{display:grid;grid-template-columns:repeat(2,70px);gap:10px;transform:rotate(-3deg)}
.memory-preview div{height:84px;display:grid;place-items:center;border-radius:18px;font-size:38px;font-weight:900;background:linear-gradient(145deg,#fdf2bd,var(--gold2));color:#17342d;border:3px solid rgba(255,255,255,.45);box-shadow:0 9px 0 rgba(0,0,0,.24)}
.memory-preview div:nth-child(2),.memory-preview div:nth-child(3){background:linear-gradient(145deg,#277e6b,#0e3b32);color:var(--gold);font-size:28px}
.eyebrow{text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:900;color:#8de0c8;margin:0}
h1{margin:0;font-size:clamp(40px,12vw,70px);line-height:.94;color:var(--gold);text-shadow:0 4px 0 #71520c}
h2{margin:0;color:var(--gold);font-size:clamp(28px,7vw,44px)}
p{margin:0 0 12px;line-height:1.65;font-size:16px;color:var(--muted)}
.intro>p:not(.eyebrow){max-width:620px}
.primary{padding:16px 34px;border-radius:18px;background:linear-gradient(135deg,#fff6c8,var(--gold),var(--gold2));color:#17211d;font-weight:900;font-size:16px;box-shadow:0 8px 0 #75540a}
button:active{transform:translateY(3px)}
.game-panel{padding-top:12px;min-height:calc(100dvh - 100px)}
.game-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}
.small-button{padding:11px 16px;border-radius:14px;background:rgba(255,255,255,.09);border:1px solid rgba(255,209,102,.28);color:var(--cream);font-weight:900}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.stats div,.card{background:rgba(255,255,255,.07);border:1px solid rgba(141,224,200,.18);border-radius:22px;box-shadow:0 9px 0 rgba(0,0,0,.16)}
.stats div{text-align:center;padding:11px 8px}
.stats span{display:block;font-size:12px;color:#8de0c8;font-weight:900;text-transform:uppercase;letter-spacing:.7px}
.stats b{font-size:22px;color:var(--gold)}
.game-shell{padding:10px;border-radius:28px;background:linear-gradient(145deg,#2aa184,#f2c14e);box-shadow:0 14px 0 rgba(0,0,0,.24)}
.memory-board{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:10px;border-radius:22px;background:#071c18}
.memory-card{position:relative;aspect-ratio:.78;background:none;padding:0;perspective:900px;border-radius:17px}
.card-inner{position:absolute;inset:0;display:block;transition:transform .52s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.memory-card.flipped .card-inner,.memory-card.matched .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:17px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.card-face span{display:grid;place-items:center;width:100%;height:100%}
.card-back{background:linear-gradient(145deg,#227763,#0c4035);border:2px solid rgba(141,224,200,.34);box-shadow:inset 0 0 0 5px rgba(255,255,255,.035),0 6px 0 rgba(0,0,0,.28);color:var(--gold);font-size:clamp(24px,7vw,44px)}
.card-back:after{content:"";position:absolute;inset:12%;border:2px solid rgba(255,209,102,.35);border-radius:11px;transform:rotate(45deg)}
.card-front{transform:rotateY(180deg);background:linear-gradient(145deg,#fff7d0,#f5c451);border:2px solid rgba(255,255,255,.65);box-shadow:0 6px 0 #8a6107;color:#153b32;font-size:clamp(28px,8vw,54px)}
.memory-card.matched .card-front{background:linear-gradient(145deg,#d9fff2,#62d6b6);box-shadow:0 6px 0 #176c5a,0 0 20px rgba(98,214,182,.4)}
.memory-card:focus-visible{outline:4px solid #fff;outline-offset:3px}
.message{margin:13px 0 0;padding:13px;border-radius:17px;background:rgba(255,255,255,.07);border:1px solid rgba(141,224,200,.16);text-align:center;font-weight:900;color:#effff9}
.trophy{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;font-size:68px;background:linear-gradient(145deg,#fff2a8,var(--gold2));box-shadow:0 14px 0 rgba(0,0,0,.25),0 0 34px rgba(255,209,102,.28)}
.content,.page{max-width:880px;margin:0 auto;padding:30px 12px 70px}
.card{padding:23px;margin:16px 0}
.card h2{margin-bottom:12px}
.feature{background:linear-gradient(145deg,rgba(66,199,164,.13),rgba(255,209,102,.08))}
footer{text-align:center;padding:24px;font-size:13px;color:#8de0c8}
@media(max-width:620px){.topbar{align-items:flex-start;flex-direction:column}.wrap{padding-left:10px;padding-right:10px}.game-heading{align-items:center}.game-heading h2{font-size:29px}.memory-board{gap:7px;padding:8px}.card-face{border-radius:13px}.card{padding:18px}}
@media(max-width:360px){nav a{padding:7px 8px}.stats b{font-size:19px}.memory-board{gap:5px}.game-shell{padding:7px}.memory-card{border-radius:11px}}