@font-face{font-family:Lilita;src:url(fonts/LilitaOne-Regular.ttf) format("truetype");font-display:block}
:root{--ink:#3b2314;--wood:#9a6233;--wood2:#7a4723;--cream:#fbecc9;--cream2:#ecd29e;--gold:#ffc93c;--gold2:#e08a12;--green:#7ccf3f;--green2:#3f9a24;--teal:#2bb3a3;--teal2:#16766d;--red:#ef5a3c}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#24140a;font-family:Lilita,"Trebuchet MS",sans-serif;color:#fff;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
#letterbox{position:fixed;inset:-40px;background:url(assets/bg_smithy.jpg) center/cover;filter:blur(18px) brightness(.45)}
#stage{position:absolute;left:0;top:0;width:907px;height:510px;transform-origin:0 0;overflow:hidden;background:url(assets/bg_smithy.jpg) 0 0/907px 510px}
.hide{display:none!important}
img{-webkit-user-drag:none;user-drag:none}
.t{color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);letter-spacing:.5px}
/* scene */
#scene{position:absolute;inset:0}
#calm{position:absolute;inset:0;-webkit-backdrop-filter:blur(3px) brightness(.68) saturate(.8);backdrop-filter:blur(3px) brightness(.68) saturate(.8);-webkit-mask-image:radial-gradient(ellipse 330px 300px at 421px 250px,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 330px 300px at 421px 250px,#000 55%,transparent 100%)}
#vign{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 55%,rgba(0,0,0,0) 50%,rgba(30,12,0,.45) 100%)}
.cust{position:absolute;left:672px;top:58px;height:222px;filter:drop-shadow(0 4px 0 rgba(40,20,5,.35));transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .35s}
.cust.away{transform:translateX(260px);opacity:0}
.cust.happy{animation:happy .5s ease-out 2}
@keyframes happy{30%{transform:translateY(-14px) scale(1.03)}60%{transform:translateY(0) scale(.98,1.02)}}
#counter{position:absolute;left:627px;top:254px;width:280px;height:256px;background:url(assets/bg_smithy.jpg) -627px -254px/907px 510px}
.panel{position:absolute;background:linear-gradient(#b0763f,var(--wood) 40%,var(--wood2));border:3px solid var(--ink);border-radius:18px;box-shadow:inset 0 3px 0 rgba(255,220,160,.45),inset 0 -4px 0 rgba(0,0,0,.25),0 5px 0 rgba(40,20,5,.55)}
.paper{background:linear-gradient(var(--cream),var(--cream2));border:3px solid var(--ink);border-radius:14px;box-shadow:inset 0 -4px 0 rgba(150,100,40,.25),0 4px 0 rgba(40,20,5,.45);color:var(--ink)}
#boardFrame{box-shadow:inset 0 3px 0 rgba(255,220,160,.45),inset 0 -4px 0 rgba(0,0,0,.25),0 6px 0 rgba(40,20,5,.6),0 0 0 6px rgba(30,12,0,.18),0 10px 40px 10px rgba(20,8,0,.45)}
#order{position:absolute;left:640px;top:296px;width:256px;height:120px;padding:8px 12px;transition:transform .2s}
#order:before{content:"";position:absolute;left:118px;top:-17px;border:14px solid transparent;border-bottom:14px solid var(--ink);border-top:0}
#order:after{content:"";position:absolute;left:121px;top:-11px;border:11px solid transparent;border-bottom:11px solid var(--cream);border-top:0}
#order.hot{transform:scale(1.05);box-shadow:0 0 0 4px #fff6a8,0 0 22px 6px rgba(255,220,80,.9)}
#order.bump{animation:bump .3s}
@keyframes bump{50%{transform:scale(1.08)}}
.ohead{font-size:16px;color:var(--wood2);letter-spacing:1px}
#oItems{display:flex;gap:10px;margin-top:3px}
.oi{position:relative;width:64px;height:64px;border-radius:12px;background:#fff6dd;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -3px 0 rgba(150,100,40,.25)}
.oi img.it{width:88%;height:88%}
.oi .n{position:absolute;right:-9px;bottom:-9px;font-size:20px}
.oi.done{background:#dff5c8}.oi.done img.it{opacity:.45}
.oi .ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;color:#5bc236;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
#oReward{position:absolute;right:10px;top:34px;display:flex;flex-direction:column;align-items:center;font-size:20px}
#oReward img{width:40px}
#cv{position:absolute;left:0;top:0;width:907px;height:510px;touch-action:none}
/* HUD */
#hud{position:absolute;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
#lvl{left:10px;top:10px;width:212px;height:68px;padding:6px 12px;pointer-events:none}
#lvlTxt{font-size:22px}
.bar{position:relative;margin-top:4px;height:24px;border-radius:12px;background:#3f2615;border:3px solid var(--ink)}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:9px;background:linear-gradient(#a6ea5e,var(--green2));box-shadow:inset 0 2px 0 rgba(255,255,255,.5);transition:width .4s}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;-webkit-text-stroke:4px var(--ink)}
.pill{position:absolute;height:38px;border-radius:19px;background:linear-gradient(#5a3a22,#3f2615);border:3px solid var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 3px 0 rgba(0,0,0,.4);display:flex;align-items:center;font-size:21px}
.pill img{position:absolute;left:-8px;top:-8px;width:48px}
#coins{left:688px;top:12px;width:148px;padding-left:46px;pointer-events:none}
#coins.bump img{animation:bump .25s}
.btn{position:absolute;display:flex;align-items:center;justify-content:center;gap:6px;border:3px solid var(--ink);border-radius:16px;font-family:inherit;font-size:24px;cursor:pointer;color:#fff;transition:transform .08s}
.btn:active{transform:translateY(3px)}
.btn.green{background:linear-gradient(#a6ea5e,var(--green) 50%,var(--green2));box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(0,60,0,.3),0 5px 0 var(--ink)}
.btn.gold{background:linear-gradient(#ffe387,var(--gold) 50%,var(--gold2));box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -5px 0 rgba(120,50,0,.3),0 5px 0 var(--ink)}
.btn.teal{background:linear-gradient(#6fe3d4,var(--teal) 50%,var(--teal2));box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -5px 0 rgba(0,40,40,.3),0 5px 0 var(--ink)}
.btn.round{border-radius:50%}
.btn.off{filter:grayscale(.7) brightness(.85)}
.btn.armed{box-shadow:0 0 0 4px #fff6a8,0 0 20px 8px rgba(255,220,80,.95);animation:pulse .7s infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}
.btn img{pointer-events:none}
#gear{left:848px;top:9px;width:48px;height:48px}#gear img{width:32px}
#moves{left:12px;top:96px;width:104px;height:94px;text-align:center;padding-top:6px;pointer-events:none}
#moves .lbl{font-size:18px}#moves .big{font-size:44px;line-height:1.1}
#moves.low .big{color:#ffb39e}
.boost{width:66px;height:66px;left:30px}
.boost img{width:42px}
#bHammer{top:212px}#bAuto{top:292px}#bPlus{top:372px}
.plus{font-size:26px}
.badge{position:absolute;right:-8px;bottom:-8px;min-width:28px;height:28px;border-radius:14px;background:var(--red);border:3px solid var(--ink);font-size:16px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.badge.price{background:#5a3a22;min-width:44px}
.newtag{position:absolute;left:-10px;top:-12px;background:var(--red);border:3px solid var(--ink);border-radius:10px;padding:0 5px;font-size:16px;transform:rotate(-12deg)}
#supply{height:56px;width:150px;font-size:26px}
#supply img{width:58px;margin-left:-14px;margin-top:-10px}
#hand{position:absolute;left:0;top:0;width:58px;pointer-events:none;opacity:0;filter:drop-shadow(0 4px 0 rgba(40,20,5,.4));z-index:20;transform-origin:10% 5%}
#toast{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:22px;background:rgba(40,20,5,.82);padding:6px 16px;border-radius:14px;border:3px solid var(--ink);opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;z-index:30;-webkit-text-stroke:0;text-shadow:0 2px 0 var(--ink)}
#toast.on{opacity:1}
/* screens */
.screen{position:absolute;inset:0;z-index:10}
.shade{position:absolute;inset:0;background:rgba(25,10,0,.6)}
.ribbon{position:absolute;left:-22px;right:-22px;top:-16px;height:64px;border:3px solid var(--ink);border-radius:14px;background:linear-gradient(#ffe387,var(--gold) 50%,var(--gold2));box-shadow:inset 0 3px 0 rgba(255,255,255,.6),0 5px 0 rgba(40,20,5,.55);display:flex;align-items:center;justify-content:center;font-size:34px}
.ribbon.red{background:linear-gradient(#ff9c7c,var(--red) 55%,#b8321a)}
.pop{left:263px;top:40px;width:380px;height:430px;animation:popIn .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes popIn{from{transform:scale(.6);opacity:0}}
.stars{position:absolute;top:56px;left:0;right:0;display:flex;justify-content:center;align-items:flex-end;gap:2px;height:104px}
.stars img{width:74px;filter:drop-shadow(0 4px 0 rgba(40,20,5,.45));transform:scale(0)}
.stars img:nth-child(2){width:100px;margin-bottom:14px}
.stars img.on{animation:starIn .4s cubic-bezier(.3,1.6,.5,1) forwards}
.stars img.dim{transform:scale(1);filter:grayscale(1) brightness(.45) drop-shadow(0 4px 0 rgba(40,20,5,.45))}
@keyframes starIn{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1)}}
.inner{position:absolute;left:24px;right:24px;top:160px;height:150px;padding:10px 16px}
.row{display:flex;align-items:center;justify-content:space-between;font-size:22px;margin:4px 0;height:38px}
.row img{width:34px;vertical-align:middle;margin-right:6px}
.btnRow{position:absolute;left:20px;right:20px;top:328px;height:70px}
.btnRow .btn{height:62px;font-size:26px}
.endCust{position:absolute;left:8px;top:150px;height:250px;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent);filter:drop-shadow(0 4px 0 rgba(40,20,5,.35))}
#mapBg{position:absolute;inset:0;background:url(assets/bg_map.jpg) 0 0/907px 510px}
.mapTitle{left:300px;right:auto;width:307px;top:10px;height:56px;font-size:30px}
#mapPath{position:absolute;left:0;top:0;pointer-events:none}
.node{position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;font-size:28px}
.node.cur{animation:pulse .7s infinite alternate}
.node.locked{background:linear-gradient(#b9aa98,#8d7e6c);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 5px 0 var(--ink);cursor:default}
.node.locked img{width:34px}
.node.boss{width:76px;height:76px;margin:-38px 0 0 -38px}
.nstars{position:absolute;left:50%;top:44px;transform:translateX(-50%);display:flex;gap:0}
.node.boss .nstars{top:58px}
.nstars img{width:22px}
.nstars img.dim{filter:grayscale(1) brightness(.5)}
#mapPlay{left:333px;top:432px;width:220px;height:58px}
#mapPlayTxt{font-size:28px}
.mapCoins{left:688px;top:12px;width:148px;padding-left:46px}
#mapGear{left:848px;top:9px;width:48px;height:48px}#mapGear img{width:32px}
.set{left:283px;top:40px;width:340px;height:440px}
.set .btn{left:40px;width:260px;height:58px;font-size:24px}
.set .btn img{width:36px}
#sSound{top:66px}#sMusic{top:134px}#sRestart{top:202px}#sMap{top:270px}#sClose{top:350px}

#scene.ending #cust,#scene.ending #order,#scene.ending #counter{visibility:hidden}

#oRush{position:absolute;left:-14px;top:-18px;height:40px;padding:0 10px 0 4px;display:flex;align-items:center;border:3px solid var(--ink);border-radius:20px;background:linear-gradient(#ffe387,var(--gold2));box-shadow:0 3px 0 rgba(40,20,5,.5);font-size:22px;z-index:2}
#oRush img{width:30px;margin-right:2px}
#oRush.low{background:linear-gradient(#ff9a7a,#e0452c);color:#fff;animation:pulse .5s infinite alternate}
#supplyN{position:absolute;right:8px;top:-12px;font-size:20px;color:#fff6a8}
#mapPrev,#mapNext{top:12px;width:52px;height:52px;font-size:26px}
#mapPrev{left:236px}#mapNext{left:619px}
#mapNext.off{filter:grayscale(.8) brightness(.8)}
.node .bossFace{width:70px;height:70px;object-fit:cover;object-position:top;border-radius:50%;filter:grayscale(.6) brightness(.8)}

.quake{animation:quake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes quake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}