*{box-sizing:border-box}
:root{color-scheme:dark}
html,body{
  margin:0;
  min-height:100%;
  background:#030303;
  color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
body{
  min-height:100dvh;
  display:grid;
  place-items:center;
  overscroll-behavior:none;
  touch-action:none;
}
.shell{
  width:min(100%,980px);
  padding:10px 10px max(12px,env(safe-area-inset-bottom));
  text-align:center;
}
.game-wrap{
  position:relative;
  width:100%;
  margin:auto;
}
canvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:900/650;
  background:#000;
  image-rendering:pixelated;
  border:3px solid #FFD800;
  border-radius:10px;
  box-shadow:0 0 30px rgba(255,216,0,.28);
}
.help{
  margin:.6rem 0 0;
  font-size:12px;
  opacity:.72;
  line-height:1.4;
}
.mobile-controls{
  display:none;
  width:100%;
  margin-top:10px;
  gap:12px;
  align-items:stretch;
  justify-content:center;
  touch-action:none;
}
.slider-wrap{
  flex:1;
  min-width:0;
  border:2px solid #FFD800;
  border-radius:14px;
  padding:9px 12px 7px;
  background:rgba(255,255,255,.045);
}
.slider-wrap label{
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  opacity:.72;
  margin-bottom:4px;
}
#moveSlider{
  width:100%;
  height:32px;
  margin:0;
  background:transparent;
  accent-color:#FFD800;
  touch-action:none;
}
#moveSlider::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#FFD800 0 48.5%,#ffffff 48.5% 51.5%,#FFD800 51.5% 100%);
  border:1px solid rgba(255,255,255,.28);
}
#moveSlider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:34px;
  height:34px;
  border-radius:50%;
  margin-top:-14px;
  background:#f4f4f4;
  border:3px solid #FFD800;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
#moveSlider::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:#FFD800;
  border:1px solid rgba(255,255,255,.28);
}
#moveSlider::-moz-range-thumb{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#f4f4f4;
  border:3px solid #FFD800;
}
.slider-hints{
  display:flex;
  justify-content:space-between;
  padding:0 4px;
  margin-top:-2px;
  font-size:12px;
  opacity:.62;
}
.fire-btn{
  flex:0 0 112px;
  min-height:76px;
  border:2px solid #ff4f8a;
  border-radius:16px;
  background:rgba(255,79,138,.12);
  color:#fff;
  font:800 20px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.06em;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.fire-btn:active,
.fire-btn.pressed{
  transform:translateY(2px);
  background:rgba(255,79,138,.28);
}
@media (pointer:coarse),(max-width:800px){
  .shell{padding:6px 6px max(8px,env(safe-area-inset-bottom))}
  .mobile-controls{display:flex}
  .help{font-size:10px;margin:.35rem .4rem 0}
  canvas{border-width:2px;border-radius:7px}
}
@media (max-height:620px) and (orientation:landscape){
  .shell{width:min(96vw,900px)}
  .help{display:none}
  .mobile-controls{gap:10px;margin-top:6px}
  .fire-btn{min-width:88px;min-height:48px}
}
@media (max-width:480px){
  .mobile-controls{gap:8px;margin-top:7px}
  .slider-wrap{padding:7px 9px 5px}
  .fire-btn{flex-basis:92px;min-height:68px;font-size:18px}
}