:root{--primary-color: #4caf50;--primary-hover: #388e3c;--bg-gradient: linear-gradient(to bottom, #d4f5fc 0%, #e8f8ec 60%, #c8f0cc 100%);--card-bg: rgba(255, 255, 255, .85);--card-border: rgba(255, 255, 255, .6);--text-main: #1b5e20;--text-muted: #4e342e;--shadow-color: rgba(76, 175, 80, .2)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Fredoka,sans-serif;background:var(--bg-gradient);min-height:100vh;display:flex;justify-content:center;align-items:center;color:#37474f;padding:30px 20px;position:relative;overflow-x:hidden}.decorations{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.sun-decor{position:absolute;top:5%;right:8%;font-size:5rem;animation:spinSun 30s linear infinite;filter:drop-shadow(0 0 10px rgba(255,235,59,.6))}.cloud-decor{position:absolute;color:#fff;font-size:4rem;opacity:.85;filter:drop-shadow(0 4px 10px rgba(0,0,0,.05));animation:floatCloud 24s ease-in-out infinite}.cloud-decor.c1{top:12%;left:5%;animation-duration:20s}.cloud-decor.c2{top:25%;right:15%;animation-duration:28s}.cloud-decor.c3{top:75%;left:10%;animation-duration:25s}.leaf-decor{position:absolute;font-size:2.2rem;animation:floatDecor 8s ease-in-out infinite}.leaf-decor.l1{top:40%;left:3%;animation-delay:0s}.leaf-decor.l2{top:60%;right:4%;animation-delay:2s}.leaf-decor.l3{top:85%;right:18%;animation-delay:4s}.butterfly-decor{position:absolute;font-size:2.5rem;animation:floatDecor 6s ease-in-out infinite}.butterfly-decor.b1{top:15%;left:35%;animation-delay:1s}.butterfly-decor.b2{top:70%;right:35%;animation-delay:3s}#app{width:100%;max-width:1200px;background:#ffffff8c;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:3px solid rgba(255,255,255,.8);border-radius:40px;padding:50px 40px;box-shadow:0 30px 60px #2e7d321f,inset 0 4px 20px #fff6;z-index:10;position:relative}.portal-header{text-align:center;margin-bottom:45px}.rainbow-title{font-size:3rem;font-weight:800;letter-spacing:1px;margin-bottom:12px;display:flex;justify-content:center;flex-wrap:wrap;gap:15px}.rainbow-title span{display:inline-block;text-shadow:0 4px 0 #ffffff,0 7px 0 rgba(0,0,0,.08),0 12px 18px rgba(0,0,0,.12);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.rainbow-title span:hover{transform:scale(1.15) rotate(3deg)}.word-1{color:#ff5722}.word-2{color:#fbc02d}.word-3{color:#4caf50}.word-4{color:#00bcd4}.word-5{color:#e91e63}.subtitle{font-size:1.2rem;color:var(--text-muted);font-weight:600;text-shadow:0 2px 4px rgba(255,255,255,.8)}.game-selection{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:35px}.game-card{display:flex;flex-direction:column;background:var(--card-bg);border:4px solid var(--card-border);border-radius:32px;overflow:hidden;text-decoration:none;color:inherit;position:relative;transition:transform .4s cubic-bezier(.175,.885,.32,1.275),box-shadow .4s ease,border-color .4s ease;box-shadow:0 15px 35px #0000000d}.active-card{border-color:#c8e6c9;box-shadow:0 15px 30px #4caf501f}.active-card:hover{transform:translateY(-12px) scale(1.025);box-shadow:0 25px 45px #4caf5047;border-color:#8bc34a}.game-card.locked{border-color:#cfd8dc;cursor:not-allowed}.game-card.locked:hover{animation:shakeLocked .5s ease-in-out;box-shadow:0 15px 35px #00000014}.card-badge{position:absolute;top:15px;right:15px;padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:700;z-index:5;box-shadow:0 6px 12px #0000001a}.new-badge{background:#ffeb3b;color:#e65100;border:2px solid #ffb300}.lock-badge{background:#eceff1;color:#78909c;border:2px solid #b0bec5}.card-image-wrapper{height:220px;background:linear-gradient(to bottom,#dff5ff,#f3faee);display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;border-bottom:4px solid rgba(0,0,0,.02)}.card-image-wrapper img{height:85%;object-fit:contain;transition:transform .5s cubic-bezier(.175,.885,.32,1.275)}.game-card:hover .card-image-wrapper img{transform:scale(1.12) rotate(3deg)}.locked-wrapper{background:linear-gradient(to bottom,#eceff1,#cfd8dc)}.lock-mascot{font-size:5.5rem;filter:grayscale(40%) blur(.5px);transition:transform .4s ease}.game-card.locked:hover .lock-mascot{transform:scale(1.08) rotate(-4deg)}.lock-overlay{position:absolute;font-size:2.8rem;background:#fffc;width:70px;height:70px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 6px 15px #00000026;border:2px solid #b0bec5}.card-content{padding:28px 24px;display:flex;flex-direction:column;flex-grow:1}.card-content h2{font-size:1.4rem;color:var(--text-main);margin-bottom:12px;font-weight:700}.card-content p{font-size:.95rem;color:#546e7a;line-height:1.6;margin-bottom:25px;flex-grow:1}.btn-play{align-self:center;background:#ff9800;background:linear-gradient(135deg,#ffb74d,#ff9800);color:#fff;padding:12px 30px;border-radius:30px;font-weight:700;font-size:1rem;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s ease;border:3px solid #ff7043;box-shadow:0 6px 15px #ff98004d;text-shadow:0 1px 2px rgba(0,0,0,.15)}.game-card:hover .btn-play:not(.locked){transform:scale(1.08);box-shadow:0 10px 20px #ff980073}.btn-play.locked{background:#cfd8dc;color:#90a4ae;border-color:#b0bec5;box-shadow:none;text-shadow:none}@keyframes spinSun{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes floatCloud{0%{transform:translate(0)}50%{transform:translate(35px)}to{transform:translate(0)}}@keyframes floatDecor{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(6deg)}to{transform:translateY(0) rotate(0)}}@keyframes shakeLocked{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px) rotate(-1deg)}40%,80%{transform:translate(6px) rotate(1deg)}}@media (max-width: 768px){#app{padding:35px 20px;border-radius:30px}.rainbow-title{font-size:2.2rem;gap:8px}.sun-decor{font-size:3.5rem}}