/* Fjordora - Nordic Nature Theme with Grid Layout */
*{margin:0;padding:0;box-sizing:border-box}
:root{--forest-green:#2d5f4f;--dark-green:#1a3a2e;--moss-green:#3e6b54;--sage:#8b9d83;--earth:#6b5a3d;--cream:#f4f1e8;--light-cream:#faf8f3;--text-dark:#2a2a2a}
body{font-family:'Lato',sans-serif;background:linear-gradient(135deg,var(--light-cream) 0%,var(--cream) 100%);color:var(--text-dark);line-height:1.6}

/* Header */
.main-header{background:linear-gradient(90deg,rgba(255,255,255,0.95),rgba(244,241,232,0.95));border-bottom:3px solid var(--forest-green);position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.container{max-width:1300px;margin:0 auto;padding:20px 40px}
.main-header .container{display:flex;justify-content:space-between;align-items:center;padding:15px 40px}
.brand-logo{height:50px;width:auto}
.navigation{display:flex;gap:30px}
.nav-link{font-size:16px;font-weight:700;color:var(--earth);text-decoration:none;text-transform:uppercase;letter-spacing:1px;transition:all 0.3s;position:relative}
.nav-link::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:3px;background:var(--forest-green);transition:width 0.3s}
.nav-link:hover,.nav-link.active{color:var(--forest-green)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{width:25px;height:3px;background:var(--forest-green);transition:all 0.3s}

/* Hero */
.hero{background:linear-gradient(135deg,var(--moss-green) 0%,var(--forest-green) 100%);color:white;text-align:center;padding:70px 40px;border-bottom:4px solid var(--earth)}
.hero h1{font-family:'Merriweather',serif;font-size:56px;font-weight:900;margin-bottom:15px}
.hero-text{font-size:20px;opacity:0.9;margin-bottom:20px}
.divider{font-size:24px;letter-spacing:15px;opacity:0.8}

/* Intro */
.intro{background:white;padding:60px 0}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.intro-main h2{font-family:'Merriweather',serif;font-size:38px;color:var(--forest-green);margin-bottom:20px}
.intro-main p{font-size:18px;line-height:1.8;color:var(--text-dark)}
.intro-features{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.feat-item{background:var(--cream);padding:25px;border-radius:10px;border:2px solid var(--sage);transition:all 0.3s}
.feat-item:hover{transform:translateY(-5px);border-color:var(--forest-green);box-shadow:0 8px 20px rgba(0,0,0,0.1)}
.feat-icon{font-size:40px;display:block;margin-bottom:15px}
.feat-item h3{font-size:20px;color:var(--forest-green);margin-bottom:10px}
.feat-item p{font-size:15px;color:var(--text-dark)}

/* Notices */
.notices{background:var(--cream);padding:60px 0}
.notice-box{background:white;padding:40px;border-radius:15px;border:3px solid var(--earth)}
.notice-box h3{font-family:'Merriweather',serif;font-size:30px;color:var(--earth);margin-bottom:25px;text-align:center}
.notice-list{display:grid;gap:20px}
.notice-item{background:var(--light-cream);padding:20px;border-radius:8px;border-left:5px solid var(--forest-green)}
.notice-item strong{display:block;color:var(--forest-green);font-size:18px;margin-bottom:8px}

/* Game Section */
.game-section{background:white;padding:60px 0}
.game-section h2{font-family:'Merriweather',serif;font-size:38px;color:var(--forest-green);text-align:center;margin-bottom:15px}
.game-desc{text-align:center;font-size:17px;margin-bottom:30px;color:var(--text-dark)}
.game-wrapper{background:var(--cream);padding:25px;border-radius:15px;border:3px solid var(--forest-green);box-shadow:0 5px 20px rgba(0,0,0,0.1)}
.game-frame{width:100%;height:600px;border-radius:10px;background:#000}
.game-note{text-align:center;margin-top:20px;font-size:16px;color:var(--earth)}

/* Information */
.information{background:var(--cream);padding:60px 0}
.info-grid{display:grid;gap:30px}
.info-block{background:white;padding:35px;border-radius:15px;border:2px solid var(--sage)}
.info-block h3{font-family:'Merriweather',serif;font-size:26px;color:var(--forest-green);margin-bottom:15px}
.info-block p{font-size:17px;line-height:1.8;color:var(--text-dark)}

/* Play Pages */
.play-info{background:white;padding:40px 0}
.info-banner{background:var(--cream);padding:25px;border-radius:10px;border:2px solid var(--forest-green)}
.info-banner p{margin-bottom:12px;font-size:16px}
.info-banner p:last-child{margin-bottom:0}
.play-area{background:var(--cream);padding:60px 0}
.play-wrapper{background:white;padding:25px;border-radius:15px;border:3px solid var(--forest-green);box-shadow:0 5px 20px rgba(0,0,0,0.1)}
.play-frame{width:100%;height:700px;border-radius:10px;background:#000}
.tips{background:white;padding:60px 0}
.tips h2{font-family:'Merriweather',serif;font-size:38px;color:var(--forest-green);text-align:center;margin-bottom:35px}
.tips-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.tip-card{background:var(--cream);padding:25px;border-radius:10px;border:2px solid var(--sage)}
.tip-card h3{font-size:18px;color:var(--forest-green);margin-bottom:10px}
.tip-card p{font-size:15px;color:var(--text-dark)}

/* Legal */
.legal-content{background:white;padding:60px 0}
.legal-doc{background:var(--light-cream);padding:40px;border-radius:15px;border:2px solid var(--sage)}
.legal-doc h2{font-family:'Merriweather',serif;font-size:28px;color:var(--forest-green);margin-top:30px;margin-bottom:15px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p{margin-bottom:15px;font-size:16px;line-height:1.7}
.legal-doc ul{margin:15px 0 15px 25px}
.legal-doc li{margin-bottom:8px;font-size:16px}
.legal-doc a{color:var(--forest-green);text-decoration:underline}
.legal-doc a:hover{color:var(--earth)}
.legal-note,.alert-box{background:var(--cream);border:3px solid var(--earth);padding:25px;margin-top:30px;border-radius:10px;text-align:center}

/* Footer */
.site-footer{background:linear-gradient(135deg,var(--dark-green),var(--forest-green));color:white;padding:50px 0 30px}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-bottom:25px}
.footer-section h4{font-family:'Merriweather',serif;font-size:20px;margin-bottom:15px;opacity:0.9}
.footer-section p{font-size:15px;opacity:0.8;margin-bottom:12px}
.footer-section ul{list-style:none;padding:0}
.footer-section li{margin-bottom:8px}
.footer-section a{color:white;text-decoration:none;font-size:15px;opacity:0.8;transition:opacity 0.3s}
.footer-section a:hover{opacity:1}
.footer-mark{text-align:center;font-size:24px;letter-spacing:20px;opacity:0.6}

/* Age Modal */
.age-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(26,58,46,0.95);z-index:1000;justify-content:center;align-items:center}
.age-modal.active{display:flex}
.verify-card{background:white;border:4px solid var(--forest-green);border-radius:20px;max-width:500px;width:90%;padding:45px;text-align:center;box-shadow:0 0 40px rgba(0,0,0,0.3)}
.nature-icon{font-size:48px;margin-bottom:20px}
.verify-card h2{font-family:'Merriweather',serif;font-size:32px;color:var(--forest-green);margin-bottom:20px}
.verify-card p{font-size:17px;margin-bottom:12px;color:var(--text-dark);line-height:1.6}
.verify-buttons{display:flex;gap:15px;margin-top:30px;justify-content:center}
.btn-yes,.btn-no{padding:15px 35px;font-size:17px;font-weight:700;border:2px solid;border-radius:8px;cursor:pointer;transition:all 0.3s;text-transform:uppercase}
.btn-yes{background:var(--forest-green);color:white;border-color:var(--forest-green)}
.btn-yes:hover{background:var(--dark-green);border-color:var(--dark-green)}
.btn-no{background:transparent;color:var(--earth);border-color:var(--earth)}
.btn-no:hover{background:var(--earth);color:white}

/* Responsive */
@media (max-width:768px){
.navigation{position:fixed;top:70px;right:-100%;width:80%;max-width:280px;height:calc(100vh - 70px);background:white;border-left:3px solid var(--forest-green);flex-direction:column;padding:30px 20px;transition:right 0.3s;box-shadow:-5px 0 15px rgba(0,0,0,0.1)}
.navigation.active{right:0}
.nav-toggle{display:flex}
.hero h1{font-size:36px}
.intro-grid,.intro-features,.tips-grid{grid-template-columns:1fr}
.game-frame{height:400px}
.play-frame{height:500px}
.footer-grid{grid-template-columns:1fr}
.verify-buttons{flex-direction:column}
.btn-yes,.btn-no{width:100%}
}