html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#163622;font-family:Arial,Helvetica,sans-serif;touch-action:none;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none}body{position:fixed;inset:0}canvas{display:block;position:fixed;inset:0;width:100%;height:100%;background:#92d8ff;touch-action:none}
#overlay{position:fixed;inset:0;pointer-events:none;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.55);font-weight:700}
#gameTitle{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:6;font-size:26px;font-weight:900;letter-spacing:.5px;color:#fff7c2;text-shadow:0 3px 7px rgba(0,0,0,.75);pointer-events:none;white-space:nowrap}#topbar{display:flex;gap:7px;flex-wrap:wrap;padding:48px 9px 9px;background:linear-gradient(rgba(0,0,0,.46),rgba(0,0,0,0))}.pill{background:rgba(44,65,41,.88);border:2px solid rgba(255,255,255,.22);border-radius:18px;padding:5px 9px;min-width:82px;font-size:13px}.bar{height:7px;background:#263827;border-radius:8px;overflow:hidden;margin-top:4px}.fill{height:100%;width:100%}#foodFill{background:#ffba49}#waterFill{background:#55c8ff}#healthFill{background:#ff6b6b}#winterFill{background:#ffe56b}
#message{position:fixed;left:50%;top:18%;transform:translate(-50%,-50%);font-size:24px;text-align:center;opacity:0;transition:opacity .18s;background:rgba(45,60,36,.88);border-radius:16px;padding:10px 16px;max-width:80vw}
#combo{position:fixed;left:50%;top:29%;transform:translateX(-50%);font-size:28px;color:#fff3a1;opacity:0;transition:opacity .12s}#help{position:fixed;left:12px;bottom:12px;background:rgba(0,0,0,.52);border-radius:13px;padding:9px 12px;font-size:12px;line-height:1.42}#stageBanner{position:fixed;right:12px;bottom:12px;background:rgba(0,0,0,.5);border-radius:13px;padding:9px 12px;font-size:12px;text-align:right}
.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(13,31,23,.84);pointer-events:auto}.panel{width:min(720px,90vw);max-height:84vh;overflow:auto;background:#fff8dc;color:#3d3928;text-shadow:none;padding:24px;border-radius:24px;border:6px solid #8d6338;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.35)}button{border:none;border-radius:14px;background:#78b650;color:#fff;font-size:17px;font-weight:700;padding:11px 18px;cursor:pointer;margin:5px}button:hover{filter:brightness(1.08)}button:disabled{opacity:.45;cursor:not-allowed}.small{font-size:13px;color:#695b3e;font-weight:600}.statgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.card{background:#f1e7bf;border:2px solid #c5a86c;border-radius:14px;padding:10px}.stars{font-size:34px;letter-spacing:4px}.upgradegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.upgradegrid button{width:100%;margin:4px 0;background:#8b6bd0}.upgradegrid .card{display:flex;flex-direction:column;justify-content:space-between}.tag{display:inline-block;border-radius:999px;padding:3px 8px;background:#6f5132;color:white;font-size:12px;margin:2px}.objective{padding:5px 0}.done{color:#2f8d43}.miss{color:#9a4d3f}@media(max-width:700px){#gameTitle{font-size:18px;top:7px}.statgrid,.upgradegrid{grid-template-columns:1fr}.pill{font-size:11px;min-width:70px}#help{max-width:46vw}}

#touchControls{position:fixed;inset:0;pointer-events:none;z-index:5;touch-action:none}#joystick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:clamp(118px,14vmin,150px);height:clamp(118px,14vmin,150px);border-radius:50%;background:rgba(20,35,25,.42);border:3px solid rgba(255,255,255,.45);pointer-events:auto;touch-action:none;box-shadow:inset 0 0 24px rgba(0,0,0,.25)}#joyKnob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;border-radius:50%;background:rgba(255,255,255,.8);border:3px solid rgba(45,90,55,.85);box-shadow:0 4px 12px rgba(0,0,0,.3)}#actionWheel{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:clamp(174px,20vmin,210px);height:clamp(174px,20vmin,210px);pointer-events:none}.actionBtn{position:absolute;width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.05;background:rgba(66,105,66,.88);border:3px solid rgba(255,255,255,.7);box-shadow:0 4px 12px rgba(0,0,0,.35);pointer-events:auto;touch-action:none;user-select:none}.actionBtn b{display:block;font-size:23px;line-height:1}.actionBtn:active{transform:scale(.94)}#btnShoot{left:6px;top:calc(50% - 34px)}#btnJump{left:calc(50% - 34px);top:6px}#btnDash{right:6px;top:calc(50% - 34px)}#btnEat{left:calc(50% - 34px);bottom:6px}#ammoHud{position:absolute;right:90px;bottom:232px;background:rgba(0,0,0,.55);padding:7px 10px;border-radius:12px;font-size:12px}#powerHud{position:fixed;left:50%;top:48px;transform:translateX(-50%);display:none;background:rgba(255,190,40,.9);color:#3e2b00;text-shadow:none;padding:7px 12px;border-radius:14px;font-size:13px}#bossHud{position:fixed;left:50%;top:78px;transform:translateX(-50%);width:min(420px,70vw);display:none;text-align:center;background:rgba(83,30,28,.82);padding:8px 12px;border-radius:14px}#bossBar{height:10px;background:#44201e;border-radius:8px;overflow:hidden;margin-top:5px}#bossFill{height:100%;background:#ff875f;width:100%}#pauseBtn{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:8;pointer-events:auto;background:rgba(40,55,45,.9);border:2px solid rgba(255,255,255,.5);padding:7px 11px;border-radius:12px;font-size:14px}#rankHud{position:fixed;left:50%;top:112px;transform:translateX(-50%);z-index:6;background:rgba(20,25,20,.72);padding:6px 12px;border-radius:12px;font-size:14px}#trialHud{position:fixed;left:12px;top:95px;z-index:6;background:rgba(55,38,18,.78);padding:7px 10px;border-radius:12px;font-size:12px;display:none}.difficultyBtn{min-width:120px}.modeRow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}@media(max-width:700px){#joystick{width:126px;height:126px;left:12px;bottom:14px}#joyKnob{width:52px;height:52px;margin:-26px}#actionWheel{width:184px;height:184px;right:8px;bottom:5px}.actionBtn{width:60px;height:60px}#btnShoot{left:5px;top:calc(50% - 30px)}#btnJump{left:calc(50% - 30px);top:5px}#btnDash{right:5px;top:calc(50% - 30px)}#btnEat{left:calc(50% - 30px);bottom:5px}#help{display:none}#ammoHud{right:64px;bottom:198px}}

#startScreen{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#08120d;pointer-events:auto;
}
#startScreen::before{
  content:"";position:absolute;inset:-24px;
  background-image:url("assets/ui/start-background.png");
  background-size:cover;background-position:center;
  filter:blur(18px) brightness(.42) saturate(1.15);
  transform:scale(1.06);
}
#startPoster{
  position:relative;z-index:2;width:100%;height:100%;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 0 28px rgba(0,0,0,.65));
}
#startShade{
  position:absolute;z-index:3;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.05) 45%,rgba(0,0,0,.7) 100%);
  pointer-events:none;
}
#playGameBtn{
  position:absolute;z-index:4;left:50%;bottom:7vh;transform:translateX(-50%);
  min-width:220px;padding:16px 34px;border-radius:999px;
  border:3px solid rgba(255,238,160,.95);
  background:linear-gradient(#f6b436,#b96b12);
  color:white;font-size:28px;font-weight:900;letter-spacing:2px;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 26px rgba(255,181,44,.38);
  cursor:pointer;pointer-events:auto;
}
#playGameBtn:hover{filter:brightness(1.12);transform:translateX(-50%) scale(1.04)}
#playGameBtn:active{transform:translateX(-50%) scale(.97)}
@media(max-width:700px){
  #playGameBtn{bottom:4.5vh;min-width:180px;font-size:22px;padding:13px 28px}
}


