*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#07150f;
  font-family:"Trebuchet MS",Verdana,sans-serif;color:#fff;touch-action:none;overscroll-behavior:none}
#wrap{position:fixed;inset:0}
#game{display:block;width:100%;height:100%;image-rendering:auto}

/* ---------- loader ---------- */
#loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0d3326,#134634 60%,#0a2119);z-index:50;transition:opacity .5s}
#loader.gone{opacity:0;pointer-events:none}
.ltitle{font-size:clamp(18px,4vw,34px);font-weight:900;letter-spacing:2px;color:#ffe066;
  text-shadow:0 3px 0 #2d5d22,0 6px 16px rgba(0,0,0,.6)}
.lbar{margin-top:22px;width:min(320px,70vw);height:14px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.lbar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#9ae66e,#ffe066);transition:width .2s}
.lsub{margin-top:12px;font-size:13px;opacity:.75}

/* ---------- schermate ---------- */
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:30;
  background:radial-gradient(circle at 50% 40%,rgba(6,40,28,.62),rgba(3,18,12,.9))}
.screen.show{display:flex;animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{width:min(560px,90vw);padding:30px 26px;text-align:center;border-radius:26px;
  background:linear-gradient(170deg,rgba(23,86,60,.96),rgba(11,48,33,.97));
  border:4px solid #7bc96f;box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.18)}
.panel.over{border-color:#e06a6a;background:linear-gradient(170deg,rgba(96,34,34,.96),rgba(45,16,16,.97))}
.panel.win{border-color:#ffd93b;background:linear-gradient(170deg,rgba(30,96,60,.97),rgba(14,58,38,.98))}
.panel.promo{padding:18px;border-color:#ff9d2e;background:linear-gradient(170deg,rgba(40,20,4,.97),rgba(20,10,2,.98));
  max-height:92vh;display:flex;flex-direction:column;align-items:center}
.promoImg{display:block;width:100%;max-width:420px;height:auto;max-height:62vh;object-fit:contain;
  border-radius:16px;margin:0 auto 18px;box-shadow:0 10px 26px rgba(0,0,0,.5)}
h1{font-size:clamp(26px,6.4vw,50px);line-height:1;font-weight:900;color:#ffe066;letter-spacing:2px;
  text-shadow:0 4px 0 #2d5d22,0 8px 18px rgba(0,0,0,.6)}
h1 span{display:block;font-size:.52em;color:#b9f6a0;letter-spacing:5px;margin-top:8px}
h2{font-size:clamp(22px,5.4vw,40px);font-weight:900;color:#ffe066;letter-spacing:2px;
  text-shadow:0 3px 0 #2d5d22,0 6px 14px rgba(0,0,0,.5)}
.panel.over h2{color:#ffd6d6;text-shadow:0 3px 0 #7a2222}
.tag{margin:12px 0 20px;font-size:clamp(14px,3.2vw,20px);color:#e9ffe2}
.burger{font-size:64px;margin-top:6px;animation:pop 1.1s ease-in-out infinite}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.score{margin:6px 0 18px;font-size:16px;color:#cfeec2}
.score b{color:#ffe066;font-size:22px}
.btn{display:block;width:100%;margin:10px auto;padding:14px 18px;font:900 20px/1 "Trebuchet MS",sans-serif;
  letter-spacing:1px;color:#123;cursor:pointer;border:none;border-radius:16px;
  background:linear-gradient(180deg,#ffe066,#f0a93c);box-shadow:0 6px 0 #a4661d,0 10px 18px rgba(0,0,0,.4);
  transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #a4661d}
.btn.big{font-size:24px;padding:16px}
.btn.ghost{background:linear-gradient(180deg,#5fbf72,#2f8a4e);color:#fff;box-shadow:0 6px 0 #1d5c34}
.btn.ghost:active{box-shadow:0 2px 0 #1d5c34}
.help{margin-top:16px;font-size:13px;line-height:1.6;color:#bfe8bc;opacity:.9}

/* ---------- controlli touch ---------- */
#touch{position:absolute;left:0;right:0;bottom:0;padding:0 14px calc(28px + env(safe-area-inset-bottom));display:flex;
  justify-content:space-between;align-items:flex-end;z-index:20;pointer-events:none}
#touch.hide{display:none}
.tleft,.tright{display:flex;gap:14px;pointer-events:none}
.tbtn{width:clamp(66px,15vw,92px);height:clamp(66px,15vw,92px);pointer-events:auto;cursor:pointer;
  opacity:.9;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));transition:transform .07s,opacity .07s;user-select:none}
.tbtn:active{transform:scale(.9);opacity:1}
.tbtn img{width:100%;height:100%;display:block;pointer-events:none}
#btnPause{position:absolute;top:0;right:0;width:76px;height:76px;z-index:21;cursor:pointer}
@media (max-height:420px){.panel{padding:18px}.help{display:none}.btn{padding:11px}}


/* ---------- credit ---------- */
#credit{position:absolute;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom));text-align:center;
  z-index:15;font-size:11px;line-height:1;letter-spacing:1px;color:#fff;opacity:.6;
  text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none;user-select:none;white-space:nowrap}
@media (max-height:420px){
  #credit{font-size:9px;bottom:calc(3px + env(safe-area-inset-bottom))}
  #touch{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}