@font-face {
  font-family: 'PixelVN';
  src: url('../assets/fonts/VT323-Regular.ttf') format('truetype');
  font-display: block;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0b1a2a;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Canh giữa canvas bằng CSS, và CHỈ bằng CSS: autoCenter của Phaser đã tắt trong js/main.js
   (nó ghi margin tính từ canvasBounds lúc boot còn 0×0 rồi không tính lại với mode NONE).
   Viền còn lại mang màu nền trang. */
#game {
  width: 100%;
  height: 100%;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

.font-preload {
  position: absolute;
  left: -9999px;
  top: -9999px;
  font-family: 'PixelVN';
  opacity: 0;
}

/* Lớp báo không tải được game (js/boot-guard.js). z-index trên cả lớp "xoay ngang" */
#boot-error {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #0b1a2a;
  color: #ffffff;
  font-family: 'PixelVN', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#boot-error[hidden] { display: none; }

/* Màu theo ui/Skin.js → THEME (xanh đêm 0x243049→0x131a2a, vàng #d8b471, chữ kem #ece5d8) — doc/26-ui-skin.md */
.boot-error-box {
  max-width: 560px;
  border: 2px solid #d8b471;
  border-radius: 8px;
  background: linear-gradient(180deg, #243049, #131a2a);
  color: #ece5d8;
  padding: 20px 24px;
  line-height: 1.6;
}

.boot-error-box h2 { margin: 0 0 12px; color: #f2d7a0; font-size: 26px; }
.boot-error-box p { margin: 8px 0; font-size: 17px; }

.boot-error-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.boot-error-buttons button {
  font-family: inherit;
  font-size: 17px;
  padding: 8px 16px;
  color: #3a260c;
  background: linear-gradient(180deg, #ffe7ad 0%, #f0cf7e 50%, #c99a45 51%, #d9ae5c 100%);
  border: 2px solid #6b4a1c;
  border-radius: 9px;
  cursor: pointer;
}

.boot-error-buttons button:hover { background: #fff7e8; }

/* Dải báo lỗi làm đứng game (js/core/CrashGuard.js): HTML vì canvas có thể đã đứng / mất WebGL. Dải nổi phía trên, không phủ
   kín; chỉ hộp nhận chuột. Màu theo ui/Skin.js → THEME như .boot-error-box, viền đỏ nhạt để khác hộp thoại thường. */
#crash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 8px;
  pointer-events: none;
  font-family: 'PixelVN', monospace;
}

#crash[hidden] { display: none; }

.crash-box {
  pointer-events: auto;
  max-width: min(560px, 100%);
  border: 2px solid #d8b471;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(36, 48, 73, 0.97), rgba(19, 26, 42, 0.97));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 128, 128, 0.35);
  color: #ece5d8;
  padding: 8px 14px 10px;
  line-height: 1.35;
}

.crash-box p { margin: 2px 0; }
.crash-text { font-size: 18px; color: #f2d7a0; }
.crash-detail { font-size: 14px; color: #ff9d9d; word-break: break-word; }
.crash-sent { font-size: 14px; color: #9dff9d; }
.crash-sent[hidden] { display: none; }
.crash-buttons { display: flex; gap: 8px; margin-top: 6px; }

.crash-buttons button {
  font-family: inherit;
  font-size: 16px;
  padding: 4px 14px;
  border: 2px solid #6b4a1c;
  border-radius: 9px;
  cursor: pointer;
  color: #3a260c;
  background: linear-gradient(180deg, #ffe7ad 0%, #f0cf7e 50%, #c99a45 51%, #d9ae5c 100%);
}

.crash-buttons button.crash-hide { background: #1b2438; color: #f2d7a0; border-color: #d8b471; }
.crash-buttons button:hover { filter: brightness(1.08); }

/* Lớp "xoay ngang": chỉ hiện trên thiết bị cảm ứng khi đang cầm dọc */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #0b1a2a;
  color: #ffffff;
  font-family: 'PixelVN', monospace;
  font-size: 26px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rotate-box p {
  margin: 20px 16px 0;
}

.rotate-phone {
  width: 44px;
  height: 76px;
  margin: 0 auto;
  border: 4px solid #ffe066;
  border-radius: 8px;
  animation: rotate-hint 1.8s ease-in-out infinite;
}

@keyframes rotate-hint {
  0%, 20% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(90deg); }
}

@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; }
}

/* Lớp đăng nhập (Giai đoạn 4) – HTML thật để bàn phím điện thoại hoạt động tốt.
   Thẻ nhỏ nổi ở trên, không phủ kín màn hình: phía dưới vẫn thấy màn hình đầu chạy. */
#auth {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  color: #ece5d8;
  font-family: 'PixelVN', monospace;
  padding: 8px;
  /* Chỉ thẻ form nhận chuột, chạm ra ngoài rơi xuống canvas để vẫn bấm được nút trong game */
  pointer-events: none;
}

#auth[hidden] { display: none; }

#auth-form {
  pointer-events: auto;
  position: relative;
  width: min(340px, 100%);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 12px 10px;
  border: 2px solid #d8b471;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(36, 48, 73, 0.96), rgba(19, 26, 42, 0.96));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 0 5px rgba(216, 180, 113, 0.12);
}

#auth h1 {
  margin: 0;
  padding: 0 24px;
  font-size: 21px;
  color: #f2d7a0;
  text-align: center;
}

#auth-sub {
  margin: 0 0 4px;
  font-size: 15px;
  text-align: center;
  color: #9be7ff;
}

#auth label {
  font-size: 13px;
  color: #a9b3c6;
}

#auth input {
  font-family: inherit;
  font-size: 17px;
  padding: 5px 8px;
  border: 1px solid #3a4768;
  border-radius: 4px;
  background: #0b1020;
  color: #ece5d8;
}

