@import "https://fonts.googleapis.com/css2?family=Fredoka+One&family=Fredoka:wght@400;600;700&family=Poppins:wght@400;500;600;700&display=swap";
:root{--ocean-light:#69dcf0;--ocean-mid:#34b5d8;--ocean-deep:#1e8da8;--ocean-darker:#0e5a6f;--ocean-darkest:#0b2e3a;--gold-bright:#ffd133;--gold-orange:#fb0;--purple-game:#b648b4;--brown-wood:#9b5b22;--sand-light:#d6c39b;--coral-red:#ff5b5b;--green-sea:#4caf50;--white:#fff;--ice-blue:#e1f7ff;--dark-navy:#1a2c34;--stone-bg:#c8b898;--stone-border:#a09070;--wood-dark:#6b3f1a;--font-display:"Fredoka One",cursive;--font-heading:"Fredoka",cursive;--font-body:"Poppins",sans-serif}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--ocean-darkest);color:var(--white)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--ocean-darkest)}::-webkit-scrollbar-thumb{background:var(--ocean-mid);border-radius:4px}h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:.02em;font-weight:700}.display-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em}.navbar{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(#0b2e3afa 0%,#0b2e3ae6 100%);border-bottom:2px solid #34b5d84d;justify-content:space-between;align-items:center;height:70px;padding:0 2rem;display:flex;position:fixed;top:0;left:0;right:0}.navbar-logo{align-items:center;gap:.5rem;text-decoration:none;display:flex}.navbar-logo-img{object-fit:contain;background:linear-gradient(135deg,var(--ocean-light),var(--ocean-darker));width:52px;height:52px;font-family:var(--font-display);color:#fff;text-align:center;border:2px solid var(--gold-bright);border-radius:50%;justify-content:center;align-items:center;padding:4px;font-size:.6rem;display:flex}.navbar-brand-text{font-family:var(--font-display);color:var(--gold-bright);text-shadow:0 0 10px #ffd13380;text-transform:uppercase;font-size:1.4rem;line-height:1}.navbar-nav{align-items:center;gap:2rem;list-style:none;display:flex}.navbar-nav a{font-family:var(--font-heading);color:var(--ice-blue);text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid #0000;padding:.25rem 0;font-size:.95rem;font-weight:600;text-decoration:none;transition:color .2s}.navbar-nav a:hover,.navbar-nav a.active{color:var(--gold-bright);border-bottom-color:var(--gold-bright)}.navbar-actions{align-items:center;gap:.75rem;display:flex}.btn-primary{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.08em;color:var(--dark-navy);cursor:pointer;white-space:nowrap;background:linear-gradient(#fd5 0%,#f90 60%,#c60 100%);border:none;border-radius:8px;padding:.7rem 2rem;font-size:1rem;font-weight:700;text-decoration:none;transition:transform .1s,box-shadow .1s;display:inline-block;position:relative;box-shadow:0 4px #8b4400,0 6px 12px #0006,inset 0 1px #fff6}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px #8b4400,0 8px 16px #00000080,inset 0 1px #fff6}.btn-primary:active{transform:translateY(2px);box-shadow:0 2px #8b4400,0 3px 6px #0000004d,inset 0 1px #fff6}.btn-primary-lg{border-radius:10px;padding:.85rem 2.5rem;font-size:1.25rem}.btn-secondary{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.08em;color:var(--white);cursor:pointer;white-space:nowrap;background:linear-gradient(#c855c8 0%,#8b2e8a 60%,#6b1e6a 100%);border:none;border-radius:8px;padding:.65rem 1.5rem;font-size:.95rem;font-weight:700;text-decoration:none;transition:transform .1s,box-shadow .1s;display:inline-block;box-shadow:0 4px #4a1050,0 6px 12px #0006,inset 0 1px #ffffff4d}.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 6px #4a1050,0 8px 16px #00000080,inset 0 1px #ffffff4d}.btn-secondary:active{transform:translateY(2px)}.btn-nav-login{font-family:var(--font-heading);text-transform:uppercase;color:var(--white);cursor:pointer;background:linear-gradient(#9055c8 0%,#5b1e8a 100%);border:2px solid #c855c8;border-radius:6px;padding:.45rem 1.2rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s}.btn-nav-login:hover{background:linear-gradient(#a865d8 0%,#6b2e9a 100%)}.btn-nav-register{font-family:var(--font-heading);text-transform:uppercase;color:var(--dark-navy);cursor:pointer;background:linear-gradient(#fd5 0%,#f90 100%);border:2px solid #fd5;border-radius:6px;padding:.45rem 1.2rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s}.btn-nav-register:hover{background:linear-gradient(#ffe870 0%,#ffb020 100%)}.hero-section{background:radial-gradient(at 20% 80%,#1e8da866 0%,#0000 60%),radial-gradient(at 80% 20%,#34b5d84d 0%,#0000 50%),linear-gradient(#0b2e3a 0%,#0e5a6f 40%,#1e8da8 70%,#0e5a6f 100%);align-items:center;min-height:100vh;padding-top:70px;padding-bottom:4rem;display:flex;position:relative;overflow:hidden}.hero-section:before,.hero-section:after{content:"";background:radial-gradient(circle,#69dcf026 0%,#0000 70%);border-radius:50%;animation:8s ease-in-out infinite float;position:absolute}.hero-section:before{width:400px;height:400px;animation-delay:-4s;bottom:-100px;left:-100px}.hero-section:after{width:300px;height:300px;animation-delay:-2s;top:10%;right:-50px}@keyframes float{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-20px)scale(1.05)}}.hero-container{z-index:2;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;width:100%;max-width:1200px;margin:0 auto;padding:3rem 2rem 2rem;display:grid;position:relative}.hero-left{text-align:center;flex-direction:column;align-items:center;display:flex}.hero-content{margin-top:-88px}.hero-logo{width:min(100%,512px);height:auto;display:block}.hero-game-title{flex-direction:column;line-height:.9;display:flex}.hero-blast{font-family:var(--font-display);color:var(--ocean-light);text-shadow:-3px -3px 0 var(--ocean-darkest),3px -3px 0 var(--ocean-darkest),-3px 3px 0 var(--ocean-darkest),3px 3px 0 var(--ocean-darkest),0 0 30px #69dcf099;letter-spacing:.05em;text-transform:uppercase;font-size:clamp(4rem,8vw,7rem)}.hero-bounty{font-family:var(--font-display);color:var(--gold-bright);text-shadow:-3px -3px 0 var(--ocean-darkest),3px -3px 0 var(--ocean-darkest),-3px 3px 0 var(--ocean-darkest),3px 3px 0 var(--ocean-darkest),0 0 30px #ffd13399;letter-spacing:.05em;text-transform:uppercase;font-size:clamp(4rem,8vw,7rem)}.hero-tagline{font-family:var(--font-heading);color:var(--gold-orange);text-transform:uppercase;letter-spacing:.15em;text-shadow:0 2px 8px #00000080;font-size:1.1rem;font-weight:700}.hero-description{color:var(--ice-blue);text-shadow:0 1px 4px #00000080;max-width:420px;font-size:.95rem;line-height:1.7}.hero-cta-group{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:.5rem;display:flex}.game-preview-panel{justify-content:center;display:flex}.game-preview-card{background:linear-gradient(#d4c4a0 0%,#c0ad88 50%,#a89060 100%);border:4px solid #8b7450;border-radius:16px;width:fit-content;max-width:100%;padding:1.5rem;box-shadow:inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #0000004d,0 8px 30px #0009}.game-preview-image{justify-self:center;width:min(100%,450px);height:auto;display:block}.deco-bubble{pointer-events:none;background:radial-gradient(circle at 30% 30%,#fff9 0%,#69dcf033 60%,#0000 100%);border:1px solid #69dcf04d;border-radius:50%;animation:linear infinite bubble-rise;position:absolute}@keyframes bubble-rise{0%{opacity:.7;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-100vh)scale(.8)}}.features-section{background:linear-gradient(#0b2e3a 0%,#102038 50%,#0b2e3a 100%);padding:5rem 2rem;position:relative;overflow:hidden}.features-section:before{content:"";pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath d='M0,100 Q150,40 300,100 Q450,160 600,100 Q750,40 900,100 Q1050,160 1200,100 L1200,200 L0,200 Z' fill='rgba(30,141,168,0.1)'/%3E%3C/svg%3E") bottom repeat-x;height:200px;position:absolute;bottom:0;left:0;right:0}.section-header{text-align:center;margin-bottom:3rem}.features-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1000px;margin:0 auto;display:grid}.feature-card{text-align:center;background:linear-gradient(#c8b898 0%,#a89060 100%);border:3px solid #8b7450;border-radius:14px;padding:2rem 1.5rem;transition:transform .2s;box-shadow:inset 0 2px 3px #ffffff4d,0 6px 20px #0006}.feature-card:hover{transform:translateY(-4px)}.feature-icon-wrapper{background:linear-gradient(135deg,#9055c8,#5b1e8a);border:3px solid #c896ff66;border-radius:50%;justify-content:center;align-items:center;width:90px;height:90px;margin:0 auto 1.25rem;font-size:2.5rem;display:flex;box-shadow:0 4px 15px #0006,inset 0 1px #fff3}.feature-card h3{font-family:var(--font-display);color:var(--dark-navy);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;font-size:1.1rem}.feature-card p{color:#4a3820;font-size:.82rem;font-weight:500;line-height:1.6}.howtoplay-section{background:radial-gradient(at bottom,#1e8da833 0%,#0000 70%),linear-gradient(#0b2e3a 0%,#081a24 100%);padding:5rem 2rem;position:relative;overflow:hidden}.steps-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1000px;margin:0 auto;display:grid}.step-card{text-align:center;background:linear-gradient(#c8b898 0%,#a89060 100%);border:3px solid #8b7450;border-radius:14px;padding:2rem 1.5rem 1.5rem;position:relative;box-shadow:inset 0 2px 3px #ffffff4d,0 6px 20px #0006}.step-number{width:36px;height:36px;font-family:var(--font-display);color:var(--dark-navy);background:linear-gradient(#fd5,#f90);border:3px solid #8b4400;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;display:flex;position:absolute;top:-18px;left:50%;transform:translate(-50%);box-shadow:0 3px 8px #0006}.step-icon{filter:drop-shadow(0 2px 4px #0000004d);margin:.5rem 0 1rem;font-size:3rem;display:block}.step-card h3{font-family:var(--font-display);color:var(--dark-navy);text-transform:uppercase;margin-bottom:.5rem;font-size:1rem}.step-card p{color:#4a3820;font-size:.82rem;font-weight:500;line-height:1.5}.cta-section{text-align:center;background:linear-gradient(135deg,#0e5a6f 0%,#0b3e4f 50%,#0b2e3a 100%);border-top:2px solid #34b5d84d;border-bottom:2px solid #34b5d84d;padding:5rem 2rem;position:relative;overflow:hidden}.cta-section:before{content:"";pointer-events:none;background:radial-gradient(#34b5d826 0%,#0000 70%);position:absolute;inset:0}.cta-section h2{font-family:var(--font-display);color:var(--gold-bright);text-shadow:-2px -2px #8b4400,2px 2px #0000004d,0 0 30px #ffd13366;text-transform:uppercase;margin-bottom:.75rem;font-size:clamp(2rem,4vw,3.5rem);position:relative}.cta-section p{color:var(--ice-blue);margin-bottom:2rem;font-size:1rem;position:relative}.cta-section .btn-primary-lg{position:relative}.footer{background:linear-gradient(#081a24 0%,#050f15 100%);border-top:2px solid #34b5d833;padding:3rem 2rem 1.5rem}.footer-bottom{text-align:center;color:#e1f7ff66;border-top:1px solid #34b5d826;padding-top:1.5rem;font-size:.78rem}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;background:#050f15d9;justify-content:center;align-items:center;padding:1rem;animation:.2s overlay-in;display:flex;position:fixed;inset:0}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.modal-card{background:linear-gradient(#c8b898 0%,#b0987a 50%,#98805a 100%);border:4px solid #8b7450;border-radius:16px;width:100%;max-width:400px;padding:2rem;animation:.25s modal-in;position:relative;box-shadow:inset 0 2px 4px #ffffff4d,0 20px 60px #000000b3}@keyframes modal-in{0%{opacity:0;transform:translateY(-20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-close{width:28px;height:28px;color:var(--dark-navy);cursor:pointer;background:#00000040;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;line-height:1;transition:background .2s;display:flex;position:absolute;top:.75rem;right:.75rem}.modal-close:hover{color:#fff;background:#00000073}.modal-header{text-align:center;margin-bottom:1.5rem}.modal-header h2{font-family:var(--font-display);color:var(--dark-navy);text-transform:uppercase;letter-spacing:.05em;text-shadow:0 1px #ffffff4d;margin-bottom:.25rem;font-size:1.7rem}.modal-header p{color:#4a3820;font-size:.85rem;font-weight:500}.form-field{margin-bottom:.85rem}.form-field input{width:-webkit-fill-available;font-family:var(--font-body);color:var(--dark-navy);background:#ffffffb3;border:2px solid #8b745066;border-radius:8px;outline:none;padding:.65rem .85rem;font-size:.9rem;transition:border-color .2s,background .2s}.form-field input::placeholder{color:#1a2c3480}.form-field input:focus{border-color:var(--ocean-mid);background:#ffffffe6}.password-container{align-items:center;display:flex;position:relative}.password-container input{width:100%;padding-right:40px}.password-toggle-btn{cursor:pointer;color:#666;background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-size:1.2rem;display:flex;position:absolute;right:10px}.password-toggle-btn:hover{color:#000}.modal-submit{width:100%;margin-top:.5rem}.modal-footer-text{text-align:center;color:#4a3820;margin-top:1rem;font-size:.82rem}.modal-footer-text a{color:var(--ocean-darker);font-weight:700;text-decoration:none}.modal-footer-text a:hover{text-decoration:underline}.seaweed{opacity:.4;width:40px;animation:4s ease-in-out infinite sway;position:absolute;bottom:0}@keyframes sway{0%,to{transform-origin:bottom;transform:rotate(-5deg)scaleY(1)}50%{transform-origin:bottom;transform:rotate(5deg)scaleY(1.05)}}.coral{opacity:.5;animation:3s ease-in-out infinite reverse sway;position:absolute;bottom:0}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:4px;display:none}.hamburger span{background:var(--ice-blue);border-radius:2px;width:24px;height:2px;display:block}@media (max-width:992px){.hero-container{text-align:center;grid-template-columns:1fr;gap:2rem}.hero-left{order:1}.game-preview-panel{order:2}.hero-content{margin-top:-50px}.hero-logo{max-width:380px}.game-preview-image{max-width:340px}.hero-cta-group{justify-content:center}}@media (max-width:768px){.navbar-nav{display:none}.hamburger{display:flex}.hero-container{text-align:center;grid-template-columns:1fr;gap:2rem}.hero-cta-group{justify-content:center}.hero-description{margin:0 auto}.features-grid,.steps-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.hero-container{gap:1.5rem;padding:2rem 1rem}.hero-content{margin-top:-25px}.hero-logo{max-width:280px}.game-preview-image{max-width:260px}.game-preview-card{padding:1rem}.hero-cta-group{flex-direction:column;align-items:center;gap:1rem;width:100%;display:flex}.hero-cta-group button{width:100%;max-width:320px}}@media (max-width:480px){.navbar{padding:0 1rem}.footer-grid{grid-template-columns:1fr}.hero-blast,.hero-bounty{font-size:3.5rem}.hero-logo{max-width:220px}.hero-content{margin-top:-10px}.game-preview-image{max-width:210px}.hero-tagline{font-size:1.2rem}.hero-description{font-size:.95rem;line-height:1.6}}.fish-swim{opacity:.7;pointer-events:none;animation:linear infinite swim;position:absolute}@keyframes swim{to{transform:translate(-150px)}0%{transform:translate(calc(100vw + 100px))}}.glow-gold{text-shadow:0 0 10px #ffd133cc,0 0 20px #ffd13380,0 0 40px #ffd1334d}.glow-blue{text-shadow:0 0 10px #69dcf0cc,0 0 20px #69dcf080,0 0 40px #69dcf04d}.error-box{color:#fecaca;text-align:center;background:#dc26261f;border:1px solid #ef444459;border-radius:12px;margin:12px 0;padding:12px 16px;font-size:.95rem;font-weight:500;line-height:1.4;animation:.2s errorFadeIn}@keyframes errorFadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}