html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  touch-action: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
}

#screen {
  /* fit() trong a2rt.js dat width/height = kich thuoc logic, transform = vi tri + phong to */
  position: fixed;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

/* a2rt.js (A2.safeInsets) doc vung an toan - lo camera / tai tho - qua padding cua the an nay */
.a2-safe {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.a2-message {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font: 18px sans-serif;
  text-align: center;
}

.a2-message[hidden] {
  display: none;
}

.a2-message button,
.a2-message a,
.a2-textbox button {
  padding: 8px 20px;
  border: 0;
  border-radius: 6px;
  background: #f0b400;
  color: #000;
  font: 16px sans-serif;
  text-decoration: none;
}

/* ?netdebug=1: ly do WebSocket dong, cham de an */
.a2-nettoast {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 8px;
  right: 8px;
  z-index: 30;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(120, 0, 0, 0.85);
  color: #fff;
  font: 12px/1.35 monospace;
  word-break: break-word;
}

.a2-textbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.a2-textbox-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(90vw, 360px);
  padding: 16px;
  border-radius: 8px;
  background: #1e2a3a;
  color: #fff;
  font: 16px sans-serif;
}

.a2-textbox input {
  padding: 8px;
  border: 1px solid #567;
  border-radius: 4px;
  font: 18px sans-serif;
}

.a2-textbox-hint {
  display: none;
  color: #9ab;
  font-size: 14px;
}

@media (pointer: coarse) {
  .a2-textbox-hint {
    display: block;
  }
}

.a2-textbox-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ===== tay cam ao (pad.js) ===== */
/* --u: canh 1 nut mui ten (px), pad.js tinh theo vung tay cam. */

.a2-pad {
  position: fixed;
  z-index: 5;
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
  font: bold calc(var(--u) * 0.32) sans-serif;
  /* Khong day nut (nut dinh vi tuyet doi): pad.js doc lai de biet le duoi an toan khi tinh co nut. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.a2-pad[hidden] {
  display: none;
}

.a2-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: calc(var(--u) * 0.22);
  background: rgba(255, 255, 255, 0.16);
}

.a2-btn.on {
  background: rgba(255, 255, 255, 0.45);
}

.a2-dpad {
  position: absolute;
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
}

.a2-dpad .a2-btn {
  width: var(--u);
  height: var(--u);
}

/* Mui ten ve bang border (ky tu ◀ ▶ thanh emoji tren mot so may Android) */
.a2-dpad .a2-btn::after {
  content: '';
  border: calc(var(--u) * 0.2) solid transparent;
}

.a2-dpad .a2-up {
  left: var(--u);
  top: 0;
}

.a2-dpad .a2-up::after {
  border-top-width: 0;
  border-bottom: calc(var(--u) * 0.28) solid #fff;
}

.a2-dpad .a2-down {
  left: var(--u);
  top: calc(var(--u) * 2);
}

.a2-dpad .a2-down::after {
  border-bottom-width: 0;
  border-top: calc(var(--u) * 0.28) solid #fff;
}

.a2-dpad .a2-left {
  left: 0;
  top: var(--u);
}

.a2-dpad .a2-left::after {
  border-left-width: 0;
  border-right: calc(var(--u) * 0.28) solid #fff;
}

.a2-dpad .a2-right {
  left: calc(var(--u) * 2);
  top: var(--u);
}

.a2-dpad .a2-right::after {
  border-right-width: 0;
  border-left: calc(var(--u) * 0.28) solid #fff;
}

.a2-fire {
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 2.2);
  border-color: #f0b400;
  border-radius: 50%;
  background: rgba(240, 180, 0, 0.5);
  color: #000;
}

.a2-fire.on {
  background: rgba(240, 180, 0, 0.9);
}

.a2-soft {
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 0.8);
  border-radius: calc(var(--u) * 0.4);
  font-size: calc(var(--u) * 0.3);
}

/* Man doc: bang nut trong vung 30% duoi. F1/F2 o 2 goc tren, ngay duoi nhan soft key game ve o day canvas.
   Hang duoi cach day 12px, hoac tren vung vuot ve Home (iPhone) neu vung do cao hon. */
.a2-pad.portrait {
  --bottom: max(12px, env(safe-area-inset-bottom, 0px));
  background: #10161f;
}

.a2-pad.portrait .a2-f1 {
  left: 12px;
  top: 8px;
}

.a2-pad.portrait .a2-f2 {
  right: 12px;
  top: 8px;
}

.a2-pad.portrait .a2-dpad {
  left: 16px;
  bottom: var(--bottom);
}

/* tam nut Ban ngang tam dpad */
.a2-pad.portrait .a2-fire {
  right: 24px;
  bottom: calc(var(--bottom) + var(--u) * 0.4);
}

/* Man ngang: nut de len canvas (chi trong tran); phan con lai cua lop cho cham xuyen xuong canvas (ngam).
   Nut Ban (cach day 40px) da cao hon vung vuot ve Home cua iPhone nam ngang (~21px). */
.a2-pad.landscape {
  --bottom: max(16px, env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.a2-pad.landscape .a2-btn {
  pointer-events: auto;
  opacity: 0.8;
}

/* Vung bam rong hon nut (pad.js keyAt, SLOP = 0.3u) va ca o giua/4 goc dpad: cham trat nut khong roi xuong canvas
   (thanh cham ngam, doi goc ban). */
.a2-pad.landscape .a2-dpad {
  pointer-events: auto;
}

.a2-pad.landscape .a2-dpad::before,
.a2-pad.landscape > .a2-btn::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -0.3);
}

.a2-pad.landscape .a2-fire::before {
  border-radius: 50%;
}

.a2-pad.landscape .a2-dpad {
  left: max(16px, env(safe-area-inset-left));
  bottom: var(--bottom);
}

.a2-pad.landscape .a2-f1 {
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(var(--u) * 3 + 8px + var(--bottom));
}

/* chua goc phai-duoi ~35px: nut bat/tat keypad cua game */
.a2-pad.landscape .a2-fire {
  right: max(16px, env(safe-area-inset-right));
  bottom: 40px;
}

.a2-pad.landscape .a2-f2 {
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--u) * 2.2 + 48px);
}

.a2-start-hint {
  max-width: 320px;
  color: #9ab;
  font-size: 14px;
}