@media (max-height:520px) and (orientation:landscape){
  #gameTitle{font-size:16px;top:max(4px,env(safe-area-inset-top))}
  #topbar{padding-top:34px;gap:4px}
  .pill{font-size:10px;min-width:62px;padding:3px 6px}
  #joystick{width:112px;height:112px;left:max(10px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom))}
  #joyKnob{width:46px;height:46px;margin:-23px}
  #actionWheel{width:164px;height:164px;right:max(6px,env(safe-area-inset-right));bottom:max(3px,env(safe-area-inset-bottom))}
  .actionBtn{width:54px;height:54px;font-size:9px}
  .actionBtn b{font-size:19px}
  #btnShoot{left:4px;top:calc(50% - 27px)}#btnJump{left:calc(50% - 27px);top:4px}#btnDash{right:4px;top:calc(50% - 27px)}#btnEat{left:calc(50% - 27px);bottom:4px}
  #ammoHud{right:max(58px,env(safe-area-inset-right));bottom:174px;font-size:10px}
  #rankHud{top:82px;font-size:11px}
  #trialHud{top:72px;font-size:10px}
}
@media (min-width:701px) and (max-width:1180px){
  #joystick{width:138px;height:138px}
  #actionWheel{width:196px;height:196px}
}


/* Sprite Edition v2: polished title screen */
#startScreen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 72%,rgba(255,202,69,.20),transparent 26%),
    linear-gradient(180deg,rgba(4,10,8,.12),rgba(4,10,8,.04) 48%,rgba(4,10,8,.54));
}
#startBadge{
  position:absolute;left:50%;top:max(22px,env(safe-area-inset-top));transform:translateX(-50%);
  z-index:4;padding:8px 15px;border-radius:999px;
  background:rgba(38,20,9,.72);border:1px solid rgba(255,213,101,.72);
  color:#ffe6a1;font-weight:900;letter-spacing:2px;font-size:12px;
  text-shadow:0 2px 5px #000;box-shadow:0 5px 18px rgba(0,0,0,.25);
}
#startTagline{
  position:absolute;left:50%;bottom:max(132px,calc(env(safe-area-inset-bottom) + 132px));
  transform:translateX(-50%);z-index:4;color:#fff7d1;text-align:center;
  font-weight:800;font-size:clamp(13px,1.6vw,18px);letter-spacing:.5px;
  text-shadow:0 3px 8px rgba(0,0,0,.95);width:min(86vw,760px)
}
#playGameBtn{
  z-index:5;min-width:230px;min-height:68px;font-size:28px;
  background:linear-gradient(#9cd95b,#4d9f38);border:3px solid #f6df88;
  box-shadow:0 0 0 3px rgba(75,38,15,.82),0 12px 35px rgba(0,0,0,.42),0 0 26px rgba(255,207,75,.35);
  animation:playPulse 1.65s ease-in-out infinite;
}
@keyframes playPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.045)}}
#startSparkles{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.startSpark{position:absolute;width:9px;height:9px;border-radius:50%;background:#ffd95f;box-shadow:0 0 15px #fff1a6;
  animation:floatSpark var(--dur) ease-in-out infinite alternate;opacity:.8}