#auth input:focus {
  outline: 1px solid #d8b471;
  border-color: #d8b471;
}

.auth-buttons {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 10px;
}

/* Nút chính (Đăng nhập): kem chữ tối; Đăng ký là nút phụ xanh đêm viền vàng */
#auth button {
  font-family: inherit;
  font-size: 17px;
  padding: 6px 10px;
  /* Nút chính vàng có gờ như ui/Skin.js → buttonParts 'primary' (bản kem nhạt không giống nút, người dùng 25/9) */
  border: 2px solid #6b4a1c;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffe7ad 0%, #f0cf7e 50%, #c99a45 51%, #d9ae5c 100%);
  color: #3a260c;
  cursor: pointer;
  flex: 1;
}

#auth button:hover { background: linear-gradient(180deg, #fff1c8 0%, #ffe29a 50%, #d9ab55 51%, #e6bd6a 100%); }
/* Mỗi form chỉ còn một nút chính (Đăng nhập hoặc Đăng ký, 26/9) nên cả hai cùng kiểu nút vàng; ẩn nút của form kia */
#auth button[hidden], #auth label[hidden], #auth input[hidden] { display: none; }

#auth button.link {
  background: none;
  border: none;
  color: #9be7ff;
  text-decoration: underline;
  font-size: 14px;
  padding: 3px;
  flex: none;
}


/* Nút đóng góc phải: để sau, chơi tiếp không tài khoản */
#auth button#auth-close {
  position: absolute;
  top: 2px;
  right: 4px;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  background: #1b2438;
  border: 1px solid #d8b471;
  border-radius: 50%;
  color: #f2d7a0;
}

#auth-msg {
  min-height: 0;
  font-size: 15px;
  color: #ff8080;
  text-align: center;
}

#auth-msg.ok { color: #9dff9d; }

/* Hộp xoá nhân vật: cùng kiểu thẻ đăng nhập nhưng phủ kín và chặn bấm xuống game,
   viền đỏ để khác hẳn mọi hộp thoại thường. */
