*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#050711;touch-action:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.game-container{display:flex;flex-direction:column;width:100%;height:100%}
#gameCanvas{flex:1;width:100%;display:block;background:#050711}
.control-panel{
  height:154px;padding:10px 18px calc(10px + env(safe-area-inset-bottom));
  display:none;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(20,38,67,.97),rgba(5,11,24,.99));
  border-top:2px solid rgba(215,169,75,.72);
  box-shadow:0 -12px 35px rgba(0,0,0,.5) inset,0 -2px 14px rgba(31,133,220,.2)
}
#joystick-area{width:124px;height:124px;position:relative}
#joystick-base{
  width:100%;height:100%;border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 50%,rgba(26,119,190,.24) 0 42%,rgba(5,14,30,.86) 44% 59%,rgba(39,76,111,.95) 61% 70%,rgba(9,18,34,.98) 72%),repeating-conic-gradient(from 22.5deg,#d0a44e 0 2deg,#193755 2deg 43deg,#4caee4 43deg 45deg);
  border:2px solid #c89b48;box-shadow:0 0 22px rgba(47,174,255,.3),inset 0 0 22px rgba(0,0,0,.7),inset 0 0 0 5px rgba(57,136,191,.18)
}
#joystick-base:before,#joystick-base:after{content:"";position:absolute;pointer-events:none}
#joystick-base:before{inset:10px;border-radius:50%;border:1px solid rgba(106,205,255,.35);box-shadow:inset 0 0 15px rgba(50,170,255,.22)}
#joystick-base:after{left:58px;top:8px;width:7px;height:7px;border:1px solid #e1bd67;transform:rotate(45deg);box-shadow:0 101px 0 -1px #2d88bd}
#joystick-thumb{
  position:absolute;left:32px;top:32px;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 37% 28%,#e9fbff,#4bd0ff 23%,#147dcc 58%,#092d63 82%);
  border:2px solid #e2bd68;box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 20px rgba(47,188,255,.62),inset 0 0 12px rgba(255,255,255,.3)
}
.actions{display:flex;align-items:center;gap:14px}
#jump-btn,#fire-btn{
  width:98px;height:98px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff4d0;font-family:Georgia,serif;font-weight:900;letter-spacing:1px;line-height:1;text-align:center;
  user-select:none;border:3px solid #cda34f;
  text-shadow:0 2px 3px #071020;box-shadow:0 7px 20px rgba(0,0,0,.48),inset 0 0 0 4px rgba(20,47,79,.75),inset 0 0 18px rgba(255,255,255,.1)
}
#jump-btn{background:radial-gradient(circle at 38% 30%,#72e5ff,#197fc8 46%,#0b3067 72%,#081b39)}
#fire-btn{background:radial-gradient(circle at 38% 30%,#ffb35e,#d94c22 46%,#651818 72%,#281017);opacity:.42;filter:saturate(.65)}
#fire-btn.active{opacity:1;filter:none;box-shadow:0 7px 20px rgba(0,0,0,.48),0 0 20px rgba(255,93,34,.5),inset 0 0 0 4px rgba(92,31,23,.72),inset 0 0 16px rgba(255,235,173,.18)}
#jump-btn:active,#fire-btn:active{transform:translateY(2px) scale(.97)}