@import"https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,800;1,9..144,400&family=DM+Sans:wght@400;500;600&display=swap";:root{--soil-dark: #1a1612;--soil-medium: #2d2520;--soil-light: #3d332b;--bark: #5c4a3d;--grass-dark: #2d5016;--grass: #4a8522;--grass-light: #6cb33f;--grass-glow: #8ed45a;--stone: #6b6b6b;--stone-light: #9a9a9a;--parchment: #f5f0e8;--parchment-dark: #e8e0d0}html,body{margin:0;padding:0;background:var(--soil-dark)}.home-page{font-family:DM Sans,system-ui,sans-serif;background:var(--soil-dark);min-height:100vh;margin:0;padding:0;overflow-x:hidden;color:var(--parchment)}.home-page *{box-sizing:border-box}.home-page:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;opacity:.03;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");z-index:1}.home-container{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column}.home-header{padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--soil-light)}.home-logo{font-family:Fraunces,serif;font-size:1.4rem;font-weight:600;color:var(--grass-light);text-decoration:none;display:flex;align-items:center;gap:.5rem}.home-logo:before{content:"";width:24px;height:24px;background:var(--grass);border-radius:4px;box-shadow:inset -2px -2px 0 var(--grass-dark),inset 2px 2px 0 var(--grass-light)}.home-nav{display:flex;gap:1rem}.home-nav a{font-size:.9rem;color:var(--stone-light);text-decoration:none;padding:.5rem 1rem;border-radius:6px;transition:all .2s ease}.home-nav a:hover{color:var(--parchment);background:var(--soil-light)}.home-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;position:relative}.grass-field{position:absolute;bottom:0;left:0;right:0;height:120px;overflow:hidden;pointer-events:none}.grass-blade{position:absolute;bottom:0;width:4px;background:linear-gradient(to top,var(--grass-dark),var(--grass),var(--grass-light));border-radius:2px 2px 0 0;transform-origin:bottom center;animation:sway 3s ease-in-out infinite}@keyframes sway{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.home-title{font-family:Fraunces,serif;font-size:clamp(3rem,10vw,6rem);font-weight:800;line-height:1.1;margin:0 0 1.5rem;background:linear-gradient(135deg,var(--grass-light) 0%,var(--grass) 50%,var(--grass-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;position:relative}.home-title:after{content:"Grass War";position:absolute;left:0;top:4px;width:100%;background:linear-gradient(135deg,var(--soil-light),var(--bark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;z-index:-1;opacity:.5}.home-subtitle{font-size:1.25rem;color:var(--stone-light);max-width:500px;margin:0 auto 3rem;line-height:1.6}.home-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;max-width:700px;width:100%;margin-bottom:3rem}.feature-card{background:var(--soil-medium);border:1px solid var(--soil-light);border-radius:12px;padding:1.5rem;text-align:left;transition:all .3s ease;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--grass-dark),var(--grass-light));opacity:0;transition:opacity .3s ease}.feature-card:hover{transform:translateY(-4px);border-color:var(--bark);box-shadow:0 12px 32px #0006}.feature-card:hover:before{opacity:1}.feature-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.25rem}.feature-icon.plant{background:linear-gradient(135deg,var(--grass-dark),var(--grass))}.feature-icon.cut{background:linear-gradient(135deg,var(--bark),var(--soil-light))}.feature-icon.move{background:linear-gradient(135deg,var(--stone),var(--stone-light))}.feature-title{font-family:Fraunces,serif;font-size:1.1rem;font-weight:600;color:var(--parchment);margin:0 0 .5rem}.feature-desc{font-size:.875rem;color:var(--stone-light);margin:0;line-height:1.5}.home-callout{background:var(--soil-medium);border-left:3px solid var(--grass);padding:1rem 1.5rem;border-radius:0 8px 8px 0;max-width:500px;margin-bottom:3rem;text-align:left}.home-callout p{margin:0;font-size:.95rem;color:var(--parchment-dark);line-height:1.6}.home-cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;font-family:DM Sans,sans-serif;font-size:1rem;font-weight:600;text-decoration:none;border-radius:8px;transition:all .2s ease;cursor:pointer;border:none}.btn-primary{background:linear-gradient(135deg,var(--grass),var(--grass-dark));color:#fff;box-shadow:0 4px 12px #4a85224d,inset 0 1px #ffffff1a}.btn-primary:hover{background:linear-gradient(135deg,var(--grass-light),var(--grass));transform:translateY(-2px);box-shadow:0 6px 20px #4a852266,inset 0 1px #ffffff26}.btn-secondary{background:var(--soil-light);color:var(--parchment);border:1px solid var(--bark)}.btn-secondary:hover{background:var(--bark);transform:translateY(-2px)}.btn-game{background:linear-gradient(135deg,var(--grass-light),var(--grass));color:#fff;font-size:1.1rem;padding:1.25rem 2.5rem;box-shadow:0 4px 16px #4a852266,inset 0 1px #fff3}.btn-game:hover{background:linear-gradient(135deg,var(--grass-glow),var(--grass-light));transform:translateY(-2px) scale(1.02);box-shadow:0 8px 24px #4a852280,inset 0 1px #ffffff40}.home-footer{padding:2rem;text-align:center;border-top:1px solid var(--soil-light);color:var(--stone);font-size:.85rem}.soil-layers{position:absolute;bottom:0;left:0;right:0;height:200px;pointer-events:none;overflow:hidden}.soil-layer{position:absolute;left:-5%;right:-5%;height:60px;border-radius:100% 100% 0 0}.soil-layer-1{bottom:0;background:var(--soil-medium)}.soil-layer-2{bottom:30px;background:var(--soil-light);opacity:.6}.soil-layer-3{bottom:50px;background:var(--bark);opacity:.3}@media(max-width:640px){.home-header{flex-direction:column;gap:1rem}.home-hero{padding:2rem 1.5rem}.home-features{grid-template-columns:1fr}.home-cta{flex-direction:column;width:100%;max-width:300px}.btn{justify-content:center}}.grass-field .grass-blade:nth-child(1){left:3%;height:45px;animation-delay:0s}.grass-field .grass-blade:nth-child(2){left:7%;height:55px;animation-delay:.2s}.grass-field .grass-blade:nth-child(3){left:11%;height:40px;animation-delay:.4s}.grass-field .grass-blade:nth-child(4){left:15%;height:60px;animation-delay:.1s}.grass-field .grass-blade:nth-child(5){left:19%;height:50px;animation-delay:.3s}.grass-field .grass-blade:nth-child(6){left:23%;height:65px;animation-delay:.5s}.grass-field .grass-blade:nth-child(7){left:27%;height:42px;animation-delay:.15s}.grass-field .grass-blade:nth-child(8){left:31%;height:58px;animation-delay:.35s}.grass-field .grass-blade:nth-child(9){left:35%;height:48px;animation-delay:.25s}.grass-field .grass-blade:nth-child(10){left:39%;height:52px;animation-delay:.45s}.grass-field .grass-blade:nth-child(11){left:43%;height:62px;animation-delay:.1s}.grass-field .grass-blade:nth-child(12){left:47%;height:44px;animation-delay:.3s}.grass-field .grass-blade:nth-child(13){left:51%;height:56px;animation-delay:.2s}.grass-field .grass-blade:nth-child(14){left:55%;height:68px;animation-delay:.4s}.grass-field .grass-blade:nth-child(15){left:59%;height:46px;animation-delay:.15s}.grass-field .grass-blade:nth-child(16){left:63%;height:54px;animation-delay:.35s}.grass-field .grass-blade:nth-child(17){left:67%;height:49px;animation-delay:.25s}.grass-field .grass-blade:nth-child(18){left:71%;height:61px;animation-delay:.05s}.grass-field .grass-blade:nth-child(19){left:75%;height:43px;animation-delay:.45s}.grass-field .grass-blade:nth-child(20){left:79%;height:57px;animation-delay:.2s}.grass-field .grass-blade:nth-child(21){left:83%;height:51px;animation-delay:.3s}.grass-field .grass-blade:nth-child(22){left:87%;height:63px;animation-delay:.1s}.grass-field .grass-blade:nth-child(23){left:91%;height:47px;animation-delay:.4s}.grass-field .grass-blade:nth-child(24){left:95%;height:59px;animation-delay:.25s}