#delchar {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgba(5, 7, 13, 0.62);
  color: #ece5d8;
  font-family: 'PixelVN', monospace;
}

#delchar[hidden] { display: none; }

#delchar-form {
  position: relative;
  width: min(340px, 100%);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 12px 10px;
  border: 2px solid #d32f2f;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(36, 48, 73, 0.97), rgba(19, 26, 42, 0.97));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 0 5px rgba(211, 47, 47, 0.14);
}

#delchar h1 { margin: 0; font-size: 21px; color: #ff6b6b; text-align: center; }
#delchar-who { margin: 0; font-size: 15px; text-align: center; color: #f2d7a0; }
#delchar ul { margin: 2px 0; padding-left: 18px; font-size: 13px; line-height: 1.35; }
#delchar li.keep { color: #9dff9d; }
#delchar li.warn { color: #ff8080; font-weight: bold; }
#delchar-guest { margin: 2px 0; font-size: 13px; color: #ffd9a0; }
#delchar label { font-size: 13px; color: #a9b3c6; }

#delchar input {
  font-family: inherit;
  font-size: 17px;
  padding: 5px 8px;
  border: 1px solid #d32f2f;
  border-radius: 4px;
  background: #0b1020;
  color: #ece5d8;
}

#delchar input:focus { outline: 1px solid #d8b471; }
#delchar-msg { font-size: 14px; color: #ff8080; text-align: center; }

/* Huỷ = nút phụ xanh đêm viền vàng; Xoá = đỏ (danger); nhánh khách "đặt tên" = nút chính kem */
#delchar button {
  font-family: inherit;
  font-size: 17px;
  padding: 6px 10px;
  border: 1px solid #d8b471;
  border-radius: 9px;
  background: #2b3650;
  color: #ece5d8;
  cursor: pointer;
  flex: 1;
}

#delchar button:hover { background: #25314b; }
#delchar button#delchar-ok { background: #a94a44; border-color: #e8a09a; }
#delchar button#delchar-ok:hover { background: #c2574f; }
#delchar button#delchar-ok.claim { background: linear-gradient(180deg, #ffe7ad 0%, #f0cf7e 50%, #c99a45 51%, #d9ae5c 100%); border-color: #6b4a1c; color: #3a260c; }
#delchar button:disabled { opacity: 0.5; cursor: default; }

#delchar button#delchar-close {
  position: absolute;
  top: 2px;
  right: 4px;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  background: #1b2438;
  border: 1px solid #d8b471;
  border-radius: 50%;
  color: #f2d7a0;
}

/* Hộp nhập chung (core/AuthUi.js → showForm): cùng kiểu thẻ đăng nhập — xanh đêm viền vàng, nút chính vàng có gờ
   (ui/Skin.js, doc/26-ui-skin.md). Phủ kín và chặn bấm xuống game như hộp xoá, nhưng viền vàng vì không nguy hiểm. */
