:root{--primary-color: #ff69b4;--primary-light: #ffe4e1;--secondary-color: #ffd700;--bg-gradient: linear-gradient(135deg, #fff0f5 0%, #ffe4e1 50%, #e0ffff 100%);--card-bg-gradient: linear-gradient(135deg, #ffffff 0%, #fffafa 100%);--text-dark: #4a4a4a;--border-radius: 24px;--box-shadow: 0 12px 24px rgba(0, 0, 0, .06);--box-shadow-hover: 0 20px 36px rgba(255, 105, 180, .15);font-family:"M PLUS Rounded 1c",Outfit,Quicksand,sans-serif;user-select:none;-webkit-user-select:none}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body,html,#root{width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--bg-gradient)}.game-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative;overflow:hidden}.controls-footer{display:flex;justify-content:center;gap:16px;padding:16px;z-index:10}.btn-ctrl{padding:8px 18px;font-size:14px;font-weight:800;border-radius:20px;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 8px #0000000d}.btn-ctrl-open{background:#ff69b4;color:#fff}.btn-ctrl-open:hover{transform:scale(1.05);background:#ff1493}.btn-ctrl-close{background:#fff;border-color:#ffb6c1;color:#ff69b4}.btn-ctrl-close:hover{transform:scale(1.05);background:#ffe4e1}.grid-container{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:20px;padding:20px;overflow:hidden}@media (max-width: 768px){.grid-container{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);gap:12px;padding:12px}.game-title{font-size:20px}}.card-wrapper{background:var(--card-bg-gradient);border-radius:var(--border-radius);box-shadow:var(--box-shadow);border:3px solid rgba(255,255,255,.8);position:relative;cursor:pointer;overflow:hidden;display:flex;justify-content:center;align-items:center;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.card-wrapper:hover{transform:translateY(-4px);box-shadow:var(--box-shadow-hover);border-color:#ffb6c1}.card-wrapper.wobbling{animation:card-wobble .2s ease-in-out infinite;border-color:gold;box-shadow:0 16px 32px #ffd70040;transform:scale(1.02)}@keyframes card-wobble{0%{transform:scale(1.02) rotate(-2deg)}50%{transform:scale(1.02) rotate(2deg)}to{transform:scale(1.02) rotate(-2deg)}}.card-content-area{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center}.character-img{width:100%;height:100%;object-fit:cover;position:absolute;z-index:1;transition:all .5s cubic-bezier(.175,.885,.32,1.275);transform:scale(0);border-radius:var(--border-radius)}.card-wrapper.open .character-img{transform:scale(1);animation:poyon-bounce .7s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes poyon-bounce{0%{transform:scale(0) translateY(50px)}50%{transform:scale(1.2) translateY(-20px)}70%{transform:scale(.9) translateY(10px)}to{transform:scale(1) translateY(0)}}.cover-wrapper{width:100%;height:100%;position:absolute;top:0;left:0;z-index:2;border-radius:var(--border-radius);overflow:hidden}.cover-img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;transition:all .5s cubic-bezier(.175,.885,.32,1.275),opacity .5s ease;border-radius:var(--border-radius)}.card-wrapper.open .cover-egg{transform:translateY(80px) rotate(-10deg) scale(0);opacity:0}.card-wrapper.open .cover-present{transform:translateY(-80px) rotate(15deg) scale(0);opacity:0}.card-wrapper.open .cover-bush{transform:translateY(60px) scale(0);opacity:0}.card-wrapper:not(.open):hover .cover-bush{animation:rustle .3s ease infinite alternate}@keyframes rustle{0%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}.cover-door{perspective:1000px;transform-origin:left center}.card-wrapper.open .cover-door{transform:rotateY(-110deg);opacity:0}.card-wrapper.open .cover-circus{transform:translateY(-80px) scale(.2);opacity:0}.card-wrapper.open .cover-cloud{transform:translate(80px) translateY(-30px) scale(0);opacity:0}.card-wrapper.open .cover-hat{transform:translateY(-70px) rotate(-10deg) scale(0);opacity:0}.card-wrapper.open .cover-spaceship{transform:translateY(-90px) rotate(20deg) scale(0);opacity:0}.speech-bubble{position:absolute;top:15px;background:#fff;border:3px solid #ff69b4;padding:4px 12px;border-radius:16px;font-size:16px;font-weight:800;color:#ff69b4;z-index:3;pointer-events:none;opacity:0;transform:scale(0) translateY(10px);box-shadow:0 6px 12px #ff69b41a}.speech-bubble:after{content:"";position:absolute;bottom:-9px;left:50%;transform:translate(-50%);border-width:9px 9px 0;border-style:solid;border-color:white transparent;display:block;width:0}.speech-bubble:before{content:"";position:absolute;bottom:-13px;left:50%;transform:translate(-50%);border-width:11px 11px 0;border-style:solid;border-color:#ff69b4 transparent;display:block;width:0;z-index:-1}.card-wrapper.open .speech-bubble{opacity:1;transform:scale(1) translateY(0);animation:bubble-jump .5s cubic-bezier(.175,.885,.32,1.275) .3s forwards}@keyframes bubble-jump{0%{transform:scale(0) translateY(10px);opacity:0}70%{transform:scale(1.1) translateY(-5px);opacity:1}to{transform:scale(1) translateY(0);opacity:1}}.card-label{position:absolute;bottom:12px;background:#ffffffd9;padding:4px 12px;border-radius:12px;font-size:14px;font-weight:700;color:#8b658b;border:1px solid rgba(255,255,255,.5);box-shadow:0 4px 8px #00000008;z-index:5;transition:opacity .3s ease}.card-wrapper.open .card-label{opacity:.9}.particle{position:absolute;pointer-events:none;font-size:24px;z-index:10;animation:particle-fly .8s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes particle-fly{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(1.2) rotate(var(--rot));opacity:0}}.lock-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.lock-message{font-size:28px;font-weight:800;color:#ffb6c1;margin-bottom:20px;text-align:center}.lock-sub{font-size:16px;color:#e0e0e0}
