:root{--primary-color: #6c63ff;--background-color: #f9f9ff;--text-color: #333333;--secondary-bg: #ffffff;--border-color: #e0e0e0;--scene-bg: #e6f7ff;--fence-color: #8b4513;--sheep-color: #ffffff;--sheep-face: #333;--shadow-color: rgba(0, 0, 0, .1)}[data-theme=dark]{--primary-color: #8c83ff;--background-color: #121212;--text-color: #f0f0f0;--secondary-bg: #1e1e1e;--border-color: #3d3d3d;--scene-bg: #0a1525;--fence-color: #8b5a2b;--sheep-color: #e0e0e0;--sheep-face: #222;--shadow-color: rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--background-color);color:var(--text-color);transition:background-color .3s,color .3s;min-height:100vh;display:flex;flex-direction:column}#app{display:flex;flex-direction:column;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:var(--secondary-bg);box-shadow:0 2px 4px var(--shadow-color)}.logo{display:flex;align-items:center;gap:1rem}.logo-img{height:40px;width:auto}.logo h1{font-size:1.5rem;font-weight:600;color:var(--primary-color)}.actions{display:flex;align-items:center;gap:1rem}#theme-toggle{background:none;border:none;font-size:1.2rem;color:var(--text-color);cursor:pointer;transition:color .3s}#theme-toggle:hover{color:var(--primary-color)}.share-buttons{display:flex;gap:.7rem}.share-buttons a{color:var(--text-color);font-size:1.2rem;transition:color .3s}.share-buttons a:hover{color:var(--primary-color)}main{flex:1;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:2rem}#game-container{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center;gap:1rem}#counter{font-size:2.5rem;font-weight:700;color:var(--primary-color)}#game-scene{width:100%;height:300px;background-color:var(--scene-bg);background-image:linear-gradient(to bottom,#87ceeb,#e6f7ff);border-radius:12px;position:relative;overflow:hidden;border:2px solid var(--border-color);box-shadow:0 4px 8px var(--shadow-color);perspective:1000px;transition:background-image .5s}[data-theme=dark] #game-scene{background-image:linear-gradient(to bottom,#0a1525,#152238)}.sky-background{position:absolute;top:0;left:0;width:200%;height:100%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'%3E%3Cpath fill='%23FFFFFF' d='M30,50 Q40,40 50,50 T70,50 T90,50 T110,50 T130,50 T150,50 T170,50'/%3E%3C/svg%3E") repeat-x;animation:scrollClouds 60s linear infinite;opacity:.7;z-index:1;transition:opacity .5s}[data-theme=dark] .sky-background{opacity:.15;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'%3E%3Cpath fill='%23AAAACC' d='M30,50 Q40,40 50,50 T70,50 T90,50 T110,50 T130,50 T150,50 T170,50'/%3E%3C/svg%3E") repeat-x}@keyframes scrollClouds{0%{transform:translate(0)}to{transform:translate(-50%)}}.hills-background{position:absolute;bottom:20px;left:0;width:200%;height:60px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60' viewBox='0 0 400 60'%3E%3Cpath fill='%2344AA44' d='M0,60 L0,40 Q50,20 100,40 Q150,60 200,40 Q250,20 300,40 Q350,60 400,40 L400,60 Z'/%3E%3C/svg%3E") repeat-x;animation:scrollHills 30s linear infinite;z-index:2;transition:background .5s}[data-theme=dark] .hills-background{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60' viewBox='0 0 400 60'%3E%3Cpath fill='%23225522' d='M0,60 L0,40 Q50,20 100,40 Q150,60 200,40 Q250,20 300,40 Q350,60 400,40 L400,60 Z'/%3E%3C/svg%3E") repeat-x}@keyframes scrollHills{0%{transform:translate(0)}to{transform:translate(-50%)}}.primary-button{background-color:var(--primary-color);color:#fff;border:none;padding:.75rem 2rem;font-size:1rem;border-radius:50px;cursor:pointer;transition:background-color .3s;box-shadow:0 2px 4px var(--shadow-color)}.primary-button:hover{background-color:color-mix(in srgb,var(--primary-color) 80%,black)}#controls{width:100%;max-width:800px;background-color:var(--secondary-bg);padding:1.5rem;border-radius:12px;box-shadow:0 2px 6px var(--shadow-color);display:flex;flex-direction:column;gap:1.5rem}.control-group{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}#white-noise{list-style:none;display:flex;gap:.5rem;padding:.5rem 1rem;flex-wrap:wrap}.noise-type{list-style:none;cursor:pointer;padding:.5rem 1rem;border-radius:4px;border:1px solid var(--border-color)}.noise-type.active{background-color:var(--primary-color);color:#fff}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:var(--primary-color)}input:checked+.slider:before{transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}select,input[type=range]{padding:.5rem;border-radius:4px;border:1px solid var(--border-color);background-color:var(--background-color);color:var(--text-color)}select{padding:.5rem 1rem}.volume-control{display:flex;align-items:center;gap:.5rem}input[type=range]{width:100px}footer{background-color:var(--secondary-bg);padding:1rem;text-align:center;font-size:.9rem;border-top:1px solid var(--border-color)}.sheep{position:absolute;bottom:20px;width:60px;height:60px;z-index:10}.fence{position:absolute;left:50%;transform:translate(-50%) perspective(500px) rotateX(30deg);bottom:5px;height:80px;width:8px;background-color:var(--fence-color);z-index:8;border-radius:3px}.fence:before{content:"";position:absolute;top:20px;left:-45px;width:100px;height:6px;background-color:var(--fence-color);border-radius:3px;transform:perspective(500px) rotateX(-5deg);box-shadow:0 2px 4px #0003}.fence:after{content:"";position:absolute;top:50px;left:-45px;width:100px;height:6px;background-color:var(--fence-color);border-radius:3px;transform:perspective(500px) rotateX(-5deg);box-shadow:0 2px 4px #0003}.fence .post-left{position:absolute;bottom:0;left:-48px;height:80px;width:8px;background-color:var(--fence-color);border-radius:3px;transform:perspective(500px) rotateX(5deg)}.fence .post-right{position:absolute;bottom:0;right:-48px;height:80px;width:8px;background-color:var(--fence-color);border-radius:3px;transform:perspective(500px) rotateX(5deg)}.grass{position:absolute;bottom:0;left:0;width:100%;height:20px;background-color:#3a9c35;z-index:7;transition:background-color .5s}[data-theme=dark] .grass{background-color:#1d4f1a}.grass:before{content:"";position:absolute;bottom:10px;left:0;width:100%;height:15px;background:repeating-linear-gradient(80deg,#3a9c35,#3a9c35 10px,#44b33e 10px,#44b33e 20px);border-radius:5px 5px 0 0;z-index:7;transition:background .5s}[data-theme=dark] .grass:before{background:repeating-linear-gradient(80deg,#1d4f1a,#1d4f1a 10px,#265c22 10px,#265c22 20px)}.grass-tuft{position:absolute;bottom:20px;width:10px;height:15px;background-color:#2d8c2d;clip-path:polygon(50% 0%,0% 100%,100% 100%);z-index:7;transition:background-color .5s}[data-theme=dark] .grass-tuft{background-color:#184714}.stars{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(1px 1px at 25px 5px,white 50%,transparent 100%),radial-gradient(1px 1px at 50px 25px,white 50%,transparent 100%),radial-gradient(1px 1px at 125px 20px,white 50%,transparent 100%),radial-gradient(1.5px 1.5px at 150px 15px,white 50%,transparent 100%),radial-gradient(1px 1px at 175px 35px,white 50%,transparent 100%),radial-gradient(1px 1px at 200px 5px,white 50%,transparent 100%),radial-gradient(1.5px 1.5px at 250px 25px,white 50%,transparent 100%),radial-gradient(1px 1px at 300px 15px,white 50%,transparent 100%),radial-gradient(1px 1px at 350px 5px,white 50%,transparent 100%),radial-gradient(1.5px 1.5px at 400px 35px,white 50%,transparent 100%),radial-gradient(1px 1px at 450px 20px,white 50%,transparent 100%),radial-gradient(1px 1px at 500px 5px,white 50%,transparent 100%),radial-gradient(1.5px 1.5px at 550px 25px,white 50%,transparent 100%);opacity:0;z-index:1;transition:opacity .5s}[data-theme=dark] .stars{opacity:.8}.moon{position:absolute;top:30px;right:80px;width:40px;height:40px;background-color:#fffde7;border-radius:50%;box-shadow:0 0 20px #fffde7;opacity:0;z-index:1;transition:opacity .5s}[data-theme=dark] .moon{opacity:.9}.moon:before{content:"";position:absolute;top:10px;left:10px;width:10px;height:10px;background-color:#c8c8c84d;border-radius:50%}.moon:after{content:"";position:absolute;bottom:12px;right:12px;width:7px;height:7px;background-color:#c8c8c84d;border-radius:50%}@media (max-width: 768px){header{padding:1rem;flex-direction:column;gap:1rem;text-align:center}#game-scene{height:250px}.control-group{flex-direction:column;align-items:flex-start}#white-noise{flex-direction:column}main{padding:1rem}}@media (max-width: 480px){#game-scene{height:200px}.logo h1{font-size:1.2rem}.volume-control,input[type=range]{width:100%}}