body{font-family:Arial,san-serif;margin:0;padding:0;background-color:#f4f4f4}header{background-color:#5965f1;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem}header .logo h1{margin:0;font-size:2rem}nav ul{list-style:none;margin:0;padding:0;display:flex}nav ul li{margin-left:1rem}nav ul li a{color:#fff;text-decoration:none;font-size:1rem;display:flex;align-items:center}nav ul li a i{margin-right:.5rem}.intro{text-align:center;padding:2rem 0;background-color:#333;color:#fff}.intro h2{margin:0;font-size:1.5rem}.game-gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;padding:2rem}.game-item{background-color:#fff;border:1px solid #ddd;border-radius:8px;overflow:hidden;width:240px;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.1);position:relative;transition:transform .2s,box-shadow .2s;cursor:pointer}.game-item:hover{transform:translateY(-5px);box-shadow:0 4px 10px rgba(0,0,0,.2)}.game-item img{display:block;width:100%;height:100%;margin:0;object-fit:fill}.game-item h3{font-size:1.2rem;margin:0;padding:.5rem;background-color:rgba(0,0,0,.7);color:#fff;position:absolute;bottom:0;width:100%;opacity:0;transition:opacity .2s}.game-item:hover h3{opacity:1}.new-flag{background-color:red;color:#fff;font-weight:700;padding:.3rem .5rem;position:absolute;top:10px;left:10px;border-radius:4px;font-size:.9rem;z-index:1}.about-intro,.game-showcase,.mission,.tutorials{max-width:800px;margin:40px auto;padding:30px;background:#1a1a1a;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.about-intro{text-align:center;margin-top:60px}.about-intro h2{font-size:2.5em;margin-bottom:20px;color:#4ecdc4}.game-showcase h2,.mission h2,.tutorials h2{font-size:2em;margin-bottom:20px;color:#4ecdc4}.about-intro p,.game-showcase p,.mission p,.tutorials p{font-size:1.1em;line-height:1.8;color:#fff;margin-bottom:15px}.game-frame-container{display:none;flex-direction:column;align-items:center;padding:2rem}.game-frame{width:900px;border:2px solid #5965f1;border-radius:8px;background-color:#fff;overflow:hidden;position:relative}.game-frame iframe{width:100%;height:900px;border:none;overflow:hidden}.controls{display:flex;justify-content:center;align-items:center;gap:1rem;padding:.5rem;background-color:#5965f1;color:#fff;border-radius:0 0 8px 8px;width:100%;position:absolute;bottom:0}.controls button{background-color:#5965f1;color:#fff;border:none;padding:.5rem 1rem;font-size:1.5rem;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center}.controls button i{margin-right:.5rem}footer{text-align:center;padding:1rem;background-color:#222;color:#fff;position:relative;bottom:0;width:100%}@media (max-width:768px){.game-gallery{gap:1rem}.game-item{width:calc(50% - 1rem)}.game-frame{width:100%}nav ul{flex-direction:column;gap:.5rem}}@media (max-width:480px){.game-item{width:100%}}.categories-dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;top:100%;left:0;background-color:#1a1a1a;min-width:200px;box-shadow:0 4px 8px rgba(0,0,0,.3);z-index:1000;list-style:none;padding:8px 0;border-radius:8px;margin-top:5px;border:1px solid #333}.dropdown-content.show{display:block;animation:fadeIn .2s ease-in-out}.dropdown-content li{padding:0;margin:0}.dropdown-content a{color:#fff;padding:12px 20px;text-decoration:none;display:block;font-size:.95rem;transition:background-color .2s ease}.dropdown-content a:hover{background-color:#333;color:#fff}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.about-intro:hover,.game-showcase:hover,.mission:hover,.tutorials:hover{transform:translateY(-2px);transition:transform .3s ease;box-shadow:0 6px 12px rgba(0,0,0,.15)}.about-intro::before,.game-showcase::before,.mission::before,.tutorials::before{content:'';display:block;width:50px;height:3px;background:linear-gradient(90deg,#ff6b6b,#4ecdc4);margin:0 auto 20px;border-radius:2px}@media (max-width:900px){.about-intro,.game-showcase,.mission,.tutorials{margin:30px 20px;padding:20px}.about-intro h2{font-size:2em}.game-showcase h2,.mission h2,.tutorials h2{font-size:1.8em}.about-intro p,.game-showcase p,.mission p,.tutorials p{font-size:1em;line-height:1.6}}.learn-page{max-width:1200px;margin:0 auto;padding:20px}.learn-hero{text-align:center;padding:60px 20px;background:#1a1a1a;border-radius:12px;margin-bottom:40px}.learn-hero h1{font-size:3em;color:#4ecdc4;margin-bottom:20px}.learn-hero .subtitle{font-size:1.5em;color:#fff;margin-bottom:40px}.coming-soon{margin:40px 0}.coming-soon i{font-size:4em;color:#ff6b6b;margin-bottom:20px}.coming-soon h2{font-size:2.5em;color:#ff6b6b;text-transform:uppercase;letter-spacing:4px}.course-features{background:#1a1a1a;padding:40px;border-radius:12px;margin-bottom:40px}.course-features h3{text-align:center;color:#4ecdc4;font-size:2em;margin-bottom:40px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}.feature{text-align:center;padding:20px}.feature i{font-size:2.5em;color:#4ecdc4;margin-bottom:20px}.feature h4{color:#fff;font-size:1.3em;margin-bottom:15px}.feature p{color:#e0e0e0}.signup-section{background:#1a1a1a;padding:60px 20px;border-radius:12px;text-align:center}.signup-container{max-width:600px;margin:0 auto}.signup-section h3{color:#4ecdc4;font-size:2em;margin-bottom:20px}.signup-section p{color:#fff;margin-bottom:30px}@media (max-width:768px){.input-group{flex-direction:column}.learn-hero h1{font-size:2em}.learn-hero .subtitle{font-size:1.2em}.coming-soon h2{font-size:2em}}.controls button i{transition:color .3s ease;font-size:1.2em}.controls button i.active{color:#4ecdc4}.controls button{background:0 0;border:none;cursor:pointer;padding:10px;color:#fff}.controls button:hover i{color:#4ecdc4}.error-section{text-align:center;padding:60px 20px;max-width:600px;margin:40px auto;background:#1a1a1a;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.error-section h2{font-size:2.5em;color:#4ecdc4;margin-bottom:20px}.error-section p{font-size:1.2em;color:#fff;margin-bottom:30px}.error-section .button{display:inline-block;padding:12px 24px;background:linear-gradient(90deg,#ff6b6b,#4ecdc4);color:#fff;text-decoration:none;border-radius:25px;font-size:1.1em;transition:transform .3s ease,box-shadow .3s ease}.error-section .button:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(78,205,196,.3)}@media (max-width:600px){.error-section{margin:20px;padding:40px 20px}.error-section h2{font-size:2em}.error-section p{font-size:1em}}