:root{--ink:#365044;--cream:#fff9e9}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Trebuchet MS",system-ui,sans-serif;color:var(--ink)}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:filter .12s,transform .12s}button:hover:not(:disabled){filter:brightness(1.05)}button:active:not(:disabled){transform:translateY(2px)}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,canvas:focus-visible{outline:3px solid #ffc949;outline-offset:4px}[hidden]{display:none!important}#game{position:relative;width:100%;height:100%;background:#a3ddec;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.hud{position:absolute;top:max(22px,env(safe-area-inset-top));left:25px;right:25px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.hud>*{pointer-events:auto}.hud-card{background:linear-gradient(#fffef7,#f5edce);border:3px solid #fff9e8;box-shadow:0 3px 0 #88966955,0 5px 15px #415e3620;border-radius:18px}.profile{display:flex;align-items:center;gap:12px;text-align:left;min-width:235px;padding:9px 20px 10px 9px}.profile strong{font-size:20px;color:#4b773c;display:block}.profile small{display:block;font-size:10px;color:#718262;margin-top:6px}.level-star{background:linear-gradient(#86d4ed,#348fc4);border:3px solid #dbf8ff;border-radius:17px;width:53px;height:55px;display:grid;place-items:center;font-size:29px;font-weight:900;color:white;text-shadow:0 2px #3980a0;box-shadow:0 2px 0 #2d7aab}.xp-track{height:7px;width:135px;background:#c8dbb5;border-radius:5px;display:block;margin-top:5px;overflow:hidden}.xp-track i{height:100%;background:#8ac342;display:block;width:0}.resources{display:flex;gap:13px;align-items:center}.currency{display:grid;grid-template-columns:43px auto;column-gap:9px;align-items:center;min-width:165px;padding:7px 18px 6px 9px}.gold-coin{grid-row:1/3;background:linear-gradient(#ffdf62,#efad2e);border:3px solid #ffeb9d;box-shadow:0 2px 0 #ca8d20;border-radius:50%;width:39px;height:39px;display:grid;place-items:center;color:#c38a20;font-size:22px}.currency strong{font-size:25px;line-height:1.1;color:#806030}.currency-label{font-size:8px;letter-spacing:1px;color:#a38e62}.materials{display:grid;grid-template-columns:30px auto;padding:7px 13px;column-gap:8px}.materials>span{grid-row:1/3;font-size:26px}.materials strong{font-size:19px}.materials small{font-size:8px}.round-button{width:42px;height:42px;border-radius:13px;border:3px solid #fff9e8;background:linear-gradient(#fffdfa,#efead4);box-shadow:0 3px 0 #7c996255,0 3px 12px #405b3020;font-size:25px;font-weight:800;color:#75915a}.town-label{position:absolute;top:121px;left:31px;font-size:11px;color:#456f55;background:#f9ffe6bc;padding:7px 11px;border-radius:20px}.sun{font-size:17px;color:#dba52b;margin-right:5px}#connection{color:#6daf3c;font-size:10px;margin-left:10px}.quick-actions{position:absolute;top:190px;left:25px;display:flex;flex-direction:column;gap:17px}.activity{position:relative;width:76px;border:0;padding:0;background:none;filter:drop-shadow(0 3px 2px #668a4230)}.activity>span{display:grid;place-items:center;margin:auto;width:64px;height:60px;font-size:36px;border-radius:17px;background:linear-gradient(#fffef5,#eee6c5);border:3px solid #fffef4;box-shadow:0 3px 0 #b2b58a}.activity strong{position:relative;display:block;background:#fff9e9;border:1px solid #e5d9b6;border-radius:8px;font-size:11px;padding:3px 4px;margin-top:-4px}.activity b{position:absolute;top:-7px;right:0;background:#f18c45;border:2px solid #fff5d8;color:#fff;border-radius:50%;min-width:23px;height:23px;display:grid;place-items:center;font-size:11px}.quest{position:absolute;bottom:132px;left:24px;width:290px;display:flex;gap:12px;padding:16px 21px 15px 13px;background:linear-gradient(#fffef2,#f6efd4);border:3px solid #fffbed;border-radius:18px;box-shadow:0 4px 0 #8a9d6155,0 5px 20px #68864420}.quest>span{font-size:39px;padding-top:7px}.quest small{font-size:8px;color:#b39660;letter-spacing:1px;font-weight:800}.quest strong{display:block;font-size:14px;color:#5c7544;margin-top:6px;line-height:1.2}.quest p{font-size:10px;line-height:1.5;color:#8b906e;margin:7px 0}.quest button:not(#close-quest){border:0;background:none;padding:0;font-size:10px;font-weight:bold;color:#5a983e}#close-quest{position:absolute;top:4px;right:7px;border:0;background:none;color:#aca385;font-size:19px}.map-controls{position:absolute;right:25px;bottom:144px;display:flex;flex-direction:column;gap:9px}.bottom-bar{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:25px;right:25px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;pointer-events:none}.bottom-bar>*{pointer-events:auto}.bottom-button,.build-button{display:flex;align-items:center;justify-content:center;gap:9px;border:3px solid #fff7df;border-radius:19px;padding:12px 20px;box-shadow:0 4px 0 #66833688,0 7px 18px #486f3325;background:linear-gradient(#fffbea,#ede6c8);min-height:65px}.bottom-button>span,.build-button>span{font-size:31px}.bottom-button strong,.build-button strong{font-size:14px}.bottom-button.active{background:linear-gradient(#f5ffe3,#d4eaa9)}.build-button{background:linear-gradient(#a5d853,#6faf36);color:#fff;text-shadow:0 2px #609338;min-width:173px;box-shadow:0 4px 0 #51862e,0 7px 18px #486f3340}.crop-dock{display:flex;gap:5px;padding:8px;background:linear-gradient(#fffbee,#ede4c7);border:3px solid #fffbed;border-radius:20px;box-shadow:0 4px 0 #8e9b6555,0 7px 18px #486f3325}.crop-choice{position:relative;border:2px solid transparent;border-radius:13px;background:#f5f1dc;min-width:79px;padding:5px 10px 6px;display:grid;justify-items:center;gap:2px}.crop-choice>span{font-size:28px}.crop-choice strong{font-size:10px;color:#6c7751}.crop-choice small{font-size:8px;color:#a29166}.crop-choice.selected{background:#e4f0b9;border-color:#8fba49}.crop-choice.locked:after{content:'🔒';position:absolute;top:3px;right:3px;font-size:11px}.version{position:absolute;bottom:5px;right:18px;font-size:8px;letter-spacing:1px;color:#3e715a99}.mode-tip{position:absolute;bottom:131px;left:50%;transform:translateX(-50%);background:#fffbedee;border:2px solid #fffdf0;border-radius:12px;padding:10px 18px;color:#687b46;font-size:12px;box-shadow:0 3px 9px #46653720;text-align:center;max-width:calc(100% - 140px);pointer-events:none}#loading{position:absolute;inset:0;background:linear-gradient(#bde9ee,#cbe59b);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;color:#4f7b40}#loading h1{font-size:42px;margin:12px;letter-spacing:-2px}#loading p{font-size:13px}.loading-emblem{font-size:90px}#toast{position:absolute;top:125px;left:50%;transform:translate(-50%,-12px);opacity:0;pointer-events:none;background:#fffbe8;border:3px solid #fffff0;border-radius:15px;padding:12px 20px;box-shadow:0 4px 0 #73935055,0 6px 25px #496c3333;font-size:13px;color:#53733b;transition:.18s;max-width:80%;text-align:center;z-index:15}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{padding:0;border:4px solid #fffbe8;background:#fff8e6;color:var(--ink);border-radius:24px;width:min(620px,calc(100% - 28px));max-height:82vh;box-shadow:0 8px 0 #50763744,0 20px 80px #2c512b55;overflow:hidden}dialog::backdrop{background:#24472f66;backdrop-filter:blur(3px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#8cc654,#64a840);padding:21px 24px;color:#fffde8;border-bottom:4px solid #568f35;text-shadow:0 2px #558d37}.panel-heading small{font-size:9px;letter-spacing:1.5px;color:#e0edc5}.panel-heading h2{font-size:27px;margin:5px 0 0;letter-spacing:-.7px}.panel-heading button{width:34px;height:34px;font-size:24px;background:#f8f1d4;color:#8b9b64;border:2px solid #fffbea;border-radius:11px;box-shadow:0 2px #47832e}#panel-body{padding:22px;max-height:calc(82vh - 110px);overflow-y:auto}.intro{color:#8a9070;font-size:12px;line-height:1.6;margin:0 0 17px}.card{background:#fffdf3;border:2px solid #ebdfbe;border-radius:15px;padding:16px;margin-bottom:12px}.card:last-child{margin-bottom:0}.card-row{display:flex;align-items:center;gap:13px}.card-icon{width:53px;height:53px;border-radius:13px;background:#f2e9cc;display:grid;place-items:center;font-size:34px;flex-shrink:0}.card h3{font-size:16px;margin:0 0 4px}.card small{font-size:10px;color:#959273}.grow{flex:1}.reward{font-size:12px;font-weight:bold;color:#b38930;text-align:right}.reward small{display:block;color:#72a13e;margin-top:4px}.ingredients{display:flex;gap:7px;margin:13px 0;flex-wrap:wrap}.ingredient{background:#f3efd8;border:1px solid #e8dfbe;border-radius:8px;padding:7px 10px;font-size:11px;display:flex;align-items:center;gap:5px}.ingredient.enough{background:#ecf3d9;color:#658c37}.ingredient.missing{color:#bd8353}.green-button{border:2px solid #94bc54;border-radius:10px;background:linear-gradient(#9ace50,#70ab38);color:#fffde9;text-shadow:0 1px #679139;box-shadow:0 3px 0 #649331;padding:10px 15px;font-size:12px;font-weight:bold;min-width:105px}.wide{width:100%}.card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.catalog{display:grid;grid-template-columns:1fr 1fr;gap:12px}.catalog .card{margin:0}.catalog .card-icon{width:62px;height:62px;margin-bottom:12px;font-size:40px}.catalog p{font-size:11px;color:#949173;min-height:25px;margin:6px 0 15px}.catalog button{width:100%}.queue{display:flex;gap:8px;margin:14px 0}.queue-slot{flex:1;border:2px dashed #dedbbd;border-radius:10px;min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#f6f1dd;color:#b3ad8b;font-size:11px}.queue-slot.filled{border-style:solid;background:#f4edcf}.queue-slot.ready{border-color:#a4c565;background:#e8f1cf}.queue-slot span{font-size:24px}.queue-slot small{font-size:9px}.split-actions{display:flex;gap:10px}.split-actions button{flex:1}.empty{text-align:center;padding:20px;color:#8a9377;font-size:13px}.train-art{font-size:76px;text-align:center;margin:5px 0 15px}.status-banner{background:#edf1d5;border:1px solid #dfe6bd;border-radius:10px;padding:12px;margin-bottom:15px;font-size:12px;color:#768d4f}.help-list{padding-left:19px;font-size:13px;line-height:1.7}.help-list li{padding:5px 0}.note{font-size:10px;color:#9b997e;line-height:1.6;margin-top:18px}.barn-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid #eee3c6;padding:12px 0}.barn-row>span{font-size:31px;width:40px;text-align:center}.barn-row strong{display:block;font-size:13px}.barn-row small{font-size:10px;color:#aaa07e}.barn-row b{font-size:19px;color:#729342;margin-right:10px}.barn-row button{min-width:87px;padding:8px 10px;font-size:10px}
@media(max-height:760px) and (min-width:801px){.quick-actions{top:155px;gap:12px}.activity>span{width:54px;height:47px;font-size:29px}.activity{width:65px}.quest{bottom:122px;padding:10px 20px 10px 10px;width:255px}.quest p{display:none}}
@media(max-width:800px){.hud{left:12px;right:12px;top:12px}.profile{min-width:172px;padding:6px 10px 7px 6px;gap:8px;border-radius:14px}.profile strong{font-size:16px}.level-star{width:40px;height:45px;font-size:23px;border-radius:12px}.xp-track{width:102px;height:6px}.profile small{font-size:8px}.resources{gap:7px}.currency{min-width:115px;grid-template-columns:30px auto;padding:6px 10px 6px 6px;column-gap:6px;border-radius:14px}.gold-coin{width:29px;height:29px;font-size:16px;border-width:2px}.currency strong{font-size:21px}.currency-label{font-size:6px}.materials{display:none}.round-button{width:34px;height:34px;border-radius:11px;font-size:21px}.town-label{top:98px;left:15px;font-size:9px;padding:5px 9px}.quick-actions{left:12px;top:152px;gap:16px}.activity{width:59px}.activity>span{width:51px;height:48px;font-size:28px;border-radius:13px}.activity strong{font-size:9px}.activity b{width:19px;min-width:19px;height:19px;font-size:9px}.quest{bottom:137px;left:12px;width:228px;padding:10px;gap:8px}.quest>span{font-size:29px}.quest small{font-size:6px}.quest strong{font-size:11px;margin-top:4px}.quest p{font-size:9px;margin:5px 0}.quest button:not(#close-quest){font-size:9px}.bottom-bar{left:12px;right:12px;bottom:24px;gap:8px}.bottom-button{padding:8px;min-height:60px;flex-direction:column;gap:0;border-radius:14px}.bottom-button span{font-size:23px}.bottom-button strong{font-size:8px}.build-button{min-width:80px;padding:8px 12px;flex-direction:column;gap:0;min-height:67px;border-radius:14px}.build-button span{font-size:28px}.build-button strong{font-size:10px}.crop-dock{padding:5px;gap:2px;border-radius:14px}.crop-choice{min-width:49px;padding:4px 5px}.crop-choice>span{font-size:24px}.crop-choice strong{font-size:8px}.crop-choice small{font-size:7px}.map-controls{right:12px;bottom:132px;gap:8px}.mode-tip{font-size:10px;padding:8px 11px;bottom:110px;max-width:calc(100% - 60px);width:max-content}#toast{top:102px;font-size:11px;padding:10px 14px;width:max-content}.version{font-size:7px}.panel-heading{padding:15px 18px}.panel-heading h2{font-size:23px}#panel-body{padding:15px}.catalog{gap:9px}.catalog .card{padding:12px}.catalog h3{font-size:13px}.catalog .card-icon{width:48px;height:48px;font-size:33px}.green-button{font-size:11px;padding:9px 11px;min-width:90px}.reward{font-size:10px}.card h3{font-size:14px}.card-icon{width:43px;height:43px;font-size:27px}.ingredients{gap:5px}.ingredient{padding:6px 8px;font-size:10px}}
@media(max-width:430px){.profile{min-width:157px}.profile strong{font-size:14px}.xp-track{width:90px}.currency{min-width:100px}.currency strong{font-size:19px}.resources{gap:6px}.hud .round-button{width:30px;height:32px}.bottom-button{display:none}.bottom-bar{gap:6px}.crop-dock{flex:1;justify-content:space-around}.build-button{min-width:74px;padding:7px}.crop-choice{min-width:44px;padding:3px}.quest{width:211px;bottom:121px}.quest p{display:none}.quest strong{font-size:11px;margin-bottom:6px}.mode-tip{bottom:100px}.card{padding:12px}.panel-heading h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){button,#toast{transition:none}}