/* DOZZIERVERSE: Realm of Ordo — layout & touch controls */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: #050508;
  overflow: hidden;
  font-family: 'Segoe UI', Verdana, sans-serif;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#wrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
#game {
  background: #000;
  /* keep 16:9, fit screen */
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  image-rendering: auto;
  box-shadow: 0 0 60px rgba(180, 30, 40, 0.25);
}
/* ---------- touch controls ---------- */
#touch.hidden { display: none; }
#touch {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
}
#t-left, #t-right {
  position: absolute; bottom: 5vh;
  display: flex; gap: 14px;
  pointer-events: auto;
}
#t-left { left: 4vw; }
#t-right { right: 4vw; align-items: flex-end; }
.tbtn {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  background: rgba(20,20,30,0.55);
  color: #fff; font-size: 17px; font-weight: bold;
  touch-action: none;
}
.tbtn.atk { width: 68px; height: 68px; font-size: 13px; }
.tbtn:active { background: rgba(200,40,50,0.6); }
.tpause {
  position: absolute; top: 2vh; right: 3vw;
  width: 52px; height: 52px; font-size: 14px;
  pointer-events: auto;
}