:root { scroll-behavior: smooth; }
        body { background-color: #F2E7D5; color: #0A4D68; overflow-x: hidden; }
        .hero-gradient { background: linear-gradient(rgba(10, 77, 104, 0.7), rgba(10, 77, 104, 0.3)), url('https://i.pinimg.com/736x/99/54/d6/9954d64646800f4c17fd5e0fd5a1871e.jpg'); background-size: cover; background-position: center; }
        .glass { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(14, 131, 136, 0.2); }
        .wave-top { position: relative; height: 100px; width: 100%; background: #0A4D68; clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 40%, 15% 55%, 35% 45%, 55% 55%, 75% 45%, 90% 55%, 100% 40%); margin-top: -95px; }
        .card-zoom:hover .zoom-img { transform: scale(1.1); }
        .steam-effect { position: relative; }
        .steam-effect::after { content: ''; position: absolute; top: 0; left: 50%; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/asfalt-dark.png'); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
        .steam-effect:hover::after { opacity: 0.1; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #0E8388; border-radius: 10px; }
        #game-canvas { cursor: crosshair; touch-action: none; background: #0A4D68; }
        .nav-link { position: relative; cursor: pointer; }
        .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #FF6F3C; transition: width 0.3s; }
        .nav-link:hover::after { width: 100%; }
.modal-fade {
    mask-image: linear-gradient(to bottom, transparent, black 24px, black calc(100% - 24px), transparent);
}