:root{--bg:#a9d8e8;--paper:#fff8ea;--paper-2:#f6ead2;--ink:#3b2f22;--ink-soft:#6f5e49;--line:#e0cfae;--wood:#b5814a;--wood-dark:#7d522b;--green:#5d9e3f;--green-dark:#3f7a2a;--gold:#f6c343;--red:#c4553b;--shadow:0 6px 18px #3c280f38;--radius:14px;color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Nunito,Segoe UI,system-ui,-apple-system,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);overscroll-behavior:none;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}:focus-visible{outline-offset:2px;outline:3px solid #2f7fd0}h1,h2,h3{margin:0}.icon{vertical-align:middle;flex-shrink:0;display:inline-block}.btn{border:2px solid var(--wood-dark);background:var(--paper-2);box-shadow:0 3px 0 var(--wood-dark);color:var(--ink);border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-weight:700;text-decoration:none;transition:transform 60ms,box-shadow 60ms;display:inline-flex}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--wood-dark);transform:translateY(2px)}.btn-primary{background:var(--green);border-color:var(--green-dark);color:#fff;box-shadow:0 3px 0 var(--green-dark)}.btn-danger{border-color:var(--red);box-shadow:0 3px 0 var(--red);background:#f3d2c8}.btn-sm{border-radius:10px;padding:6px 10px;font-size:14px}.icon-btn{border:2px solid var(--wood-dark);background:var(--paper);width:40px;height:40px;box-shadow:0 2px 0 var(--wood-dark);color:var(--ink);border-radius:12px;place-items:center;text-decoration:none;display:inline-grid}.link{color:var(--green-dark);background:0 0;border:none;padding:4px;font-weight:600;text-decoration:underline}.price{align-items:center;gap:2px;font-weight:800;display:inline-flex}.auth-page,.center-page{background:radial-gradient(at 50% 120%,#8fcb6b 0 38%,#0000 39%),linear-gradient(#bfe6f2,#a9d8e8);align-content:center;place-items:center;gap:12px;min-height:100%;padding:16px;display:grid}.auth-card{background:var(--paper);border:3px solid var(--wood);width:min(400px,100%);box-shadow:var(--shadow);border-radius:20px;gap:14px;padding:24px;display:grid}.brand{text-align:center;justify-items:center;gap:4px;display:grid}.brand h1{color:var(--green-dark);font-size:30px}.brand p{color:var(--ink-soft);margin:0}.brand-mark{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3e%3cpath%20d='M32%2014%20L60%2030%20L32%2046%20L4%2030%20Z'%20fill='%2388c464'%20stroke='%235f9a44'%20stroke-width='2'/%3e%3cpath%20d='M4%2030%20L32%2046%20L32%2054%20L4%2038%20Z'%20fill='%23a4703f'/%3e%3cpath%20d='M32%2046%20L60%2030%20L60%2038%20L32%2054%20Z'%20fill='%2387582f'/%3e%3cpath%20d='M22%2026%20L36%2034%20L44%2030%20L30%2022%20Z'%20fill='%239a6640'/%3e%3cpath%20d='M33%2030%20Q35%2016%2034%208'%20stroke='%23c9a23f'%20stroke-width='2.5'%20fill='none'/%3e%3cellipse%20cx='32'%20cy='11'%20rx='2.5'%20ry='3.5'%20fill='%23f0cc5a'/%3e%3cellipse%20cx='36'%20cy='15'%20rx='2.5'%20ry='3.5'%20fill='%23e2b847'/%3e%3c/svg%3e") 50%/contain no-repeat;width:72px;height:72px}.form{gap:12px;display:grid}.form label{gap:4px;font-size:14px;font-weight:700;display:grid}input[type=email],input[type=password],input[type=text],input:not([type]),input[type=number]{font:inherit;border:2px solid var(--line);background:#fff;border-radius:10px;min-width:0;padding:10px 12px}input:focus{border-color:var(--green);outline:none}.form-error{color:#9d2b1b;margin:0;font-weight:600}.form-info{color:var(--green-dark);margin:0;font-weight:600}.tabs{background:var(--paper-2);border-radius:12px;gap:4px;padding:4px;display:flex}.tabs button{color:var(--ink-soft);background:0 0;border:none;border-radius:9px;flex:1;padding:8px;font-weight:700}.tabs button.active{color:var(--ink);background:#fff;box-shadow:0 1px 3px #00000026}.tabs.small button{padding:6px 4px;font-size:13px}.spinner{border:5px solid #fff9;border-top-color:var(--green);border-radius:50%;width:44px;height:44px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.game{position:fixed;inset:0}.game-canvas{touch-action:none;position:absolute;inset:0}.game-canvas canvas{display:block}.topbar{padding:max(10px, env(safe-area-inset-top)) 12px 10px;pointer-events:none;justify-content:space-between;align-items:center;gap:8px;display:flex;position:absolute;top:0;left:0;right:0}.topbar>*{pointer-events:auto}.topbar-left,.topbar-right{align-items:center;gap:8px;min-width:0;display:flex}.farm-name{background:var(--paper);border:2px solid var(--wood);box-shadow:var(--shadow);white-space:nowrap;text-overflow:ellipsis;border-radius:12px;max-width:36vw;padding:6px 14px;font-size:18px;overflow:hidden}.stats{align-items:center;gap:8px;display:flex}.stat{background:var(--paper);border:2px solid var(--wood);box-shadow:var(--shadow);border-radius:12px;align-items:center;gap:6px;min-height:40px;padding:4px 12px 4px 6px;font-weight:800;display:flex}.level-badge{place-items:center;display:inline-grid;position:relative}.level-badge b{color:#5a3d04;font-size:12px;font-weight:900;position:absolute;top:8px}.xp{gap:2px;display:grid}.xp small{color:var(--ink-soft);font-size:11px;font-weight:700}.xp-bar{background:#e6d7b8;border-radius:6px;width:110px;height:9px;display:block;overflow:hidden}.xp-bar span{background:linear-gradient(90deg,#7fc35a,#5d9e3f);height:100%;transition:width .4s;display:block}.sidebar{gap:8px;display:grid;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.nav-btn{border:2px solid var(--wood-dark);background:var(--paper);width:76px;box-shadow:0 3px 0 var(--wood-dark), var(--shadow);color:var(--wood-dark);border-radius:14px;justify-items:center;gap:2px;padding:8px 4px;font-size:12px;font-weight:800;display:grid;position:relative}.nav-btn.active{background:#ffe9a8}.badge{background:var(--red);color:#fff;border:2px solid #fff;border-radius:11px;place-items:center;min-width:22px;height:22px;padding:0 5px;font-size:12px;display:grid;position:absolute;top:-6px;right:-6px}.map-controls{gap:6px;display:grid;position:absolute;bottom:84px;right:12px}.bottombar{left:50%;bottom:max(12px, env(safe-area-inset-bottom));background:var(--paper);border:2px solid var(--wood);max-width:calc(100vw - 24px);box-shadow:var(--shadow);border-radius:16px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:8px 12px;display:flex;position:absolute;transform:translate(-50%)}.bottombar.placing{background:#fff3c4;font-weight:700}.bar-label{align-items:center;gap:4px;font-weight:800;display:inline-flex}.seed-chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:2px solid var(--line);background:#fff;border-radius:20px;align-items:center;gap:4px;padding:3px 10px 3px 4px;font-size:14px;font-weight:700;display:inline-flex}.chip.active{border-color:var(--green);background:#e6f5d9}.hover-info{color:var(--ink-soft);align-items:center;gap:4px;font-size:14px;font-weight:700;display:inline-flex}.panel{background:var(--paper);border:3px solid var(--wood);width:min(400px,100vw - 24px);box-shadow:var(--shadow);z-index:5;border-radius:18px;flex-direction:column;animation:.18s ease-out slide-in;display:flex;position:absolute;top:64px;bottom:12px;right:12px}@keyframes slide-in{0%{opacity:0;transform:translate(20px)}}.panel:focus{outline:none}.panel-head{border-bottom:2px solid var(--line);justify-content:space-between;align-items:center;padding:12px 14px;display:flex}.panel-head h2{color:var(--wood-dark);font-size:20px}.panel-body{align-content:start;gap:12px;padding:12px 14px 18px;display:grid;overflow-y:auto}.panel-body h3{color:var(--ink-soft);margin-top:4px;font-size:15px}.cards{gap:10px;margin:0;padding:0;list-style:none;display:grid}.card{border:2px solid var(--line);background:#fff;border-radius:12px;gap:10px;padding:10px;display:flex}.card.locked{opacity:.6}.card-info{flex:1;align-content:start;gap:4px;min-width:0;display:grid}.card-info small{color:var(--ink-soft)}.card-info .lock{color:var(--red);font-weight:700}.thumb{background:var(--paper-2);border-radius:10px;flex-shrink:0}.qty{color:var(--green-dark)}.buy-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;display:flex}.buy-row input[type=range]{min-width:90px;accent-color:var(--green);flex:1}.stepper{border:2px solid var(--line);border-radius:10px;display:inline-flex;overflow:hidden}.stepper button{background:var(--paper-2);border:none;width:30px;font-weight:800}.stepper input{text-align:center;-moz-appearance:textfield;width:52px;border:none!important;border-radius:0!important;padding:6px 2px!important}.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}.empty{color:var(--ink-soft);margin:0}.search{gap:8px;display:flex}.search input{flex:1}.list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.list li{border:2px solid var(--line);background:#fff;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;display:flex}.list li.unseen{border-color:var(--gold);background:#fff9e3}.list small{color:var(--ink-soft)}.who{min-width:0}.actions{align-items:center;gap:6px;display:flex}.switch{align-items:flex-start;gap:10px;font-weight:700;display:flex}.switch input{width:20px;height:20px;accent-color:var(--green);margin-top:1px}.hint{color:var(--ink-soft);margin:0;font-size:13px}.object-menu{background:var(--paper);border:2px solid var(--wood);box-shadow:var(--shadow);border-radius:14px;align-items:center;gap:8px;padding:8px 10px;display:flex;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}.tutorial{border:3px solid var(--gold);width:min(340px,100vw - 24px);box-shadow:var(--shadow);background:#fffdf4;border-radius:16px;gap:6px;padding:14px;display:grid;position:absolute;bottom:84px;left:104px}.tutorial h2{color:var(--green-dark);font-size:17px}.tutorial p{margin:0;line-height:1.4}.tutorial small{color:var(--ink-soft);font-weight:700}.tutorial-actions{justify-content:space-between;align-items:center;display:flex}.visit-banner{text-align:center;border:2px solid var(--gold);box-shadow:var(--shadow);background:#fff3c4;border-radius:14px;gap:2px;max-width:calc(100vw - 24px);padding:8px 14px;font-size:14px;display:grid;position:absolute;top:64px;left:50%;transform:translate(-50%)}.toasts{z-index:50;pointer-events:none;gap:6px;width:min(420px,100vw - 24px);display:grid;position:fixed;top:70px;left:50%;transform:translate(-50%)}.toast{background:var(--ink);color:#fff;box-shadow:var(--shadow);text-align:center;border-radius:12px;padding:10px 14px;font-weight:700;animation:.2s ease-out pop}.toast-success{background:var(--green-dark)}.toast-error{background:#9d2b1b}@keyframes pop{0%{opacity:0;transform:translateY(-6px)}}@media (max-width:760px){.farm-name{display:none}.topbar{padding-inline:8px}.xp-bar{width:64px}.sidebar{grid-auto-flow:row;top:auto;bottom:76px;left:8px;transform:none}.nav-btn{width:62px;font-size:11px}.panel{border-bottom:none;border-radius:18px 18px 0 0;width:100%;max-height:72vh;animation:.2s ease-out slide-up;inset:auto 0 0}@keyframes slide-up{0%{opacity:0;transform:translateY(30px)}}.tutorial{width:auto;inset:64px 12px auto}.visiting .visit-banner{top:60px}.map-controls{bottom:76px}.bottombar{bottom:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.tabs.wrap{flex-wrap:wrap}.tabs.wrap button{flex:30%}.filter-row{gap:6px;display:flex}.filter-row .chip{padding:4px 12px}.effects{color:var(--ink);margin:2px 0;padding-left:18px;font-size:13px}.effects li{margin:1px 0}.effects li.muted{color:var(--ink-soft);margin-left:-18px;font-style:italic;list-style:none}.effects.up li:not(.muted){color:var(--green-dark);font-weight:700}.building-head{align-items:center;gap:12px;display:flex}.building-head div{gap:2px;display:grid}.building-head small{color:var(--ink-soft)}.level-compare{grid-template-columns:1fr 1fr;gap:10px;display:grid}.level-compare>div{border:2px solid var(--line);background:#fff;border-radius:12px;padding:10px}.level-compare h3{margin-bottom:4px}.upgrade-box,.production,.meter-block{border:2px solid var(--line);background:#fff;border-radius:12px;gap:8px;padding:10px;display:grid}.costs{flex-wrap:wrap;align-items:center;gap:6px 14px;font-weight:700;display:flex}.costs span{align-items:center;gap:4px;display:inline-flex}.costs .lack{color:var(--red)}.actions-row{gap:8px;display:flex}.meter{background:#e6d7b8;border-radius:6px;height:10px;display:block;overflow:hidden}.meter span{background:linear-gradient(90deg,#7fc35a,#5d9e3f);height:100%;transition:width .4s;display:block}.meter.full span{background:linear-gradient(90deg,#e59a4a,#c4553b)}.meter.water span{background:linear-gradient(90deg,#8cc8f0,#3f86c2)}.storage-group{gap:6px;display:grid}.storage-head{justify-content:space-between;align-items:baseline;display:flex}.storage-head small{color:var(--ink-soft);font-weight:800}.stat.water{padding-right:10px}@media (max-width:760px){.level-compare{grid-template-columns:1fr}.stat.water{display:none}}