#gform {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgba(5, 7, 13, 0.62);
  color: #ece5d8;
  font-family: 'PixelVN', monospace;
}
#gform[hidden] { display: none; }
#gform-form {
  position: relative;
  width: min(340px, 100%);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 12px 10px;
  border: 2px solid #d8b471;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(36, 48, 73, 0.97), rgba(19, 26, 42, 0.97));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 0 5px rgba(216, 180, 113, 0.12);
}
#gform h1 { margin: 0; padding: 0 24px; font-size: 21px; color: #f2d7a0; text-align: center; }
#gform-sub { margin: 0 0 4px; font-size: 14px; text-align: center; color: #9be7ff; }
#gform-sub:empty { display: none; }
#gform-fields { display: flex; flex-direction: column; gap: 3px; }
#gform label { font-size: 13px; color: #a9b3c6; }
#gform .hint { font-size: 12px; color: #7f8aa3; margin-top: -2px; }
#gform input {
  font-family: inherit;
  font-size: 17px;
  padding: 5px 8px;
  border: 1px solid #3a4768;
  border-radius: 4px;
  background: #0b1020;
  color: #ece5d8;
}
#gform input:focus { outline: 1px solid #d8b471; border-color: #d8b471; }
#gform-msg { font-size: 14px; color: #ff8080; text-align: center; }
#gform-msg:empty { display: none; }
#gform button {
  font-family: inherit;
  font-size: 17px;
  padding: 6px 10px;
  border: 1px solid #d8b471;
  border-radius: 9px;
  background: #2b3650;
  color: #ece5d8;
  cursor: pointer;
  flex: 1;
}
#gform button:hover { background: #25314b; }
#gform button#gform-ok { border: 2px solid #6b4a1c; background: linear-gradient(180deg, #ffe7ad 0%, #f0cf7e 50%, #c99a45 51%, #d9ae5c 100%); color: #3a260c; }
#gform button#gform-ok:hover { background: linear-gradient(180deg, #fff1c8 0%, #ffe29a 50%, #d9ab55 51%, #e6bd6a 100%); }
/* Hộp xác nhận việc không quay lại được (bỏ nhân vật khách, đăng xuất khách): nút chính đỏ như #delchar-ok */
#gform button#gform-ok.danger { background: #a94a44; border: 1px solid #e8a09a; color: #ece5d8; }
#gform button#gform-ok.danger:hover { background: #c2574f; }
#gform button:disabled { opacity: 0.5; cursor: default; }
#gform button#gform-close {
  position: absolute;
  top: 2px;
  right: 4px;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  background: #1b2438;
  border: 1px solid #d8b471;
  border-radius: 50%;
  color: #f2d7a0;
}

/* Ba nút × HTML = hai kiếm cong bắt chéo, cùng hình và cùng pha chém như ui/Skin.js → closeParts (người dùng 26/9 chọn kiểu kiếm, "thêm
   hiệu ứng riêng biệt mỗi thanh kiếm phối hợp với nhau"). ::before = kiếm chém (mũi lên phải), ::after = kiếm đỡ (lật ngang, mũi lên
   trái). Nền của chính nút là tia lửa, bùng ở 40% (≈170 ms, = CLASH_MS). Đặt SAU các quy tắc nút đóng ở trên; bộ chọn có thêm
   [type="button"] cho mạnh hơn #x button#x-close. Kiếm đỡ: transform scaleX(-1) rotate(θ) → góc trên màn hình là −θ. */
