.game-wrap{
  width:100%;
  position:relative;
  background:#000;
  border-radius:12px;
  overflow:hidden;
}
.safe-topbar{
  width:100%;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px 10px 16px;
  background:#000;
  border:3px solid #3030ff;
  border-bottom:1px solid #171733;
}
.safe-label{
  color:#ffd60a;
  font-size:14px;
  font-weight:900;
  letter-spacing:.12em;
}
.restart{
  width:108px;
  height:40px;
  border:2px solid #ffd60a;
  border-radius:9px;
  background:#080808;
  color:#ffd60a;
  font-weight:900;
  font-size:13px;
  letter-spacing:.06em;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.restart:active{
  background:#2b2500;
  transform:translateY(1px);
}








*{box-sizing:border-box}
:root{color-scheme:dark}
html,body{
  margin:0;min-height:100%;background:#020207;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:manipulation
}
button{font:inherit;user-select:none;-webkit-user-select:none}
.shell{
  width:min(100%,720px);
  padding:8px 8px max(10px,env(safe-area-inset-bottom));
  text-align:center
}



canvas{display:block;width:100%;height:auto;aspect-ratio:840/900;background:#000;border:3px solid #3030ff;border-top:0;border-radius:0 0 10px 10px;
  box-shadow:0 0 28px rgba(48,48,255,.22);
  image-rendering:pixelated;
  touch-action:none
}

.mobile-controls{
  display:none;
  width:100%;
  margin-top:8px;
  padding:8px 0 4px;
  justify-content:center;
  align-items:center;
  touch-action:none
}
.dpad{
  display:grid;
  grid-template-columns:76px 76px 76px;
  grid-template-rows:66px 66px 66px;
  gap:5px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none
}
.dir{
  min-width:0;
  min-height:0;
  border:2px solid #5555ff;
  background:#101023;
  color:#fff;
  border-radius:14px;
  font-weight:900;
  font-size:27px;
  -webkit-tap-highlight-color:transparent;
  touch-action:none
}
.up{grid-column:2;grid-row:1}
.left{grid-column:1;grid-row:2}
.dpad-center{
  grid-column:2;grid-row:2;
  border-radius:14px;
  background:#090914;
  border:2px solid #25254e
}
.right{grid-column:3;grid-row:2}
.down{grid-column:2;grid-row:3}
.dir:active,.dir.pressed{
  transform:scale(.97);
  border-color:#ffd60a;
  background:#26263d;
  color:#ffd60a
}
.help{font-size:12px;opacity:.72;margin:.5rem .25rem 0;line-height:1.4}

@media (pointer:coarse),(max-width:800px){
  .mobile-controls{display:flex}
  .shell{padding:5px 5px max(7px,env(safe-area-inset-bottom))}
  .help{font-size:10px}
}
@media (max-width:430px){
  .dpad{
    grid-template-columns:68px 68px 68px;
    grid-template-rows:58px 58px 58px;
    gap:4px
  }
  .dir{font-size:24px;border-radius:12px}
}
@media (max-height:700px) and (orientation:landscape){
  body{place-items:start center}
  .shell{width:min(96vw,640px)}
  .mobile-controls{margin-top:4px;padding-top:4px}
  .help{display:none}
}