body{margin:0;padding:0;height:100vh;width:100%}html,body{margin:0;padding:0}:root{--warm-cream: #fff8dc;--soft-beige: #f5deb3;--forest-green: #228b22;--deep-forest: #1b5e20;--barn-red: #b22222;--sunset-orange: #ff6347;--field-border: #8fbc8f;--selected-highlight: #32cd32;--soil-brown: #d2691e;--dark-soil: #a0522d;--text-dark: #2f1b0c;--shadow-color: rgba(47, 27, 12, .3);--pixel-white: #ffeaa7;--cozy-yellow: #fdcb6e;--morning-pink: #fd79a8}.login-section{width:20%;height:30%;margin:0 auto;outline:2px solid black;border-radius:12px;box-shadow:0 4px 16px #000000bf;padding:2rem;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center}form{display:flex;flex-direction:column;gap:1rem;width:100%;align-items:center}h1{margin:5px;font-size:3rem}main{display:flex;justify-content:center;align-items:center;height:100vh;width:100%;position:relative;overflow:hidden}main:before{content:"";position:absolute;inset:0;background-image:url(/backgrounds/grass-background.png);background-size:cover;background-position:center;image-rendering:pixelated;filter:blur(12px);transform:scale(1.05);z-index:0}input[type=text],input[type=password]{width:30%;padding:.5rem;outline:none;border:1px solid white;border-top:none;border-left:none;border-right:none;border-bottom:solid 2px black;border-radius:0 0 2px 2px;box-shadow:0 2px 20px var(--shadow-color);background:transparent;color:var(--text-dark);font-size:1.2rem}input[type=text]::placeholder,input[type=password]::placeholder{color:#000;opacity:1}button{width:30%;padding:.5rem;background-color:var(--barn-red);color:var(--pixel-white);border:none;border-radius:4px;cursor:pointer;box-shadow:0 2px 20px var(--shadow-color);font-size:1.2rem}form input[type=text],form input[type=password],form button{width:100%;max-width:320px;box-sizing:border-box}.error-message{background-color:var(--pixel-white, #ffffff);border:2px solid var(--barn-red, #8B0000);color:var(--barn-red, #8B0000);padding:12px 16px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;max-width:400px;box-shadow:0 4px 16px #000000bf;animation:slideIn .3s ease-in-out;position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:1000;margin:0}.error-message p{margin:0;flex-grow:1;font-size:1.2rem;font-weight:500}.error-message button{background:none;border:none;color:var(--barn-red, #8B0000);cursor:pointer;font-size:18px;font-weight:700;padding:4px;width:24px;height:24px;margin-left:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.error-message button:hover{background-color:#8b00001a}.error-message button:focus{outline:2px solid var(--barn-red, #8B0000);outline-offset:2px}@keyframes slideIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media screen and (max-width: 500px){.login-section{width:80%;height:auto;padding:1rem}input[type=text],input[type=password],button{width:100%;max-width:none}h1{font-size:2.5rem}}@media screen and (min-width: 501px) and (max-width: 900px){.login-section{min-width:60%;max-width:60%;height:auto;padding:1.5rem}input[type=text],input[type=password],button{width:100%;max-width:none}h1{font-size:2.8rem}}@media screen and (min-width: 901px) and (max-width: 1200px){.login-section{min-width:40%;max-width:40%;height:auto;padding:2rem}input[type=text],input[type=password],button{width:100%;max-width:none}h1{font-size:3rem}}@media screen and (min-width: 1201px) and (max-width: 1600px){.login-section{min-width:30%;max-width:30%;height:auto;padding:2.5rem}input[type=text],input[type=password],button{width:100%;max-width:none}h1{font-size:3.2rem}}.Main{width:100%;min-height:100vh;height:auto;background-color:none;padding-top:100px;box-sizing:border-box;display:flex;justify-content:space-evenly}.header{width:100%;height:100px;background:linear-gradient(135deg,#ffffffc7,#f5f8ffb8 55%,#ebf2ffb3);background-color:#ffffffbf;backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);display:flex;justify-content:center;align-items:center;gap:32px;position:fixed;top:0;left:0;z-index:100;border-bottom:1.5px solid rgba(255,255,255,.55);border-radius:0 0 18px 18px;box-shadow:0 6px 28px -6px #00000047,0 0 0 1px #ffffff40 inset;padding:0 32px}.header p{min-width:100px;width:auto;height:32px;margin:0 12px;padding:0 18px;background:#ffffffb3;border-radius:8px;font-size:1.1rem;font-weight:500;color:#2563eb;text-align:center;box-shadow:0 1px 4px #0000000a;border:none;outline:none;display:flex;align-items:center;justify-content:center;letter-spacing:.01em;transition:background .2s}.garden{width:80%;min-height:calc(100vh - 250px);height:auto;display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:center;display:grid;grid-template-columns:repeat(4,1fr);place-items:center;background-image:url(/backgrounds/grass-background.png);background-size:cover;background-position:center;background-repeat:no-repeat;image-rendering:pixelated}.field{height:200px;width:200px;display:flex;justify-content:center;outline:dashed 3px black;align-items:center;background-image:url(/backgrounds/crop-background-not-watered.png);background-size:cover;background-position:center;background-repeat:no-repeat;image-rendering:pixelated}.field img{width:50%;height:50%;object-fit:cover}.selected{outline:solid 2px red}.garden-section{width:300px;min-height:120px;background:transparent;border:2.5px solid #fff;border-radius:18px;box-shadow:0 8px 40px #00000052,0 0 0 3px #ffffff2e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:18px 12px 12px;margin:10px 0;transition:box-shadow .2s,border-color .2s}.garden-section:hover{border-color:#fdcb6e}.garden-section label{width:200px;text-align:left;font-family:Segoe UI,Arial,sans-serif;font-weight:400;font-size:.97rem;margin:6px 0 0;color:#fff;font-weight:700;text-align:center;border-radius:6px;padding:7px 12px;letter-spacing:.01em;display:block;box-shadow:none;font-size:1.2rem;transition:border-color .2s}.garden-section label:first-of-type{margin-top:10px}.tool-box{width:100px;height:100px;display:flex;justify-content:center;align-items:center;outline:solid 2px black;cursor:pointer}.tool-box img{width:100%;height:100%;image-rendering:pixelated;max-width:100px;max-height:100px}.help-box{width:60px;height:60px;border-radius:50%;background:#000;position:fixed;bottom:10px;right:10px;margin:0;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:150;background-image:url(/backgrounds/help-box.svg);background-size:60%;background-position:center;background-repeat:no-repeat}.backpack{width:80%;height:80%;position:fixed;outline:solid 2px black;z-index:102;transform:translate(-50%,-50%);top:50%;left:50%;background-color:#faebd7;border-radius:12px;display:flex;flex-direction:column;padding:20px}.backpack-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #333}.backpack-header h1{margin:0;color:#333}.backpack-header button{padding:4px 8px;background:#ff6b6b;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;font-size:.9rem}.backpack-header button:hover{background:#ff5252}.backpack-item{outline:solid 2px black;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fffc;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px;text-align:center;gap:10px;cursor:pointer}.backpack-item img{width:auto;height:auto;max-width:80px;max-height:80px;object-fit:contain}.backpack-item span{font-weight:700;color:#333;font-size:2rem}.blur-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:101;background:#ffffff4d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}.settings{height:300px;width:400px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffffe6;border-radius:12px;box-shadow:0 4px 18px #00000021;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.backpack-items{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:300px;gap:15px;overflow-y:auto;padding:10px 0}.shop{width:80%;height:80%;position:fixed;outline:solid 2px black;z-index:102;transform:translate(-50%,-50%);top:50%;left:50%;background-color:#faebd7;border-radius:12px;display:flex;flex-direction:column;padding:20px}.shop-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #333}.shop-header h1{margin:0;color:#333}.shop-header button{padding:8px 16px;background:#ff6b6b;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;font-size:1.1rem;width:100px;max-width:100px}.shop-header button:hover{background:#ff5252}.shop-item{outline:solid 2px black;display:flex;flex-direction:column;justify-content:space-between;align-items:center;background:#fffc;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:15px;text-align:center;gap:8px;height:100%;box-sizing:border-box}.shop-item button{margin-top:auto;margin-bottom:0;padding:12px 20px;background:#4caf50;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;font-size:1.1rem;transition:background .2s;width:100%;max-width:140px}.shop-item button:hover{background:#45a049}.shop-item img{width:auto;height:auto;max-width:120px;max-height:120px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}.shop-item span{font-weight:700;color:#333;font-size:1.5rem;margin:5px 0}.shop-item .price{font-size:1.2rem;color:#666;margin:5px 0}.shop-items{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(320px,auto);gap:15px;overflow-y:auto;padding:10px 0}.shop-header span{font-size:1.5rem;color:#555;font-weight:700;display:flex;align-items:center;gap:8px}.shop-header span:before{content:"💰";font-size:1.2rem}@media screen and (max-width: 500px){.Main{padding-top:80px}.garden{grid-template-columns:repeat(1,1fr);padding-bottom:20px;width:50%}.backpack{width:95%;height:90%;padding:15px}.backpack-items{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;gap:10px}.backpack-item{padding:15px}.backpack-item img{max-width:60px;max-height:60px}.backpack-item span{font-size:1.5rem}.backpack-header button{padding:6px 10px;font-size:.85rem;width:auto;max-width:80px}.shop-header button{padding:6px 12px;font-size:.9rem;width:80px;max-width:80px}.shop{width:95%;height:90%;padding:15px}.shop-items{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px;gap:10px}.shop-item{padding:10px}.shop-item img{max-width:70px;max-height:70px}.shop-item span{font-size:1.2rem}.shop-item button{padding:8px 14px;font-size:.9rem}.tool-box{width:80px;height:80px}.tool-box img{max-width:80px;max-height:80px}.header{height:auto;min-height:70px;padding:8px 16px;gap:12px;flex-wrap:wrap;justify-content:space-between}.header p{flex:1 1 auto;min-width:110px;margin:4px 6px;padding:4px 10px;font-size:.85rem;height:26px}}@media screen and (min-width: 501px) and (max-width: 900px){.Main{padding-top:80px}.garden{grid-template-columns:repeat(1,1fr);padding-bottom:20px;width:40%;margin:0 auto;display:grid;place-items:center}.backpack{width:90%;height:85%;padding:18px}.backpack-items{grid-template-columns:repeat(3,1fr);grid-auto-rows:250px;gap:12px}.backpack-item{padding:18px}.backpack-item img{max-width:70px;max-height:70px}.backpack-item span{font-size:1.8rem}.backpack-header button{padding:8px 12px;font-size:.9rem;width:auto;max-width:90px}.shop-header button{padding:6px 14px;font-size:1rem;width:85px;max-width:85px}.shop{width:90%;height:85%;padding:18px}.shop-items{grid-template-columns:repeat(3,1fr);grid-auto-rows:260px;gap:12px}.shop-item{padding:12px}.shop-item img{max-width:80px;max-height:80px}.shop-item span{font-size:1.4rem}.shop-item button{padding:9px 16px;font-size:.95rem}.tool-box{width:100px;height:100px}.tool-box img{width:100px;height:100px;max-width:100px;max-height:100px;object-fit:contain}.header{height:auto;min-height:70px;padding:8px 16px;gap:12px;flex-wrap:wrap;justify-content:space-between}.header p{flex:1 1 auto;min-width:110px;margin:4px 6px;padding:4px 10px;font-size:.85rem;height:26px}}@media screen and (min-width: 901px) and (max-width: 1050px){.Main{padding-top:80px}.garden{grid-template-columns:repeat(2,1fr);padding-bottom:20px;width:60%;gap:20px}.backpack{width:85%;height:80%}.backpack-items{grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:12px}.backpack-header button{padding:8px 12px;font-size:.9rem;width:auto;max-width:100px}.shop-header button{padding:7px 15px;font-size:1rem;width:90px;max-width:90px}.shop{width:85%;height:80%}.shop-items{grid-template-columns:repeat(4,1fr);grid-auto-rows:280px;gap:12px}.tool-box{width:100px;height:100px}.tool-box img{width:100px;height:100px;max-width:100px;max-height:100px;object-fit:contain}.header{height:auto;min-height:70px;padding:8px 16px;gap:12px;flex-wrap:wrap;justify-content:space-between}.header p{flex:1 1 auto;min-width:110px;margin:4px 6px;padding:4px 10px;font-size:.85rem;height:26px}}@media screen and (min-width: 1051px) and (max-width: 1200px){.Main{padding-top:80px}.garden{grid-template-columns:repeat(2,1fr);padding-bottom:20px;width:90%}.backpack{width:82%;height:78%}.backpack-items{grid-auto-rows:270px;gap:12px}.backpack-header button{padding:8px 12px;font-size:.9rem;width:auto;max-width:100px}.shop-header button{padding:7px 15px;font-size:1rem;width:90px;max-width:90px}.shop{width:82%;height:78%}.shop-items{grid-auto-rows:290px;gap:12px}.tool-box{width:100px;height:100px}.tool-box img{width:100px;height:100px;max-width:100px;max-height:100px;object-fit:contain}.header{height:auto;min-height:70px;padding:8px 16px;gap:12px;flex-wrap:wrap;justify-content:space-between}.header p{flex:1 1 auto;min-width:110px;margin:4px 6px;padding:4px 10px;font-size:.85rem;height:26px}}@media screen and (min-width: 1201px) and (max-width: 1600px){.Main{padding-top:100px}.garden{grid-template-columns:repeat(3,1fr);width:75%;gap:20px}.header{height:100px;padding:0 32px;gap:32px;flex-wrap:nowrap;justify-content:center}.header p{flex:0 0 auto;min-width:100px;margin:0 12px;padding:0 18px;font-size:1.1rem;height:32px}.backpack-header button{padding:8px 12px;font-size:.9rem;width:auto;max-width:100px}.shop-header button{padding:7px 16px;font-size:1rem;width:95px;max-width:95px}.shop{width:80%;height:78%}.shop-items{grid-auto-rows:290px;gap:12px}}@media screen and (min-width: 1601px) and (max-width: 1950px){.Main{padding-top:100px}.garden{grid-template-columns:repeat(4,1fr);width:80%;gap:20px}.header{height:100px;padding:0 32px;gap:32px;flex-wrap:nowrap;justify-content:center}.header p{flex:0 0 auto;min-width:100px;margin:0 12px;padding:0 18px;font-size:1.1rem;height:32px}.shop-header button{padding:7px 16px;font-size:1rem;width:95px;max-width:95px}.shop{width:80%;height:80%}.shop-items{grid-template-columns:repeat(4,1fr);grid-auto-rows:300px;gap:15px}}@media screen and (min-width: 1951px){.Main{padding-top:100px}.garden{grid-template-columns:repeat(5,1fr);gap:20px}.header{height:100px;padding:0 32px;gap:32px;flex-wrap:nowrap;justify-content:center}.header p{flex:0 0 auto;min-width:100px;margin:0 12px;padding:0 18px;font-size:1.1rem;height:32px}.shop-header button{padding:7px 16px;font-size:1rem;width:95px;max-width:95px}.shop{width:80%;height:80%}.shop-items{grid-template-columns:repeat(5,1fr);grid-auto-rows:300px;gap:15px}}.sidebar{position:fixed;left:20px;top:50%;transform:translateY(-50%);margin-top:50px}