*{box-sizing:border-box;margin:0;padding:0}body{background:#000;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex;overflow:hidden}#bg-canvas{z-index:0;width:100%;height:100%;position:fixed;top:0;left:0}.title-container{text-align:center;z-index:1;perspective:1000px;margin-bottom:3rem;position:relative}h1{letter-spacing:8px;transform-style:preserve-3d;font-size:6rem;font-weight:900;animation:4s ease-in-out infinite titleFloat;position:relative}.title-3d{background:linear-gradient(135deg,#00f5ff 0%,#4a90e2 30%,#f0a 60%,#00f5ff 100%);-webkit-text-fill-color:transparent;text-shadow:0 0 20px #00f5ff80,0 0 40px #4a90e24d,0 0 60px #f0a3;background-size:300% 300%;-webkit-background-clip:text;background-clip:text;animation:5s infinite gradientShift,3s ease-in-out infinite titleGlow;display:inline-block;position:relative}.title-3d:before{content:"MARIUS GAMES";background:linear-gradient(135deg,#00f5ff 0%,#4a90e2 30%,#f0a 60%,#00f5ff 100%);-webkit-text-fill-color:transparent;filter:blur(30px);opacity:.6;z-index:-1;-webkit-background-clip:text;background-clip:text;width:100%;animation:5s infinite gradientShift;position:absolute;top:0;left:0}@keyframes titleFloat{0%,to{transform:translateY(0)rotateX(0)}50%{transform:translateY(-10px)rotateX(2deg)}}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes titleGlow{0%,to{filter:brightness()drop-shadow(0 0 20px #00f5ff99)}50%{filter:brightness(1.3)drop-shadow(0 0 40px #4a90e2cc)}}.subtitle{color:#ffffffb3;letter-spacing:12px;text-transform:uppercase;text-shadow:0 0 20px #ffffff4d;margin-top:1.5rem;font-size:1.4rem;font-weight:300;animation:3s ease-in-out infinite subtitlePulse}@keyframes subtitlePulse{0%,to{opacity:.7}50%{opacity:1}}.games-container{z-index:1;flex-wrap:wrap;justify-content:center;gap:4rem;display:flex;position:relative}.game-card{cursor:pointer;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:30px;width:340px;height:440px;text-decoration:none;transition:all .5s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;box-shadow:0 8px 32px #0000004d,inset 0 0 0 1px #ffffff1a}.game-card:before{content:"";z-index:1;pointer-events:none;background:linear-gradient(#ffffff1a 0%,#fff0 50%,#0006 100%);position:absolute;inset:0}.game-card:hover{transform:translateY(-20px)scale(1.03);box-shadow:0 20px 60px #00000080,0 0 40px #00f5ff33}.game-card:after{content:"";z-index:-1;opacity:0;background:linear-gradient(45deg,#0000,#0000,#0000);border-radius:30px;transition:opacity .5s;position:absolute;inset:-2px}.game-card.pong:after{background:linear-gradient(90deg,#00f5ff,#f0a,#00f5ff) 0 0/200% 100%;animation:3s linear infinite borderGlow}.game-card.skiclub:after{background:linear-gradient(90deg,#4a90e2,#87ceeb,#4a90e2) 0 0/200% 100%;animation:3s linear infinite borderGlow}.game-card.airhockey:after{background:linear-gradient(90deg,#00d4ff,#ff2d95,#00d4ff) 0 0/200% 100%;animation:3s linear infinite borderGlow}.game-card.multiplication:after{background:linear-gradient(90deg,#0f8,#0cf,#0f8) 0 0/200% 100%;animation:3s linear infinite borderGlow}@keyframes borderGlow{0%{background-position:0%}to{background-position:200%}}.game-card:hover:after{opacity:1}.game-visual{justify-content:center;align-items:center;width:100%;height:60%;font-size:7rem;transition:all .5s;display:flex;position:absolute;top:0;left:0;overflow:hidden}.game-card:hover .game-visual{transform:scale(1.15)}.pong .game-visual{background:linear-gradient(135deg,#00f5ff26 0%,#ff00aa26 100%)}.pong .game-visual:before{content:"";background:radial-gradient(circle,#00f5ff4d 0%,#0000 70%);width:150%;height:150%;animation:3s ease-in-out infinite pulseGlow;position:absolute}.skiclub .game-visual{background:linear-gradient(135deg,#4a90e233 0%,#87ceeb33 100%)}.skiclub .game-visual:before{content:"";background:radial-gradient(circle,#4a90e24d 0%,#0000 70%);width:150%;height:150%;animation:3s ease-in-out infinite pulseGlow;position:absolute}.airhockey .game-visual{background:linear-gradient(135deg,#00d4ff33 0%,#ff2d9533 100%)}.airhockey .game-visual:before{content:"";background:radial-gradient(circle,#00d4ff4d 0%,#0000 70%);width:150%;height:150%;animation:3s ease-in-out infinite pulseGlow;position:absolute}.multiplication .game-visual{background:linear-gradient(135deg,#0f83 0%,#0cf3 100%)}.multiplication .game-visual:before{content:"";background:radial-gradient(circle,#00ff884d 0%,#0000 70%);width:150%;height:150%;animation:3s ease-in-out infinite pulseGlow;position:absolute}@keyframes pulseGlow{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.2)}}.game-emoji{z-index:2;filter:drop-shadow(0 0 30px #ffffff80);transition:transform .3s;position:relative}.game-card:hover .game-emoji{transform:rotate(5deg)scale(1.1)}.game-content{z-index:2;padding:2rem;position:absolute;bottom:0;left:0;right:0}.game-title{margin-bottom:.8rem;font-size:2.2rem;font-weight:700;transition:all .3s}.pong .game-title{color:#00f5ff;text-shadow:0 0 30px #00f5ffcc}.skiclub .game-title{color:#4a90e2;text-shadow:0 0 30px #4a90e2cc}.airhockey .game-title{color:#00d4ff;text-shadow:0 0 30px #00d4ffcc}.multiplication .game-title{color:#0f8;text-shadow:0 0 30px #0f8c}.game-description{color:#fffc;margin-bottom:1.5rem;font-size:1rem;line-height:1.6}.play-button{text-transform:uppercase;letter-spacing:3px;cursor:pointer;background:0 0;border:2px solid;border-radius:50px;align-items:center;gap:.5rem;padding:.9rem 2.5rem;font-size:1rem;font-weight:600;transition:all .4s;display:inline-flex}.pong .play-button{color:#00f5ff;border-color:#00f5ff;box-shadow:0 0 20px #00f5ff4d,inset 0 0 20px #00f5ff1a}.pong .play-button:hover{color:#000;background:#00f5ff;transform:scale(1.05);box-shadow:0 0 40px #00f5ff99,inset 0 0 20px #00f5ff33}.skiclub .play-button{color:#4a90e2;border-color:#4a90e2;box-shadow:0 0 20px #4a90e24d,inset 0 0 20px #4a90e21a}.skiclub .play-button:hover{color:#fff;background:#4a90e2;transform:scale(1.05);box-shadow:0 0 40px #4a90e299,inset 0 0 20px #4a90e233}.airhockey .play-button{color:#00d4ff;border-color:#00d4ff;box-shadow:0 0 20px #00d4ff4d,inset 0 0 20px #00d4ff1a}.airhockey .play-button:hover{color:#fff;background:linear-gradient(135deg,#00d4ff,#ff2d95);border-color:#0000;transform:scale(1.05);box-shadow:0 0 40px #00d4ff99,inset 0 0 20px #fff3}.multiplication .play-button{color:#0f8;border-color:#0f8;box-shadow:0 0 20px #00ff884d,inset 0 0 20px #00ff881a}.multiplication .play-button:hover{color:#000;background:#0f8;transform:scale(1.05);box-shadow:0 0 40px #0f89,inset 0 0 20px #0f83}@media (width<=768px){h1{letter-spacing:4px;font-size:3.5rem}.subtitle{letter-spacing:6px;font-size:1rem}.games-container{gap:2rem}.game-card{width:300px;height:400px}}