*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--color-brand-red: #E84C3D;--color-brand-yellow: #F5A623;--color-brand-blue: #2E86C1;--color-brand-sky: #5DADE2;--color-brand-dark-blue: #1B4F72;--color-bg-primary: #E8F4FD;--color-bg-secondary: #D4EDFC;--color-bg-card: #ffffff;--color-bg-warm: #FFF8E7;--color-bg-glass: rgba(255, 255, 255, .75);--color-border-soft: rgba(46, 134, 193, .15);--color-border-card: rgba(46, 134, 193, .12);--color-text-primary: #1B3A4B;--color-text-secondary: #4A6B7A;--color-text-muted: #7B9BAD;--color-text-on-color: #ffffff;--color-accent-red: #E84C3D;--color-accent-orange: #F39C12;--color-accent-yellow: #F5A623;--color-accent-green: #27AE60;--color-accent-teal: #1ABC9C;--color-accent-blue: #2E86C1;--color-accent-purple: #8E44AD;--color-accent-pink: #E91E63;--gradient-sky: linear-gradient(180deg, #87CEEB 0%, #E8F4FD 100%);--gradient-hero: linear-gradient(135deg, #E84C3D 0%, #F5A623 50%, #2E86C1 100%);--gradient-warm: linear-gradient(135deg, #FFF8E7 0%, #FFEAA7 100%);--gradient-fresh: linear-gradient(135deg, #D4EDFC 0%, #E8F4FD 100%);--card-red: linear-gradient(135deg, #FF6B6B 0%, #EE5A24 100%);--card-orange: linear-gradient(135deg, #FFA502 0%, #F39C12 100%);--card-yellow: linear-gradient(135deg, #FECA57 0%, #F5A623 100%);--card-green: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%);--card-teal: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%);--card-blue: linear-gradient(135deg, #3498DB 0%, #2E86C1 100%);--card-indigo: linear-gradient(135deg, #5B6DCD 0%, #4834D4 100%);--card-purple: linear-gradient(135deg, #A55EEA 0%, #8E44AD 100%);--card-pink: linear-gradient(135deg, #FD79A8 0%, #E84393 100%);--font-display: "Fredoka", "Outfit", sans-serif;--font-body: "Outfit", system-ui, sans-serif;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--space-4xl: 6rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-2xl: 32px;--radius-full: 9999px;--shadow-soft: 0 2px 12px rgba(27, 58, 75, .08);--shadow-card: 0 4px 20px rgba(27, 58, 75, .1);--shadow-card-hover: 0 8px 32px rgba(27, 58, 75, .15);--shadow-colored: 0 4px 20px rgba(232, 76, 61, .2);--shadow-btn: 0 4px 16px rgba(232, 76, 61, .3);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .5s cubic-bezier(.34, 1.56, .64, 1)}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--gradient-sky);background-attachment:fixed;color:var(--color-text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.2;color:var(--color-text-primary)}h1{font-size:clamp(2rem,5vw,3.5rem)}h2{font-size:clamp(1.5rem,3.5vw,2.5rem)}h3{font-size:clamp(1.25rem,2.5vw,1.75rem)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-lg)}.page{flex:1;display:flex;flex-direction:column}.bg-shapes{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none}.shape{position:absolute;border-radius:50%;opacity:.15;animation:float 25s ease-in-out infinite}.shape-1{width:300px;height:300px;background:var(--color-accent-yellow);top:-5%;right:-5%;border-radius:40% 60% 70% 30%/40% 50% 60%;animation-delay:0s}.shape-2{width:250px;height:250px;background:var(--color-accent-red);bottom:10%;left:-5%;border-radius:60% 40% 30% 70%/60% 30% 70% 40%;animation-delay:-8s}.shape-3{width:200px;height:200px;background:var(--color-accent-blue);top:40%;right:10%;border-radius:50% 60% 40% 50%/40% 60% 50%;animation-delay:-16s}.shape-4{width:150px;height:150px;background:var(--color-accent-green);top:20%;left:15%;border-radius:40% 60% 50% 50%/60% 40%;animation-delay:-12s}@keyframes float{0%,to{transform:translate(0) rotate(0) scale(1)}25%{transform:translate(20px,-30px) rotate(5deg) scale(1.05)}50%{transform:translate(-15px,15px) rotate(-3deg) scale(.95)}75%{transform:translate(25px,20px) rotate(4deg) scale(1.03)}}.glass-card{background:var(--color-bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);transition:transform var(--transition-bounce),box-shadow var(--transition-base)}.glass-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-card-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-family:var(--font-display);font-size:1.1rem;font-weight:600;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base);text-decoration:none;position:relative;overflow:hidden}.btn:active{transform:scale(.96)}.btn-primary{background:var(--color-accent-red);color:#fff;box-shadow:var(--shadow-btn)}.btn-primary:hover{background:#d44332;box-shadow:0 6px 24px #e84c3d66;transform:translateY(-2px)}.btn-secondary{background:#fff;color:var(--color-text-primary);border:2px solid var(--color-border-soft);box-shadow:var(--shadow-soft)}.btn-secondary:hover{background:var(--color-bg-secondary);transform:translateY(-2px)}.btn-back{background:#fff;color:var(--color-text-secondary);padding:var(--space-sm) var(--space-lg);font-size:.95rem;border:1px solid var(--color-border-soft);box-shadow:var(--shadow-soft)}.btn-back:hover{background:var(--color-bg-secondary);color:var(--color-text-primary)}.input-field{width:100%;padding:var(--space-md) var(--space-lg);font-family:var(--font-body);font-size:1.2rem;font-weight:600;color:var(--color-text-primary);background:#fff;border:2px solid var(--color-border-soft);border-radius:var(--radius-lg);outline:none;transition:all var(--transition-base);letter-spacing:.15em;text-align:center;text-transform:uppercase;box-shadow:var(--shadow-soft)}.input-field::placeholder{color:var(--color-text-muted);letter-spacing:.05em;text-transform:none;font-weight:400}.input-field:focus{border-color:var(--color-brand-sky);box-shadow:0 0 0 4px #5dade233}.input-error{border-color:var(--color-accent-red)}.error-text{color:var(--color-accent-red);font-size:.875rem;margin-top:var(--space-sm);text-align:center;font-weight:500}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-lg);width:100%;padding-bottom:var(--space-3xl)}.class-card{position:relative;padding:var(--space-xl);border-radius:var(--radius-2xl);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-md);text-decoration:none;color:#fff;min-height:200px;justify-content:center;box-shadow:var(--shadow-card);transition:all var(--transition-bounce)}.class-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.3) 0%,transparent 60%);transition:opacity var(--transition-base)}.class-card:hover{transform:translateY(-6px) scale(1.03);box-shadow:var(--shadow-card-hover)}.class-card:hover:before{opacity:.5}.class-card__emoji{font-size:3rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));transition:transform var(--transition-bounce)}.class-card:hover .class-card__emoji{transform:scale(1.2) rotate(-5deg)}.class-card__name{font-family:var(--font-display);font-size:1.4rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.15)}.class-card__age{font-size:.85rem;background:#ffffff40;padding:4px 14px;border-radius:var(--radius-full);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.game-card{position:relative;padding:var(--space-2xl) var(--space-xl);border-radius:var(--radius-2xl);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-md);text-decoration:none;color:#fff;min-height:240px;justify-content:center;box-shadow:var(--shadow-card);transition:all var(--transition-bounce)}.game-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.25) 0%,transparent 60%)}.game-card:hover{transform:translateY(-6px) scale(1.03);box-shadow:var(--shadow-card-hover)}.game-card--locked{opacity:.55;cursor:not-allowed;filter:saturate(.6)}.game-card--locked:hover{transform:none;box-shadow:var(--shadow-card)}.game-card__emoji{font-size:3.5rem;transition:transform var(--transition-bounce);filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}.game-card:hover .game-card__emoji{transform:scale(1.3) rotate(5deg)}.game-card__name{font-family:var(--font-display);font-size:1.3rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.15)}.game-card__desc{font-size:.9rem;opacity:.9;max-width:220px}.game-card__badge{position:absolute;top:var(--space-md);right:var(--space-md);padding:4px 12px;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.game-card__badge--live{background:#ffffff4d;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.game-card__badge--soon{background:#0003;color:#ffffffb3}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);position:sticky;top:0;z-index:100;background:#e8f4fdd9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border-card)}.header__logo{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none}.header__logo img{height:44px;width:auto}.header__school{display:flex;align-items:center;gap:var(--space-sm);color:var(--color-text-secondary);font-size:.9rem;font-weight:500;background:#fff;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);border:1px solid var(--color-border-soft);box-shadow:var(--shadow-soft)}.page-header{text-align:center;padding:var(--space-3xl) 0 var(--space-2xl)}.page-header__title{margin-bottom:var(--space-sm);color:var(--color-text-primary)}.page-header__subtitle{color:var(--color-text-secondary);font-size:1.1rem}.landing-bg-video{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;overflow:hidden}.landing-bg-video__el{width:100%;height:100%;object-fit:cover}.landing-bg-video__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#87ceeb4d,#e8f4fd73,#e8f4fd99);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.sound-toggle{position:fixed;bottom:var(--space-xl);right:var(--space-xl);z-index:200;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #0000001a;transition:all var(--transition-base)}.sound-toggle:hover{transform:scale(1.1);background:#ffffffe6;box-shadow:0 6px 24px #00000026}.sound-toggle:active{transform:scale(.95)}.landing{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-2xl) var(--space-lg);gap:var(--space-lg);position:relative;z-index:1}.landing__logo{width:clamp(200px,35vw,320px);height:auto;filter:drop-shadow(0 6px 20px rgba(0,0,0,.15));transition:transform var(--transition-bounce)}.landing__logo:hover{transform:scale(1.05) rotate(-2deg)}.landing__tagline{font-size:clamp(1.1rem,2.5vw,1.4rem);color:#1b3a4b;max-width:500px;font-weight:600;text-shadow:0 1px 8px rgba(255,255,255,.6)}.landing__features{display:flex;gap:var(--space-xl);flex-wrap:wrap;justify-content:center;margin-top:var(--space-md)}.landing__feature{display:flex;align-items:center;gap:var(--space-sm);color:#1b3a4b;font-size:1rem;font-weight:600;background:#fffc;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);box-shadow:0 2px 12px #00000014;border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.landing__feature-icon{font-size:1.3rem}.code-entry{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-3xl) var(--space-lg);gap:var(--space-xl)}.code-entry__card{padding:var(--space-3xl);max-width:480px;width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);background:#fff;border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);border:1px solid var(--color-border-card)}.code-entry__icon{font-size:3rem}.code-entry__title{font-family:var(--font-display);font-size:1.5rem;color:var(--color-text-primary)}.code-entry__hint{color:var(--color-text-muted);font-size:.85rem}.game-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;padding:var(--space-lg);gap:var(--space-lg)}.game-wrapper__header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:900px}.game-wrapper__title{font-family:var(--font-display);font-size:1.3rem;display:flex;align-items:center;gap:var(--space-sm);color:var(--color-text-primary)}.game-wrapper__canvas{width:100%;max-width:900px;aspect-ratio:16 / 10;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-card);border:3px solid white}@media(max-width:768px){.cards-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-md)}.class-card{padding:var(--space-lg);min-height:160px}.class-card__emoji{font-size:2.5rem}.game-card{padding:var(--space-xl) var(--space-lg);min-height:200px}.landing__features{flex-direction:column;align-items:center}.header__school{display:none}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.animate-in{animation:fadeInUp .6s ease forwards}.animate-in-delay-1{animation-delay:.1s;opacity:0}.animate-in-delay-2{animation-delay:.2s;opacity:0}.animate-in-delay-3{animation-delay:.3s;opacity:0}.animate-in-delay-4{animation-delay:.4s;opacity:0}