:is(#auth, #gform, #delchar) button[type="button"]:is(#auth-close, #gform-close, #delchar-close) {
  font-size: 0;
  color: transparent;
  border: none;
  border-radius: 50%;
  overflow: visible;
  background: radial-gradient(circle, #fff 0 10%, rgba(255, 233, 168, 0.9) 18%, rgba(255, 210, 122, 0.45) 32%, transparent 52%) center / 0 0 no-repeat;
}
:is(#auth, #gform, #delchar) button[type="button"]:is(#auth-close, #gform-close, #delchar-close)::before,
:is(#auth, #gform, #delchar) button[type="button"]:is(#auth-close, #gform-close, #delchar-close)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 13.6L17.2 5L20 4L19 6.8L10.4 15.4Z' fill='%23dfe6ee' stroke='%237b8798' stroke-width='.5'/%3E%3Cpath d='M4.2 19.8L7.2 16.8' stroke='%238a6a3a' stroke-width='2'/%3E%3Cpath d='M6.4 13.4L10.6 17.6' stroke='%23d8b471' stroke-width='1.7'/%3E%3Ccircle cx='3.8' cy='20.2' r='1.3' fill='%23d8b471'/%3E%3C/svg%3E") center / 100% no-repeat;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4));
  transition: transform 0.12s ease-out, filter 0.12s;
  pointer-events: none;
}
:is(#auth, #gform, #delchar) button[type="button"]:is(#auth-close, #gform-close, #delchar-close)::after { transform: scaleX(-1); }
:is(#auth, #gform, #delchar) button[type="button"]:is(#auth-close, #gform-close, #delchar-close):hover { animation: cutlass-spark 0.42s ease-out; }
:is(#auth, #gform, #delchar) button[type="button"]:is(#auth-close, #gform-close, #delchar-close):hover::before { animation: cutlass-strike 0.42s forwards; }
:is(#auth, #gform, #delchar) button[type="button"]:is(#auth-close, #gform-close, #delchar-close):hover::after { animation: cutlass-guard 0.42s forwards; }
/* Kiếm chém: vung −26° → chém qua +8° đúng mốc chạm → về 0°; loé sáng ngay sau cú chạm */
@keyframes cutlass-strike {
  0% { transform: rotate(0) scale(1); animation-timing-function: ease-out; }
  24% { transform: rotate(-26deg) scale(1.1); animation-timing-function: ease-in; }
  40% { transform: rotate(8deg) scale(1.1); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4)); }
  50% { filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4)) brightness(1.7); }
  78%, 100% { transform: rotate(0) scale(1.1); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4)) brightness(1.1); }
}
/* Kiếm đỡ: nghiêng +12° đón đòn → bị ép −4° lúc chạm → dội +3° / −2° → 0°; loé sáng trễ hơn kiếm chém một nhịp */
@keyframes cutlass-guard {
  0% { transform: scaleX(-1) rotate(0) scale(1); animation-timing-function: ease-out; }
  24% { transform: scaleX(-1) rotate(-12deg) scale(1.1); animation-timing-function: ease-in; }
  40% { transform: scaleX(-1) rotate(4deg) scale(1.1); }
  52% { transform: scaleX(-1) rotate(-3deg) scale(1.1); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4)); }
  64% { transform: scaleX(-1) rotate(2deg) scale(1.1); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4)) brightness(1.7); }
  82%, 100% { transform: scaleX(-1) rotate(0) scale(1.1); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4)) brightness(1.1); }
}
@keyframes cutlass-spark {
  0%, 38% { background-size: 0 0; }
  46% { background-size: 130% 130%; }
  64%, 100% { background-size: 0 0; }
}

/* Điện thoại nằm ngang (cao ~375px): thu gọn để phần game phía dưới vẫn còn thấy.
   Ô nhập giữ 16px vì dưới mức đó Safari iOS tự phóng to trang khi bấm vào ô. */
@media (max-height: 430px) {
  #auth-form {
    width: min(300px, 100%);
    gap: 1px;
    padding: 4px 10px 6px;
  }
  #auth h1 { font-size: 17px; }
  #auth-sub { font-size: 12px; margin-bottom: 2px; }
  #auth label { font-size: 11px; }
  #auth input { font-size: 16px; padding: 3px 6px; }
  #auth button { font-size: 15px; padding: 4px 8px; }
  #auth button.link { font-size: 12px; padding: 1px; }
  #auth button#auth-close { width: 22px; height: 22px; font-size: 17px; }
  #auth-msg { font-size: 12px; }
  #delchar-form { width: min(320px, 100%); gap: 1px; padding: 4px 10px 6px; }
  #delchar h1 { font-size: 17px; }
  #delchar-who, #delchar-msg { font-size: 12px; }
  #delchar ul, #delchar-guest, #delchar label { font-size: 11px; }
  #delchar input { font-size: 16px; padding: 3px 6px; }
  #delchar button { font-size: 15px; padding: 4px 8px; }
  #gform-form { width: min(320px, 100%); gap: 1px; padding: 4px 10px 6px; }
  #gform h1 { font-size: 17px; }
  #gform-sub, #gform-msg { font-size: 12px; }
  #gform label, #gform .hint { font-size: 11px; }
  #gform input { font-size: 16px; padding: 3px 6px; }
  #gform button { font-size: 15px; padding: 4px 8px; }
}