*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Nunito,Arial,sans-serif;background:#fff0d6;color:#51351c}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffc657;outline-offset:2px}#app{height:100dvh;min-height:440px;display:flex;flex-direction:column}
#brandbar{height:57px;flex-shrink:0;background:#fffaf1;border-bottom:1px solid #eddbbe;display:flex;align-items:center;padding:0 22px;gap:22px;z-index:8;box-shadow:0 2px 12px #39240f13}
.brand{text-decoration:none;display:flex;gap:8px;align-items:center;color:#42291c;font:900 23px 'Baloo 2',sans-serif;letter-spacing:-1px}.brand>i{font:900 25px 'Baloo 2';height:36px;width:36px;border-radius:11px;background:linear-gradient(#ffb44d,#f0771c);color:white;display:grid;place-items:center;box-shadow:0 3px 0 #ba631e}.brand>b{font:900 9px Nunito;letter-spacing:1.2px;color:#bc742c;background:#ffe8c0;padding:5px 8px;border-radius:20px}#brandbar nav{display:flex;align-items:center;gap:24px;height:100%;margin-left:55px}#brandbar nav a{align-items:center;display:flex;height:100%;text-decoration:none;color:#8b735c;font-size:12px;font-weight:900;white-space:nowrap}#brandbar nav a.selected{color:#ed7a1c;border-bottom:3px solid #ef9c31}.header-side{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:11px;font-weight:900;color:#8d7155;white-space:nowrap}.online{height:8px;width:8px;background:#66c46d;border-radius:50%;box-shadow:0 0 0 3px #d6f2d9}.header-side button{font-size:20px;background:#fff3dc;border:1px solid #e6c99d;border-radius:10px;height:35px;width:37px;color:#946038;margin-left:12px}
#shell{min-height:0;display:flex;flex:1;flex-direction:column;padding:9px 11px 0}#stage{flex:1;min-height:0;overflow:hidden;position:relative;border:5px solid #fff9ee;border-radius:25px;background:#a2d58b;box-shadow:0 1px 0 #b98f5d,0 11px 35px #5d431a40}#canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:0}
.vignette{position:absolute;pointer-events:none;inset:0;background:linear-gradient(90deg,#20351536,transparent 22%,transparent 77%,#20351532),linear-gradient(0deg,#1a3b1a40,transparent 22%,transparent 80%,#14381f28)}
#hud{position:absolute;z-index:5;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;height:64px;max-width:calc(100% - 26px);padding:6px 8px;background:linear-gradient(165deg,#9e6638,#734021);border:2px solid #b9874b;box-shadow:0 5px 0 #593319b8,0 12px 25px #5431156b;border-radius:18px;color:#ffefcc;width:max-content}
.hud-title{display:flex;align-items:center;gap:8px;min-width:207px;padding-right:10px;border-right:1px solid #d7ae7a68}.hud-title img{width:49px;height:49px;object-fit:cover;object-position:center 13%;border-radius:13px;background:#f9deae}.hud-title span{display:flex;flex-direction:column}.hud-title small{font-size:8px;font-weight:1000;letter-spacing:1px;color:#ffcd94}.hud-title b{font:900 16px 'Baloo 2';white-space:nowrap;line-height:1.25}
.resource{display:flex;gap:7px;align-items:center;background:#4d2a16a3;border-radius:11px;padding:7px 11px;min-width:94px;font-size:22px;line-height:1}.resource span{font-size:9px;color:#f6ca90;font-weight:1000}.resource strong{font:900 18px 'Baloo 2';display:block;color:#fff3e0;white-space:nowrap;line-height:1.1}#hud>button{font-size:20px;display:grid;place-items:center;flex-shrink:0;height:39px;width:37px;border:1px solid #ce9664;border-radius:11px;background:linear-gradient(#c68c51,#8d552c);color:#fff}
.panel-col{position:absolute;z-index:3;top:94px;width:245px;display:flex;flex-direction:column;gap:12px}#left{left:14px}#right{right:14px;width:255px}
.panel{background:#fffaf2ee;backdrop-filter:blur(14px);border:3px solid #efc489;border-radius:19px;padding:12px;box-shadow:0 5px 0 #af763bb0,0 13px 24px #5331154d}
.panel>header{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:21px}.panel>header>strong{font:800 21px 'Baloo 2';white-space:nowrap;line-height:1}.panel>header small{margin-left:auto;font-size:8px;letter-spacing:.4px;color:#bc874c;font-weight:1000;white-space:nowrap}
.quest{background:#fffcf4;border:1px solid #f0dcc0;display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:8px;border-radius:12px;font-size:26px;box-shadow:0 1px 0 #ead8b7}.quest span{font-size:12px;font-weight:1000;flex:1;min-width:0}.quest span small{display:block;font-size:9px;color:#a77b54;margin-top:3px}.track{width:100%;height:8px;border-radius:20px;background:#ead7bf;overflow:hidden;margin-top:6px}.track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffc451,#f58625);border-radius:20px;transition:width .35s}.reward{margin:8px 0 0;text-align:center;border-radius:10px;color:#976030;font-size:10px;font-weight:900;background:#ffefd6;padding:9px 4px}.tips p{font-size:11px;color:#917454;line-height:1.65;margin:0}.tips>header{margin-bottom:6px}
.worker{display:flex;align-items:center;gap:7px;background:#fffef7;border:1px solid #f2ddbe;padding:7px 6px;border-radius:13px;margin:8px 0;min-height:64px}.workerpic{flex-shrink:0;width:43px;height:48px;background:#ffe0af;border-radius:10px;display:grid;place-items:center;font-size:27px}.worker span{flex:1;min-width:0}.worker span>b{display:block;font-size:11px;white-space:nowrap}.worker small{display:block;font-size:9px;color:#866b51;line-height:1.4}.worker em{font-style:normal;font-weight:1000;font-size:9px;color:#459b57;display:block;margin-top:2px}.worker button{background:linear-gradient(#ffc454,#f18424);color:white;border:1px solid #d2752a;border-radius:9px;font-size:9px;font-weight:1000;padding:8px 4px;white-space:nowrap;box-shadow:0 3px 0 #ba722d}.worker button:disabled{opacity:.55;filter:grayscale(.4)}.panel-note{text-align:center;font-size:10px;color:#9e805d;font-weight:800;margin:8px 0 0}
.damrow{display:flex;gap:9px;align-items:center}.damrow>span{width:54px;height:54px;flex-shrink:0;display:grid;place-items:center;font-size:30px;background:#ffe7b7;border-radius:11px}.damrow b{display:block;font-size:12px}.damrow small{font-size:10px;color:#a47b5a;line-height:1.4;display:block}.track.big{height:11px;margin:12px 0}.statrow{display:flex;justify-content:space-between;align-items:center;gap:3px;color:#866345;font-size:10px;font-weight:900;margin-bottom:9px}.statrow span{white-space:nowrap}.orange-btn{background:linear-gradient(#ffbd50,#f07d21);color:#fff;border:1px solid #b95c1f;box-shadow:0 4px 0 #b5682e;border-radius:12px;width:100%;padding:10px;font-size:12px;font-weight:1000;text-shadow:0 1px 1px #be6526}.orange-btn:active,.worker button:active{transform:translateY(3px);box-shadow:none}kbd{font:800 10px Nunito;padding:1px 5px;border-radius:4px;background:#ffe0a7;border:1px solid #ffd186;color:#92592e}
#toolbar{position:absolute;left:50%;transform:translateX(-50%);bottom:15px;z-index:4;border:2px solid #a77038;border-radius:18px;display:flex;gap:7px;padding:7px;background:linear-gradient(#ffdfaa,#d49b62);box-shadow:0 5px 0 #885328b7,0 8px 24px #55331465}
#toolbar button{min-width:115px;border:2px solid #cd9d65;background:linear-gradient(#fffdf2,#f0d3ad);border-radius:12px;color:#6d4527;display:flex;flex-direction:column;align-items:center;font:900 12px 'Baloo 2';padding:5px 9px 4px;line-height:1.2;box-shadow:0 3px 0 #ac7340}
#toolbar button.active{background:linear-gradient(#ffd068,#f39627);border-color:#bf6e27}#toolbar button>span{font-size:25px}#toolbar button small{font:900 9px Nunito;color:#ad754c}
#toast{position:absolute;z-index:4;bottom:111px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:#fffaf1ee;border:2px solid #e5b47d;border-radius:17px;box-shadow:0 5px 0 #a87547b6,0 11px 22px #51341d6a;padding:3px 10px 3px 3px;max-width:calc(100% - 22px);transition:opacity .3s}#toast.hidden{opacity:0;pointer-events:none}#toast img{width:44px;height:44px;background:#ffd8a2;border-radius:12px;object-fit:cover;object-position:top}#toast div{min-width:0}#toast b{display:block;font:800 14px 'Baloo 2';white-space:nowrap}#toast small{display:block;font-size:10px;color:#84684e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#toast>button{border:0;background:none;color:#9a7c58;font-size:18px}
#shell footer{flex:0 0 22px;display:flex;justify-content:space-between;align-items:center;color:#ab8767;font-size:9px;letter-spacing:.3px;font-weight:900;padding:0 12px}#shell footer>span:first-child{color:#698c5a}
.overlay{position:fixed;z-index:30;inset:0;background:#2b1a0ec9;display:grid;place-items:center;padding:10px}.overlay.hidden{display:none}.dialog{border-radius:26px;border:4px solid #f6bb74;max-width:470px;width:100%;padding:20px 32px 28px;text-align:center;background:linear-gradient(#fffdf8,#ffeed3);position:relative;box-shadow:0 20px 50px #0008}.dialog img{width:120px;height:125px;object-fit:contain}.dialog h1{font:900 28px 'Baloo 2';color:#82471e;line-height:1.05;margin:2px 0 9px}.dialog p{color:#8c6d51;font-size:12px;line-height:1.65}.dialog .keys{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:16px 0 20px}.dialog .keys>span{background:#fff8ea;border:1px solid #eed8b7;border-radius:10px;padding:9px 4px;font-size:10px;font-weight:900;color:#86613d}.dialog .orange-btn{font-size:17px}.cross{position:absolute;right:13px;top:7px;background:transparent;border:0;font-size:27px;color:#ba8758}
#mobile-pad{display:none;pointer-events:none;z-index:4;position:absolute;bottom:85px;left:9px;right:9px;justify-content:space-between;align-items:end}#mobile-pad button{pointer-events:auto;user-select:none;touch-action:none;background:#ffe5adbc;color:#8b5627;border:2px solid #e2a55f;border-radius:12px;min-width:40px;height:42px;font-weight:1000;backdrop-filter:blur(6px)}.dpad>button{display:block;margin:auto}.dpad>div{display:flex;gap:3px}.mobile-actions{display:flex;gap:5px}.mobile-actions button{height:56px!important;min-width:63px!important;background:#ffc16bcd!important;font-size:11px}
@media(max-width:1230px){#brandbar nav{margin-left:8px}#hud .hud-title{min-width:175px}.hud-title b{font-size:13px}.resource{min-width:79px;padding:6px;font-size:20px}.resource strong{font-size:15px}.panel-col{width:209px}#right{width:224px}.panel{padding:9px}.panel>header>strong{font-size:17px}.quest{padding:6px}.tips{display:none}.workerpic{width:32px}.worker{gap:4px}}@media(max-width:960px){#brandbar nav{display:none}#hud .secondary{display:none}#hud{height:56px}.panel-col{top:79px}#left{left:9px}#right{right:9px}}
@media(max-width:730px){#brandbar{height:49px;padding:0 12px}.brand{font-size:18px}.brand>i{width:30px;height:30px;font-size:22px}.brand>b{display:none}.header-side{font-size:0}.header-side .online{display:none}.header-side button{margin:0;font-size:20px}#shell{padding:4px 5px 0}#stage{border-radius:14px;border-width:3px}#hud{height:50px;top:5px;gap:3px;padding:3px 4px;border-radius:12px}.hud-title{padding-right:2px!important;min-width:0!important}.hud-title img{height:36px;width:36px;border-radius:9px}.hud-title small{display:none}.hud-title b{font-size:11px}.resource{font-size:15px;min-width:57px;padding:4px 3px;gap:2px}.resource span{font-size:7px}.resource strong{font-size:12px}#hud>button{height:30px;width:28px;font-size:16px}.panel-col{top:64px;width:155px;gap:5px}#left{left:5px}#right{right:5px;width:159px}.panel{padding:6px;border-radius:13px;border-width:2px}.panel>header{gap:4px;font-size:15px;margin-bottom:6px}.panel>header>strong{font-size:14px}.panel>header small{font-size:7px}.quest{font-size:18px;gap:5px;min-height:37px;padding:3px;margin-bottom:4px;border-radius:8px}.quest span{font-size:9px}.quest span small{font-size:8px}.track{height:5px;margin-top:2px}.reward{font-size:8px;padding:4px}.worker{min-height:45px;margin:4px 0;padding:3px}.workerpic{height:28px;width:27px;font-size:17px}.worker span b{font-size:9px}.worker small{display:none}.worker em{font-size:7px}.worker button{font-size:7px;padding:5px 2px}.panel-note{font-size:8px}.damrow>span{height:30px;width:30px;font-size:18px}.damrow b{font-size:10px}.damrow small{display:none}.statrow{font-size:8px}.orange-btn{padding:6px;font-size:10px}#toolbar{bottom:5px;gap:2px;padding:3px;border-radius:10px}#toolbar button{min-width:61px;border-width:1px;border-radius:8px;font-size:9px;padding:3px 1px}#toolbar button span{font-size:19px}#toolbar button small{font-size:7px}#toast{bottom:149px;max-width:90%}#toast img{height:31px;width:31px}#toast b{font-size:10px}#toast small{font-size:9px}#mobile-pad{display:flex}#shell footer{font-size:8px;flex:0 0 20px}#shell footer>span:last-child{display:none}}
@media(max-width:430px){#hud .hud-title b{font-size:10px}.resource{min-width:50px}.panel-col{width:127px!important}.quest{font-size:0}.quest span{font-size:9px}.panel>header>strong{font-size:13px}.panel>header small{display:none}.workerpic{display:none}.worker span b{font-size:8px}.worker button{font-size:7px}.damrow>span{display:none}.orange-btn kbd{display:none}.reward{display:none}#toolbar button{min-width:56px}.mobile-actions button{min-width:55px!important}}


/* v3 game cycle HUD, upgrade shop, warning surfaces */
#day-pill{position:absolute;z-index:4;top:84px;left:50%;transform:translateX(-50%);width:227px;max-width:calc(100% - 530px);background:#fff9e9eb;border:2px solid #e6bd84;border-radius:13px;padding:7px 10px;text-align:center;box-shadow:0 4px 0 #9e6c38a1,0 9px 15px #56402733;color:#795034;backdrop-filter:blur(7px)}
#day-pill>b{font:900 15px 'Baloo 2';display:block;line-height:1.1}#day-pill>span{font-size:10px;font-weight:900;display:block;color:#946e50}
.daytrack{height:7px;border-radius:8px;background:#e6d2b9;overflow:hidden;margin:6px 0}.daytrack>i{height:100%;width:0;display:block;background:linear-gradient(90deg,#71c3b6,#52a2e4);border-radius:8px;transition:width .3s}#day-skip{padding:5px 12px;background:linear-gradient(#ffe3a2,#ffd087);color:#835022;border:1px solid #dfa864;border-radius:8px;font-size:10px;font-weight:1000}#day-skip:disabled{opacity:.55;cursor:not-allowed}
#open-shop{display:block;margin-top:9px;background:linear-gradient(#f9e8c5,#e9c397);border-color:#c59a70;color:#75441f;box-shadow:0 3px 0 #ba8651;text-shadow:none;font-size:11px}
.mission-cycle-note{font-size:9px;font-weight:900;text-align:center;margin:9px 0 0;color:#996a43}
.health-alert{font-size:9px;font-weight:900;text-align:center;color:#668c58;line-height:1.4;margin:10px 0 1px}.health-alert[data-urgent=yes]{color:#c34328;animation:healthwarn 1.5s ease-in-out infinite alternate}@keyframes healthwarn{from{opacity:1}to{opacity:.6}}
.upgrade-dialog{max-width:510px;max-height:92dvh;overflow:auto}.upgrade-dialog>h1{font-size:25px;margin-top:8px}.upgrade-dialog>p{font-size:11px;margin:9px 0}.upgrade-item{display:flex;align-items:center;gap:11px;text-align:left;padding:9px 8px;margin:7px 0;border-radius:12px;background:#fffaf0;border:1px solid #edd9b6}.upgrade-icon{font-size:25px;display:grid;place-items:center;flex-shrink:0;background:#ffebc5;border-radius:10px;width:43px;height:43px}.upgrade-copy{flex:1;min-width:0}.upgrade-copy strong{font:800 14px 'Baloo 2';display:block;color:#76512e}.upgrade-copy small{font-size:10px;display:block;color:#94765c}.upgrade-copy i{font-size:9px;font-style:normal;font-weight:900;color:#75a454}.upgrade-item>button{border-radius:9px;border:1px solid #d28a48;box-shadow:0 2px 0 #a47043;font-weight:1000;color:#754c1f;background:linear-gradient(#ffe3a5,#ffd08b);padding:9px 7px;white-space:nowrap;font-size:11px}.upgrade-item>button:disabled{opacity:.5;box-shadow:none}.upgrade-dialog .shop-hint{background:#ffe9bd;border-radius:11px;padding:9px;font-weight:900;color:#a26a36}.upgrade-dialog #reset-run{border:0;background:transparent;text-decoration:underline;color:#a38b77;font-size:10px;margin-top:8px}
@media(max-width:970px){#day-pill{max-width:calc(100% - 470px);top:68px;width:160px;padding:5px}#day-pill>b{font-size:12px}#day-pill>span{font-size:9px}}
@media(max-width:730px){#day-pill{top:65px;max-width:none;width:101px;padding:4px 4px;border-radius:9px;border-width:1px}#day-pill>b{font-size:10px}#day-pill>span{font-size:8px}.daytrack{margin:3px 0;height:4px}#day-skip{padding:3px 4px;font-size:8px}#open-shop{font-size:8px;padding:5px;margin-top:5px}.mission-cycle-note{font-size:7px;margin-top:4px}.health-alert{font-size:7px;margin:5px 0}.upgrade-dialog{padding:15px 10px 18px}.upgrade-dialog>h1{font-size:20px}.upgrade-item{gap:6px;padding:7px 5px}.upgrade-icon{width:34px;height:35px;font-size:19px}.upgrade-copy strong{font-size:11px}.upgrade-copy small{font-size:9px}.upgrade-item>button{padding:7px 5px;font-size:9px}}