:root { color-scheme: dark; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;background:#02060c;
  font-family:"Yu Gothic","Meiryo",system-ui,sans-serif;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
body{
  display:flex;align-items:center;justify-content:center;
  padding:max(env(safe-area-inset-top),0px) max(env(safe-area-inset-right),0px)
          max(env(safe-area-inset-bottom),0px) max(env(safe-area-inset-left),0px);
}
#gameWrap{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100vw;height:100vh;
}
#game{
  display:block;
  width:min(100vw,177.777vh);
  height:min(56.25vw,100vh);
  max-width:100vw;max-height:100vh;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#07111f;
  box-shadow:0 0 0 2px #243c5b;
  touch-action:none;
}
#hint{
  position:fixed;left:max(8px,env(safe-area-inset-left));bottom:max(5px,env(safe-area-inset-bottom));
  color:#a9bfd3;font-size:10px;pointer-events:none;text-shadow:2px 2px #000;z-index:20;
}
#version{
  position:fixed;right:max(8px,env(safe-area-inset-right));top:max(5px,env(safe-area-inset-top));z-index:50;
  padding:4px 7px;background:#e33b2f;color:#fff;
  font:bold 10px monospace;border:1px solid #fff;text-shadow:1px 1px #000;
}
.touchBtn{
  position:absolute;z-index:40;border:2px solid rgba(255,255,255,.82);
  background:rgba(6,20,38,.68);color:#fff;font-weight:900;
  text-shadow:2px 2px #000;box-shadow:0 3px 0 rgba(0,0,0,.45);
  touch-action:none;
}
.smallBtn{
  width:46px;height:46px;border-radius:12px;font-size:22px;top:12px;
}
#backBtn{left:12px}
#pauseBtn{right:12px}
.jumpBtn{
  right:14px;bottom:16px;width:92px;height:56px;border-radius:28px;
  font-size:18px;background:rgba(20,86,160,.62);
}
#rotateNotice{
  display:none;position:fixed;inset:0;z-index:9999;background:#02060c;
  align-items:center;justify-content:center;text-align:center;padding:24px;
}
.rotateCard{
  display:flex;flex-direction:column;gap:12px;align-items:center;
  color:#fff;border:2px solid #6da6d7;background:#071525;padding:25px 28px;border-radius:16px;
}
.rotateCard strong{font-size:20px}
.rotateCard span{font-size:13px;color:#bcd0e1}
.phoneIcon{font-size:44px;color:#ffe36b}

@media (orientation:portrait) and (max-width:900px){
  #rotateNotice{display:flex}
}
@media (pointer:fine){
  .touchBtn{display:none}
}
@media (max-height:430px){
  #hint{display:none}
  #version{font-size:8px;padding:3px 5px}
  .smallBtn{width:40px;height:40px;font-size:18px}
  .jumpBtn{width:82px;height:50px;font-size:16px}
}