:root { --ink: #20412b; --muted: #5f7f68; --panel: rgba(255,255,255,0.86); --green: #61c469; --yellow: #ffe47a; --pink: #ff8bb3; --shell-pad: clamp(.55rem, 2.5vw, 1.8rem); --chrome-space: 17.4rem; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; font-family: 'Nunito', sans-serif; color: var(--ink); background: radial-gradient(circle at 15% 20%, rgba(255,228,122,.9), transparent 24%), radial-gradient(circle at 88% 14%, rgba(255,139,179,.55), transparent 24%), linear-gradient(160deg, #d7ffd9 0%, #edffe6 48%, #bcecff 100%); }
button, a { font: inherit; }
.app-shell { height: 100vh; height: 100dvh; padding: var(--shell-pad); overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: clamp(.4rem, 1.5vh, .9rem); }
.toolbar, .hero-card, .memory-card, .bottom-actions { border: 3px solid rgba(32,65,43,.12); background: var(--panel); box-shadow: 0 16px 0 rgba(32,65,43,.08), 0 20px 46px rgba(43,103,65,.14); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 2rem; padding: 1rem 1.2rem; }
.eyebrow { margin: 0 0 .15rem; color: #e35a87; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: .75rem; }
h1 { margin: 0; font-family: 'Fredoka', sans-serif; font-size: clamp(1.8rem, 6vw, 3.7rem); line-height: .95; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.bottom-actions { justify-content: center; max-width: 760px; width: 100%; margin: 0 auto; border-radius: 1.5rem; padding: .8rem 1rem; }
button, #goBack { border: 0; border-radius: 999px; padding: .72rem 1rem; background: #fff; color: var(--ink); font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: inset 0 -4px rgba(32,65,43,.08); }
button:hover, button:focus-visible, #goBack:hover, #goBack:focus-visible { outline: 3px solid rgba(97,196,105,.45); transform: translateY(-2px); }
.hero-card { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin: 0 auto; border-radius: 1.3rem; padding: .78rem 1rem; max-width: 920px; width: 100%; }
.hero-card p { margin: 0; color: var(--muted); font-weight: 800; }
.hero-card div { display: flex; gap: .7rem; flex-wrap: wrap; font-weight: 800; }
.hero-card span { border-radius: 999px; background: #f7fff2; padding: .48rem .72rem; }
.card-grid { --board-size: min(700px, calc(100vw - (var(--shell-pad) * 2)), calc(100dvh - var(--chrome-space))); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.4rem, 1.2vmin, .85rem); width: clamp(220px, var(--board-size), 700px); height: clamp(220px, var(--board-size), 700px); margin: 0 auto; align-self: center; }
.memory-card { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 1.6rem; cursor: pointer; padding: .8rem; overflow: hidden; perspective: 1200px; }
.card-inner { position: absolute; inset: .7rem; border-radius: 1.1rem; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform .28s ease; }
.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: inherit; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.card-back { background: repeating-linear-gradient(45deg, #61c469 0 14px, #80d787 14px 28px); color: #fff; font-size: clamp(2rem, 10vw, 4rem); }
.card-front { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; justify-items: center; gap: .3rem; padding: .45rem; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); background: #fffef0; }
.card-front img { width: min(72%, 96px); height: min(72%, 96px); align-self: center; object-fit: contain; }
.card-front span { display: block; max-width: 100%; font-size: .9rem; line-height: 1.05; text-align: center; font-weight: 800; color: var(--muted); text-wrap: balance; }
.matched { border-color: rgba(97,196,105,.75); }
#confettiLayer { pointer-events: none; position: fixed; inset: 0; overflow: hidden; }
.confetti-piece { position: absolute; top: -24px; width: 14px; height: 22px; border-radius: 4px; animation: fall var(--duration) linear forwards; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@keyframes fall { to { transform: translate(var(--x), 105vh) rotate(var(--spin)); opacity: .2; } }
@media (max-height: 920px) { :root { --shell-pad: clamp(.45rem, 1.6vw, 1.1rem); --chrome-space: 15.6rem; } .toolbar { padding: .78rem .98rem; border-radius: 1.5rem; } h1 { font-size: clamp(1.55rem, 4vw, 2.5rem); } .hero-card { padding: .62rem .82rem; gap: .5rem; } .hero-card p { font-size: .94rem; } .hero-card span { padding: .4rem .58rem; } .bottom-actions { padding: .66rem .72rem; } button, #goBack { padding: .58rem .84rem; } }
@media (max-width: 680px) { :root { --chrome-space: 14.2rem; } .hero-card { align-items: stretch; flex-direction: column; } .card-grid { gap: .34rem; width: clamp(220px, var(--board-size), 540px); height: clamp(220px, var(--board-size), 540px); } .memory-card { padding: .42rem; } .card-inner { inset: .38rem; } .bottom-actions { align-items: center; flex-direction: row; } }
@media (max-width: 560px) { :root { --shell-pad: .42rem; --chrome-space: 12.8rem; } .toolbar { padding: .5rem .65rem; border-radius: 1.1rem; } .eyebrow { display: none; } h1 { font-size: clamp(1.24rem, 5.8vw, 1.65rem); } .hero-card { gap: .25rem; padding: .4rem .52rem; border-radius: .95rem; } .hero-card p { font-size: .82rem; } .hero-card span { padding: .24rem .38rem; font-size: .82rem; } .card-grid { gap: .24rem; width: min(100%, calc(100dvh - var(--chrome-space))); height: min(100%, calc(100dvh - var(--chrome-space))); } .memory-card { border-radius: .8rem; padding: .24rem; } .card-inner { inset: .24rem; border-radius: .72rem; } .card-front { gap: .14rem; padding: .18rem; } .card-front img { width: min(64%, 54px); height: min(64%, 54px); } .card-front span { font-size: .48rem; line-height: .98; } .bottom-actions { align-items: center; flex-direction: row; gap: .32rem; padding: .44rem; border-radius: .95rem; } .bottom-actions button, #goBack { flex: 1 1 6.7rem; padding: .46rem .6rem; } }
@media (max-height: 720px) { :root { --chrome-space: 11.8rem; } .toolbar { padding: .44rem .64rem; border-radius: .95rem; } h1 { font-size: clamp(1.15rem, 3.1vw, 1.5rem); } .hero-card p { font-size: .8rem; } .hero-card div { gap: .38rem; } .hero-card span { font-size: .8rem; padding: .2rem .38rem; } .bottom-actions { gap: .3rem; padding: .38rem; } button, #goBack { padding: .42rem .56rem; font-size: .85rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
#goBack{display:inline-flex;align-items:center;justify-content:center;text-align:center}