:root{
  --ink:#0b0a12; --paper:#f4ecd8; --line:#3a3350; --accent:#f0b84a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--paper);overflow:hidden;
  font-family:"DotGothic16",monospace;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
body{background:
  radial-gradient(ellipse at 50% 30%,#1d1830 0%,transparent 60%),
  repeating-linear-gradient(45deg,#0d0c16 0 6px,#0b0a12 6px 12px)}
#stage{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}
#game{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;
  width:min(calc(100vw - 16px),calc((100vh - 60px) * 1.5));aspect-ratio:3/2;height:auto;
  box-shadow:0 0 0 2px #2a2440,0 10px 40px rgba(0,0,0,.6);border-radius:4px}
#help{font-size:13px;opacity:.55;letter-spacing:.05em}
#pad{display:none;width:min(100%,520px);justify-content:space-between;align-items:center;padding:4px 10px}
.dpad{position:relative;width:150px;height:150px}
.d{position:absolute;width:50px;height:50px;border:2px solid var(--line);background:#1a1628;color:var(--paper);font:16px "DotGothic16";border-radius:8px}
.d:active,.d.on{background:#3a3156}
.up{left:50px;top:0}.down{left:50px;bottom:0}.left{left:0;top:50px}.right{right:0;top:50px}
.ab{display:flex;gap:18px;align-items:center}
.btn{width:72px;height:72px;border-radius:50%;border:3px solid var(--line);background:#1a1628;color:var(--paper);font:22px "DotGothic16";display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.btn small{font-size:10px;opacity:.7;margin-top:4px}
.btn.mute{width:44px;height:44px;font-size:16px;align-self:flex-end}
.btn.a{background:#5a2a24;border-color:var(--accent);transform:translateY(-18px)}
.btn:active,.btn.on{filter:brightness(1.5)}
@media (pointer:coarse){
  #pad{display:flex}
  #help{display:none}
  #game{width:min(calc(100vw - 16px),calc((100vh - 240px) * 1.5))}
}
/* スマホを 横に したとき: 絵を 画面の 高さ いっぱいに、 十字キーは 左、 A・B は 右(10-15) */
@media (pointer:coarse) and (orientation:landscape){
  #stage{padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  #game{width:min(calc(100vw - 340px),calc((100vh - 12px) * 1.5))}
  #pad{position:fixed;inset:0;width:auto;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));pointer-events:none;align-items:flex-end;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  #pad .dpad,#pad .ab{pointer-events:auto}
  .ab{flex-direction:column-reverse;align-items:flex-end;gap:12px}
  .btn.a{transform:translateX(-6px)}
  .btn.mute{align-self:flex-end}
}