:root{--bg-white: #fff5f9;--bg-soft: #fff0f5;--pink: #ff69b4;--pink-light: #ffb6d9;--pink-dark: #d4487a;--pink-deep: #e84393;--rose: #e8a0bf;--red: #e74c6f;--text-dark: #4a2040;--text-muted: #8e5578;--white: #ffffff;--font-romantic: "Great Vibes", "Sarabun", cursive;--font-ui: "Quicksand", "Sarabun", sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-ui);background:var(--bg-white);color:var(--text-dark);overflow:hidden;width:100vw;height:100dvh;position:relative;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.bg-particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.screen{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility .6s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}.screen.active{opacity:1;visibility:visible;pointer-events:auto}.welcome-content{text-align:center;padding:2rem}.welcome-title{font-family:var(--font-romantic);font-size:clamp(2.5rem,10vw,5rem);color:var(--pink-deep);text-shadow:0 0 20px rgba(232,67,147,.2);margin-bottom:.5rem;animation:fadeInDown 1s ease-out}.welcome-subtitle{font-size:clamp(1rem,4vw,1.4rem);color:var(--text-muted);margin-bottom:2.5rem;animation:fadeInDown 1s ease-out .3s both}.start-button{font-family:var(--font-ui);font-size:1.1rem;font-weight:700;color:var(--white);background:linear-gradient(135deg,var(--pink),var(--pink-deep));border:none;border-radius:50px;padding:1rem 2.5rem;cursor:pointer;position:relative;overflow:hidden;animation:fadeInUp 1s ease-out .6s both;transition:transform .2s ease,box-shadow .2s ease}.start-button:hover{transform:scale(1.05);box-shadow:0 0 30px #ff69b466}.start-button:active{transform:scale(.97)}.start-button:after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skew(-20deg);animation:shimmer 3s infinite}.cards-heading{font-family:var(--font-romantic);font-size:clamp(1.8rem,7vw,2.8rem);color:var(--pink-deep);text-shadow:0 0 15px rgba(232,67,147,.15);padding-top:1.5rem;margin-bottom:1rem;flex-shrink:0}.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;padding:.5rem .75rem 2rem;width:100%;max-width:100%;flex-shrink:0}.card{position:relative;border-radius:16px;overflow:hidden;min-height:120px;aspect-ratio:3 / 4;background:var(--white);border:2px solid var(--pink-light);box-shadow:0 4px 15px #ff69b41f;transition:all .4s ease}.card:before{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,105,180,.06),transparent);transform:skew(-20deg);animation:shimmer 4s infinite;z-index:1;pointer-events:none}.card-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}.card-image img{width:100%;height:100%;object-fit:cover;border-radius:14px}.card-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pink-light),var(--pink));border-radius:14px;font-family:var(--font-romantic);font-size:2.5rem;color:var(--white);text-shadow:0 2px 8px rgba(0,0,0,.15)}.card.clickable{cursor:pointer;transition:transform .2s ease,box-shadow .4s ease}.card.clickable:hover{transform:scale(1.04);box-shadow:0 6px 24px #ff69b44d}.card.clickable:active{transform:scale(.96)}.card.covered{cursor:default;opacity:.85}.card.covered:hover{transform:none;box-shadow:0 4px 15px #ff69b41f}.card.auto-revealed{animation:cardRevealPop .5s cubic-bezier(.34,1.56,.64,1) both}.card.revealed{border-color:var(--pink);animation:revealedGlow 2s ease-in-out infinite alternate;cursor:pointer}.lightbox-overlay{position:fixed;inset:0;z-index:100;background:#000000b3;display:flex;align-items:center;justify-content:center;cursor:pointer}.lightbox-content{display:flex;flex-direction:column;align-items:center;cursor:default}.lightbox-image{max-width:90vw;max-height:75vh;border-radius:16px;box-shadow:0 8px 40px #0006;object-fit:contain}.lightbox-description{margin-top:1rem;font-family:var(--font-ui);font-size:clamp(1rem,4vw,1.3rem);font-weight:700;color:var(--white);text-shadow:0 2px 8px rgba(0,0,0,.5);text-align:center}.lightbox-close{position:absolute;top:1.5rem;right:1.5rem;width:40px;height:40px;border-radius:50%;border:none;background:#ffffffe6;color:var(--text-dark);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.lightbox-close:hover{transform:scale(1.1)}.celebration-screen{background:radial-gradient(ellipse at center,var(--bg-soft) 0%,var(--bg-white) 100%)}.confetti-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.celebration-content{text-align:center;padding:2rem;z-index:1;animation:celebrationIn .8s ease-out .5s both}.celebration-title{font-family:var(--font-romantic);font-size:clamp(2.5rem,10vw,4.5rem);color:var(--pink-deep);text-shadow:0 0 30px rgba(232,67,147,.25);margin-bottom:1rem}.celebration-message{font-size:clamp(1rem,4vw,1.5rem);color:var(--text-muted);margin-bottom:2rem;line-height:1.6}.celebration-heart{font-size:clamp(3rem,12vw,6rem);color:var(--red);animation:heartbeat 1s ease-in-out infinite;margin-bottom:2rem}.play-again-button{font-family:var(--font-ui);font-size:1rem;font-weight:700;color:var(--white);background:linear-gradient(135deg,var(--pink),var(--pink-deep));border:none;border-radius:50px;padding:.8rem 2rem;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.play-again-button:hover{transform:scale(1.05);box-shadow:0 0 30px #ff69b466}.play-again-button:active{transform:scale(.97)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{left:-60%}to{left:120%}}@keyframes revealedGlow{0%{box-shadow:0 4px 15px #ff69b433}to{box-shadow:0 4px 25px #ff69b466}}@keyframes celebrationIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes heartbeat{0%,to{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}}@keyframes lightboxIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes cardRevealPop{0%{transform:scale(.6);opacity:.3}60%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}@media(min-width:768px){.card-grid{grid-template-columns:repeat(4,1fr);max-width:700px;gap:1rem}.card{min-height:180px}}