@keyframes floatSpark{from{transform:translate(0,10px) scale(.65);opacity:.25}to{transform:translate(var(--dx),-32px) scale(1.25);opacity:1}}


/* Instructions remain above the main menu through the dialog top layer. */
#menuInstructionsBtn{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:1.3vh;background:#284d35;border:2px solid #e8d897;font-size:16px;padding:8px 20px;white-space:nowrap}
#instructions{box-sizing:border-box;width:min(780px,94vw);max-height:90dvh;padding:0;border:4px solid #8d6338;border-radius:22px;background:#fff8dc;color:#3d3928;box-shadow:0 18px 60px #0008;overflow:hidden;font-weight:400}
#instructions::backdrop{background:rgba(8,22,14,.9)}
.instructionsHeader{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 18px;background:#e9ddb5}.instructionsHeader h1{margin:0;font-size:25px}.instructionsHeader button{font-size:14px;white-space:nowrap}
.instructionsTabs{display:flex;padding:6px 12px;gap:6px}.instructionsTabs button{flex:1;margin:0;background:#e8dfbc;color:#3d3928;font-size:15px}.instructionsTabs [aria-selected="true"]{background:#35683e;color:white}
.instructionsBody{overflow-y:auto;max-height:calc(90dvh - 150px);padding:4px 22px 20px;touch-action:pan-y;overscroll-behavior:contain;line-height:1.6}.instructionsBody h2{font-size:19px;margin:18px 0 7px}.instructionsBody p{margin:8px 0}.instructionsBody li{margin:7px 0}.instructionsBody ol{padding-left:24px}.guideTip{background:#efe2aa;border-radius:12px;padding:12px}
@media(max-width:700px){#playGameBtn{bottom:10vh}#menuInstructionsBtn{bottom:2vh}.instructionsHeader{padding:8px 12px}.instructionsHeader h1{font-size:22px}.instructionsBody{padding:4px 16px 16px;font-size:15px}}
#playGameBtn{bottom:max(78px,10vh)}
#startTagline{bottom:max(170px,calc(env(safe-area-inset-bottom) + 170px))}