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;
}
/* 16:9 canvas (960x540 internal), scaled to fit the screen and letterboxed, aspect ratio kept */
#game {
  width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh;
  image-rendering: auto; 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: #999; font-size: 10px; pointer-events: none; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
body.touch #legal { display: none; }

/* ---- corner buttons: back (touch only) and mute (everyone) ---- */
.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: 22px; 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; }
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; }
body:not(.touch) #btn-mute:hover { opacity: 1; }

/* ---- fight controls (touch only, shown during a fight) ---- */
#touch-ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; display: none; }
body.touch.in-fight #touch-ui { display: block; }
.pad { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); pointer-events: none; }
#dpad { left: max(14px, env(safe-area-inset-left)); width: 186px; height: 186px; }
#actions { right: max(14px, env(safe-area-inset-right)); width: 230px; height: 186px; }
.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; }
.dir { width: 62px; height: 62px; border-radius: 12px; flex-direction: column; font-size: 22px; }
.dir .lbl { font-size: 10px; font-weight: normal; opacity: 0.85; margin-top: 1px; }
.dir.up { left: 62px; top: 0; }
.dir.left { left: 0; top: 62px; }
.dir.right { left: 124px; top: 62px; }
.dir.down { left: 62px; top: 124px; }
.act { width: 78px; height: 78px; border-radius: 39px; font-size: 15px; }
.act.punch { right: 0; bottom: 0; width: 90px; height: 90px; border-radius: 45px; background: rgba(200,40,30,0.55); }
.act.grab { right: 100px; bottom: 6px; background: rgba(30,90,200,0.55); }
.act.special { right: 40px; bottom: 104px; background: rgba(180,140,0,0.6); }

/* small phones in landscape */
@media (max-height: 420px) {
  #dpad { transform: scale(0.82); transform-origin: bottom left; }
  #actions { transform: scale(0.82); transform-origin: bottom right; }
}

/* ---- rotate hint (touch devices held in portrait) ---- */
#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; }
}