/* Adapted from Divided We Fall css/style.css (letterboxed 16:9 canvas, corner + touch buttons) */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body {
  display: flex; align-items: center; justify-content: center; font-family: sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#game { width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh; background: #111; display: block; outline: none; touch-action: none; }
@supports (height: 100dvh) { #game { max-height: 100dvh; max-width: 177.78dvh; } }
#legal { position: fixed; bottom: 2px; left: 6px; color: #777; font-size: 10px; pointer-events: none; }
body.touch #legal { display: none; }

.tbtn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: #fff;
  font-weight: bold; touch-action: none; cursor: pointer; }
.corner { position: fixed; top: max(8px, env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 22px;
  background: rgba(0,0,0,0.45); border: 2px solid rgba(255,255,255,0.35); font-size: 18px; z-index: 20; }
#btn-mute { right: max(8px, env(safe-area-inset-right)); font-size: 20px; }
#btn-mute.muted { opacity: 0.6; }
#btn-back { left: max(8px, env(safe-area-inset-left)); display: none; font-size: 14px; }
body.touch #btn-back { display: flex; }
body:not(.touch) #btn-mute { top: auto; bottom: 6px; width: 34px; height: 34px; font-size: 16px; opacity: 0.55; }

#touch-ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; display: none; }
.pad { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); pointer-events: none; }
#stick { left: max(18px, env(safe-area-inset-left)); width: 160px; height: 160px; border-radius: 80px; pointer-events: auto;
  background: rgba(0,0,0,0.3); border: 2px solid rgba(255,255,255,0.5); touch-action: none; }
#knob { position: absolute; left: 50px; top: 50px; width: 60px; height: 60px; border-radius: 30px; background: rgba(255,215,0,0.55);
  border: 2px solid #ffd700; pointer-events: none; }
#actions { right: max(14px, env(safe-area-inset-right)); width: 250px; height: 190px; }
.pad .tbtn { position: absolute; pointer-events: auto; background: rgba(0,0,0,0.38);
  border: 2px solid rgba(255,255,255,0.6); text-shadow: 0 1px 2px #000; }
.pad .tbtn.on { background: rgba(255,215,0,0.55); border-color: #ffd700; }
.act { width: 72px; height: 72px; border-radius: 36px; font-size: 13px; text-align: center; }
.act.slap { right: 0; bottom: 0; width: 100px; height: 100px; border-radius: 50px; font-size: 18px; background: rgba(200,40,30,0.6); }
.act.talk { right: 110px; bottom: 8px; background: rgba(30,90,200,0.6); }
.act.walk { right: 40px; bottom: 112px; background: rgba(90,90,90,0.6); font-size: 11px; }
.act.lock { right: 150px; bottom: 100px; width: 58px; height: 58px; border-radius: 29px; font-size: 11px; }
@media (max-height: 420px) {
  #stick { transform: scale(0.82); transform-origin: bottom left; }
  #actions { transform: scale(0.82); transform-origin: bottom right; }
}
#rotate { display: none; }
@media (orientation: portrait) {
  body.touch #rotate { display: flex; position: fixed; inset: 0; z-index: 30; align-items: center; justify-content: center;
    text-align: center; padding: 30px; background: rgba(0,0,0,0.86); color: #ffd700; font-size: 22px; font-weight: bold; }
}
html, body, #game, .tbtn { touch-action: none; }