/* Nông Trại Avatar v2 — giao diện (HUD kiểu Avatar: nút vuông trắng bo góc, bảng kem/gỗ/trời viền nâu đen)
 * Mục: token · nền tảng · nút · kết nối · đăng nhập · màn chơi/HUD · popover · chat · công cụ · toast
 * · modal · bố cục tách (tủ đồ/cửa hàng) · món đồ · bảng khác · responsive · giảm chuyển động */

/* ================================================================ TOKEN */
:root {
  --font: 'Baloo 2', 'Segoe UI', system-ui, Arial, sans-serif;
  --ink: #2a1a0e;
  --text: #4a2c12;
  --text-soft: #7a5734;
  --cream: #fff8e6;
  --cream-2: #fdf0d2;
  --line: #e7d0a8;
  --wood: #b5763a;
  --wood-dark: #6e4119;
  --wood-shadow: #4f2d10;
  --leaf: #5cb83a;
  --leaf-dark: #2f7d1c;
  --gold: #ffd23f;
  --gold-dark: #c98d00;
  --red: #e8553d;
  --red-dark: #a72c19;
  --blue: #3fa9f5;
  --blue-dark: #1a6fb0;
  --sky: #6cb4f4;
  --sky-dark: #1d4f87;
  --hud-white: #fcfcfc;
  --hud-line: #d4dce6;
  --hud-shadow: #b7c3cf;
  --hud-icon: #84b4e4;
  --badge: #cc3424;
  --lv: #106478;
  --pm: #8a2fb8;
  --focus: #2b7bff;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* nút HUD ≈ 11% chiều cao màn (tối thiểu 44px) */
  --hb: clamp(44px, min(11vh, 14vw), 84px);
  --hud-pad-t: calc(var(--safe-t) + 10px);
}

/* ================================================================ NỀN TẢNG */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #78c9f7;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}
button, input { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }
.noscript { position: fixed; inset: auto 0 0 0; margin: 0; padding: 12px; background: var(--red); color: #fff; text-align: center; font-weight: 700; z-index: 400; }

/* ================================================================ NÚT "3D" */
.btn {
  --c1: #8ee060; --c2: #4caf2a; --sh: #2e7d1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 16px 8px;
  border: 2px solid rgba(0, 0, 0, .2);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 4px 0 var(--sh), 0 6px 10px rgba(0, 0, 0, .16), inset 0 2px 0 rgba(255, 255, 255, .45);
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow: 0 1.5px 0 rgba(0, 0, 0, .35);
  white-space: nowrap;
  user-select: none;
  transition: transform .06s, box-shadow .06s, filter .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--sh), 0 2px 4px rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .35); }
.btn:disabled { --c1: #ddd6ca; --c2: #bdb5a7; --sh: #8d8577; color: #f7f4ee; text-shadow: none; }
.btn-green { --c1: #8ee060; --c2: #4caf2a; --sh: #2e7d1a; }
.btn-yellow { --c1: #ffe36b; --c2: #ffc21a; --sh: var(--gold-dark); color: #6b3d00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.btn-orange { --c1: #ffb65c; --c2: #ff8a1a; --sh: #c2600a; }
.btn-red { --c1: #ff8a6b; --c2: #e8553d; --sh: var(--red-dark); }
.btn-blue { --c1: #7fcbff; --c2: #3fa9f5; --sh: var(--blue-dark); }
.btn-wood { --c1: #e8b57a; --c2: #b5763a; --sh: var(--wood-dark); }
.btn-sm { min-height: 40px; padding: 3px 11px 5px; border-radius: 12px; font-size: 14px; box-shadow: 0 3px 0 var(--sh), inset 0 2px 0 rgba(255, 255, 255, .45); }
.btn-sm:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--sh); }
.btn-xs { min-height: 32px; padding: 2px 10px 3px; border-radius: 99px; font-size: 13.5px; box-shadow: 0 2px 0 var(--sh), inset 0 2px 0 rgba(255, 255, 255, .45); }
.btn-big { min-height: 50px; font-size: 19px; width: 100%; border-radius: 16px; }
.btn-buy { flex-direction: column; gap: 0; min-width: 58px; padding: 2px 10px 5px; line-height: 1.05; }
.btn-buy small { font-size: 11px; font-weight: 700; opacity: .95; }
.icon-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(0, 0, 0, .2);
  border-radius: 11px;
  background: linear-gradient(180deg, #ff8a6b, #e8553d);
  box-shadow: 0 2px 0 var(--red-dark);
  color: #fff;
  font-weight: 800;
}

/* ================================================================ KẾT NỐI */
.conn {
  position: fixed;
  z-index: 320;
  top: calc(var(--safe-t) + 8px);
  right: calc(var(--safe-r) + 8px);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 16px);
  padding: 3px 10px 3px 8px;
  border-radius: 99px;
  background: rgba(40, 26, 12, .75);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  pointer-events: none;
  transition: padding .25s, background .25s, opacity .3s;
}
.conn-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #ffc21a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.conn.connecting .conn-dot { animation: blink 1s infinite; }
.conn.online .conn-dot { background: #4cdf55; }
.conn.offline .conn-dot { background: #ff4d3d; animation: blink .8s infinite; }
.conn.compact { padding: 4px; background: rgba(40, 26, 12, .45); }
.conn.compact .conn-text { display: none; }
.conn.gone { opacity: 0; }
/* Trong game: viên trạng thái nằm giữa trên (góc phải là nút Biểu cảm/Bản đồ) */
.conn.in-game { top: calc(var(--safe-t) + 4px); right: auto; left: 50%; transform: translateX(-50%); }
@keyframes blink { 50% { opacity: .35; } }

/* ================================================================ ĐĂNG NHẬP */
.login-screen {
  z-index: 50;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: linear-gradient(180deg, #59bdf5 0%, #9ddcff 45%, #d6f3ff 70%, #bfe8a8 100%);
}
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.sun {
  position: absolute;
  top: calc(var(--safe-t) + 4vh);
  right: 8vw;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff7b0, #ffd23f 55%, #ffb21a);
  box-shadow: 0 0 60px 20px rgba(255, 220, 90, .55);
}
.sun-rays {
  position: absolute;
  inset: -45px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 236, 140, .55) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%, transparent 72%);
  mask: radial-gradient(circle, transparent 52%, #000 53%, transparent 72%);
  animation: spin 30s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cloud {
  position: absolute;
  left: 0;
  width: 160px;
  height: 46px;
  border-radius: 50px;
  background: #fff;
  opacity: .95;
  filter: drop-shadow(0 6px 0 rgba(120, 180, 220, .35));
  animation: drift linear infinite;
}
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 70px; height: 70px; top: -36px; left: 26px; }
.cloud::after { width: 90px; height: 90px; top: -50px; left: 62px; }
.cloud-1 { top: 9vh; animation-duration: 70s; animation-delay: -10s; }
.cloud-2 { top: 22vh; transform: scale(.7); animation-duration: 95s; animation-delay: -60s; opacity: .85; }
.cloud-3 { top: 4vh; transform: scale(.55); animation-duration: 120s; animation-delay: -30s; opacity: .8; }
@keyframes drift { from { translate: -260px 0; } to { translate: calc(100vw + 260px) 0; } }
/* skyline thành phố xa (khối phẳng, cửa sổ sáng) */
.skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22vh;
  height: 120px;
  opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120'%3E%3Cg fill='%234c8cd4'%3E%3Crect x='0' y='46' width='44' height='74'/%3E%3Crect x='52' y='20' width='38' height='100'/%3E%3Crect x='98' y='60' width='56' height='60'/%3E%3Crect x='162' y='8' width='34' height='112'/%3E%3Crect x='204' y='38' width='50' height='82'/%3E%3Crect x='262' y='66' width='58' height='54'/%3E%3C/g%3E%3Cg fill='%23d4ecfc'%3E%3Crect x='8' y='56' width='8' height='8'/%3E%3Crect x='26' y='72' width='8' height='8'/%3E%3Crect x='60' y='30' width='8' height='8'/%3E%3Crect x='74' y='50' width='8' height='8'/%3E%3Crect x='110' y='72' width='8' height='8'/%3E%3Crect x='132' y='72' width='8' height='8'/%3E%3Crect x='170' y='20' width='8' height='8'/%3E%3Crect x='180' y='44' width='8' height='8'/%3E%3Crect x='214' y='50' width='8' height='8'/%3E%3Crect x='234' y='66' width='8' height='8'/%3E%3Crect x='274' y='78' width='8' height='8'/%3E%3Crect x='296' y='78' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 320px 120px repeat-x;
}
.hill { position: absolute; left: -20vw; right: -20vw; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hill-back { bottom: 10vh; height: 26vh; background: linear-gradient(180deg, #a6dc6e, #86c653); left: -40vw; right: 10vw; }
.hill-front { bottom: -8vh; height: 26vh; background: linear-gradient(180deg, #76c548, #4fa52f); }
.login-deco { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; }

.login-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: calc(var(--safe-t) + 30px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 24px) calc(var(--safe-l) + 16px);
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  font-size: clamp(34px, 9.5vw, 62px);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-shadow:
    0 3px 0 var(--leaf-dark), 2px 0 0 var(--leaf-dark), -2px 0 0 var(--leaf-dark), 0 -2px 0 var(--leaf-dark),
    2px 3px 0 var(--leaf-dark), -2px 3px 0 var(--leaf-dark), 0 7px 0 rgba(0, 0, 0, .18);
}
.logo-icon { display: inline-block; animation: bob 2.2s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .15)); }
.logo-accent {
  color: var(--gold);
  text-shadow:
    0 3px 0 #b05a00, 2px 0 0 #b05a00, -2px 0 0 #b05a00, 0 -2px 0 #b05a00,
    2px 3px 0 #b05a00, -2px 3px 0 #b05a00, 0 7px 0 rgba(0, 0, 0, .18);
}
@keyframes bob { 50% { transform: translateY(-6px) rotate(-6deg); } }
.tagline { margin: 10px 0 16px; padding: 2px 14px; border-radius: 99px; background: rgba(255, 255, 255, .75); color: var(--sky-dark); font-weight: 700; font-size: 15px; text-align: center; }

.card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: inset 0 0 0 3px #fff, 0 6px 0 rgba(42, 26, 14, .45), 0 16px 30px rgba(40, 60, 20, .3);
}
.login-card { position: relative; width: min(400px, 100%); padding: 14px 16px 18px; transition: width .2s; }
.login-card.wide { width: min(640px, 100%); }
.login-foot { margin: 14px 0 0; padding: 3px 12px; border-radius: 12px; background: rgba(255, 255, 255, .65); color: var(--leaf-dark); font-size: 13.5px; font-weight: 600; text-align: center; }

.tabs { display: flex; gap: 6px; padding: 4px; border-radius: 16px; background: var(--cream-2); border: 2px solid var(--line); }
.tab {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-soft);
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
}
.tab.active { background: linear-gradient(180deg, #ffe36b, #ffc21a); color: #6b3d00; box-shadow: 0 3px 0 var(--gold-dark); }
.tab-dot { display: inline-block; width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; background: var(--badge); vertical-align: middle; }

.form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.field { display: flex; flex-direction: column; gap: 2px; }
.field-label { font-size: 14px; font-weight: 700; color: var(--text-soft); padding-left: 4px; }
.field input {
  width: 100%;
  min-height: 46px;
  padding: 8px 14px;
  border: 3px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-size: 17px;
  font-weight: 600;
  user-select: text;
  -webkit-user-select: text;
}
.field input:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(92, 184, 58, .25); }
.form-err { margin: 0; color: var(--red-dark); font-weight: 700; font-size: 14.5px; }
.form-err:empty { display: none; }
.form-err.info { color: var(--blue-dark); }
.form-hint { margin: 0; text-align: center; font-size: 13.5px; color: var(--text-soft); }
.field-hint { padding-left: 4px; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.field-hint.bad { color: var(--red-dark); font-weight: 700; }
.field-hint.ok { color: #2f7d1e; }
.field input[aria-invalid="true"] { border-color: var(--red); }

.creator { display: flex; gap: 14px; align-items: flex-start; }
.creator-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.preview-cv {
  display: block;
  width: 150px;
  height: 186px;
  border-radius: 20px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--line);
  background:
    radial-gradient(ellipse 60% 12% at 50% 90%, rgba(60, 120, 30, .3), transparent 70%),
    linear-gradient(180deg, #c8efff 0%, #e9f9ff 58%, #9fd96f 59%, #7cc35a 100%);
}
.creator-opts { flex: 1; display: grid; gap: 6px; min-width: 0; }
.opt { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.opt-label { flex: none; width: 76px; font-size: 14px; font-weight: 700; color: var(--text-soft); }
.swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.sw {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .25);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
}
.sw[aria-pressed='true'] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ff8a1a; transform: scale(1.08); }
.seg { display: flex; gap: 6px; }
.seg-btn { min-height: 34px; padding: 2px 12px; border: 2px solid var(--line); border-radius: 11px; background: #fff; font-weight: 800; color: var(--text-soft); }
.seg-btn[aria-pressed='true'] { background: linear-gradient(180deg, #8ee060, #4caf2a); border-color: var(--leaf-dark); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); box-shadow: 0 3px 0 var(--leaf-dark); }
.stepper { display: flex; align-items: center; gap: 6px; min-width: 0; }
.step-btn { flex: none; width: 36px; height: 34px; border: none; border-radius: 10px; background: linear-gradient(180deg, #e8b57a, #b5763a); box-shadow: 0 3px 0 var(--wood-dark); color: #fff; font-size: 13px; }
.step-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-dark); }
.step-val { min-width: 108px; text-align: center; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.resume-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 6px; text-align: center; }
.resume-spin { font-size: 46px; animation: spin 2.4s linear infinite; }
.resume-text { margin: 0; font-weight: 800; font-size: 18px; }

/* ================================================================ MÀN CHƠI & HUD */
.game-cv { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.game-screen { z-index: 10; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: 'bl info banner br';
  align-items: start;
  column-gap: 12px;
  row-gap: 8px;
  padding: var(--hud-pad-t) calc(var(--safe-r) + 14px) 0 calc(var(--safe-l) + 14px);
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud-left { grid-area: bl; display: flex; gap: calc(var(--hb) * .2); }
.hud-right { grid-area: br; display: flex; gap: calc(var(--hb) * .2); }
.hud-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--hb);
  height: var(--hb);
  padding: 0;
  border: 2px solid var(--hud-line);
  border-radius: calc(var(--hb) * .2);
  background: var(--hud-white);
  box-shadow: 0 3px 0 var(--hud-shadow), 0 6px 14px rgba(20, 40, 70, .22);
  transition: transform .06s, box-shadow .06s;
}
.hud-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hud-shadow), 0 3px 8px rgba(20, 40, 70, .2); }
.hud-btn[aria-expanded='true'] { background: #eef6ff; border-color: var(--hud-icon); }
.hud-svg { width: 72%; height: 72%; display: block; }
.ic-menu { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--hb) * .085); width: 56%; }
.ic-menu i { display: block; height: calc(var(--hb) * .09); border-radius: 99px; background: var(--hud-icon); }
.hud-badge {
  position: absolute;
  right: calc(var(--hb) * -.12);
  bottom: calc(var(--hb) * -.12);
  min-width: calc(var(--hb) * .44);
  height: calc(var(--hb) * .44);
  padding: 0 4px;
  border-radius: 99px;
  border: 2.5px solid #fff;
  background: var(--badge);
  color: #fff;
  font-size: calc(var(--hb) * .24);
  font-weight: 800;
  line-height: calc(var(--hb) * .44 - 5px);
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
  animation: pop .3s;
}
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.25); } }
.wiggle { animation: wiggle .6s; }
@keyframes wiggle { 20% { transform: rotate(-10deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }

.hud-info {
  grid-area: info;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--hb);
  max-width: 270px;
  min-width: 0;
  padding: 4px 12px 4px 4px;
  border: 2px solid var(--hud-line);
  border-radius: calc(var(--hb) * .2);
  background: rgba(252, 252, 252, .93);
  box-shadow: 0 3px 0 var(--hud-shadow), 0 6px 14px rgba(20, 40, 70, .2);
  text-align: left;
}
.hud-info:active { transform: translateY(2px); }
.hud-portrait {
  flex: none;
  width: calc(var(--hb) - 12px);
  height: calc(var(--hb) - 12px);
  border-radius: calc(var(--hb) * .16);
  border: 2px solid #e2e8ee;
  background: linear-gradient(180deg, #bfe9ff, #e8f8ff 62%, #a5dc78 63%);
}
.hud-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; flex: 1; line-height: 1.1; }
.hud-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: clamp(13px, calc(var(--hb) * .23), 18px); color: var(--ink); }
.hud-row { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: clamp(12px, calc(var(--hb) * .2), 16px); }
.hud-lv { display: inline-flex; align-items: center; gap: 2px; color: var(--lv); font-weight: 800; }
.lv-ic { width: 1.1em; height: 1.1em; flex: none; }
.hud-coins { display: inline-flex; align-items: center; gap: 2px; color: #8a5a00; font-weight: 800; }
.hud-coins.bump { animation: bump .45s; }
@keyframes bump { 30% { transform: scale(1.3); color: #e07b00; } 100% { transform: scale(1); } }
.xpbar { display: block; width: 100%; min-width: 92px; height: 7px; margin-top: 2px; border-radius: 99px; background: #dfe6ec; border: 1px solid #c3ced8; overflow: hidden; }
.xp-fill { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(180deg, #5bf07a, #10d434); transition: width .4s; }

.scene-banner {
  grid-area: banner;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  min-height: 38px;
  margin-top: max(0px, calc((var(--hb) - 40px) / 2));
  padding: 3px 5px 3px 14px;
  border-radius: 99px;
  border: 2px solid #9cc8ee;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 3px 0 rgba(29, 79, 135, .25), 0 6px 12px rgba(0, 0, 0, .12);
  color: var(--sky-dark);
  font-weight: 800;
  font-size: 15px;
}
.scene-banner.area { padding-right: 14px; }
.scene-banner.visiting { border-color: var(--gold-dark); background: linear-gradient(180deg, #fff6c4, #ffe27a); color: #6b3d00; box-shadow: 0 3px 0 #a06c00, 0 6px 12px rgba(0, 0, 0, .12); }
.banner-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner-text b { color: #8a3d00; }
.bt-short { display: none; }
.bt-ch { color: #2f7fd0; }
.bh-lb { margin-left: 3px; }

/* ================================================================ POPOVER (menu, biểu cảm, lịch sử chat) */
.pop {
  position: absolute;
  z-index: 30;
  pointer-events: auto;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: inset 0 0 0 3px #fff, 0 5px 0 rgba(42, 26, 14, .4), 0 14px 30px rgba(0, 0, 0, .28);
  animation: popIn .18s ease-out;
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.pop-title { margin: 2px 4px 6px; font-weight: 800; font-size: 13px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .3px; }

.menu-panel {
  top: calc(var(--hud-pad-t) + var(--hb) + 10px);
  left: calc(var(--safe-l) + 14px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 246px;
  max-height: calc(100% - var(--hud-pad-t) - var(--hb) - 22px);
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  font-size: 15.5px;
  text-align: left;
}
.mn:hover:not(:disabled) { background: #fff1c7; }
.mn:active:not(:disabled) { background: #ffe39a; }
.mn:disabled { opacity: .55; }
.mn-ic { flex: none; width: 28px; font-size: 22px; text-align: center; }
.mn-lb { display: flex; flex-direction: column; line-height: 1.12; }
.mn-note { font-size: 11.5px; font-weight: 700; color: var(--text-soft); }
.mn-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--badge); color: #fff; font-size: 12px; line-height: 22px; text-align: center; }
.mn-danger { color: var(--red-dark); }

.emote-panel {
  top: calc(var(--hud-pad-t) + var(--hb) + 10px);
  right: calc(var(--safe-r) + 14px);
  width: min(352px, calc(100vw - 28px - var(--safe-l) - var(--safe-r)));
  max-height: calc(100% - var(--hud-pad-t) - var(--hb) - 22px);
  padding: 8px 10px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.emote-grid, .pose-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.emo-btn, .pose-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 66px;
  padding: 4px 2px 3px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 0 var(--line);
}
.emo-btn:hover, .pose-btn:hover { border-color: #ffc21a; background: #fffbe6; }
.emo-btn:active, .pose-btn:active { transform: translateY(2px); box-shadow: none; }
.emo-cv { width: 44px; height: 40px; }
.pose-cv { width: 52px; height: 48px; }
.emo-lb { font-size: 11.5px; font-weight: 800; color: var(--text-soft); white-space: nowrap; line-height: 1.2; }
.stand-btn { width: 100%; margin-top: 2px; }

/* ================================================================ CHAT */
.chat-log {
  left: calc(var(--safe-l) + 14px);
  bottom: calc(var(--bar-top, 70px) + 8px);
  display: flex;
  flex-direction: column;
  width: min(430px, calc(100vw - 28px - var(--safe-l) - var(--safe-r)));
  height: min(44vh, 340px);
  min-height: 150px;
  overflow: hidden;
}
.chat-log-head { display: flex; align-items: center; gap: 6px; padding: 7px 7px 6px; border-bottom: 2px solid var(--line); }
.tabs-mini { flex: 1; padding: 3px; }
.tabs-mini .tab { min-height: 34px; font-size: 14px; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 12px 8px; font-size: 14.5px; line-height: 1.35; user-select: text; -webkit-user-select: text; }
.cl { padding: 2px 0; overflow-wrap: anywhere; font-weight: 600; }
.cl-name { padding: 0; border: 0; background: none; color: #1d6fb8; font-weight: 800; font-size: inherit; text-align: left; }
.cl-name:hover { text-decoration: underline; }
.cl-self .cl-name { color: var(--leaf-dark); }
.cl-pm { font-weight: 800; color: #5a2478; }
.cl-pm .cl-name, .cl-tag { color: var(--pm); font-weight: 800; }
.cl-ntag { color: #6a7896; font-weight: 700; font-size: .92em; white-space: nowrap; }   /* nhãn sau tên (GAME.registerChatNameTag) */
.cl-sys { padding: 5px 0; color: var(--text-soft); font-size: 12.5px; font-weight: 700; text-align: center; }
.chat-empty { margin: 18px 6px; color: var(--text-soft); font-weight: 600; text-align: center; }

.bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 calc(var(--safe-r) + 14px) calc(var(--safe-b) + 10px) calc(var(--safe-l) + 14px);
  pointer-events: none;
}
.bottom-bar > * { pointer-events: auto; }
.chat-bar { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; max-width: 500px; }
.chat-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 46px;
  padding: 3px 3px 3px 12px;
  border: 2px solid #c9d6e2;
  border-radius: 99px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 3px 0 rgba(42, 26, 14, .18), 0 6px 14px rgba(0, 0, 0, .15);
}
.chat-form:focus-within { border-color: var(--blue); }
.chat-bar.pm-mode .chat-form { border-color: #b06ad8; background: #fbf3ff; }
.chat-input { flex: 1; min-width: 0; height: 100%; padding: 0 2px; border: 0; background: transparent; font-weight: 600; font-size: 16px; outline: none; user-select: text; -webkit-user-select: text; }
.chat-input:focus-visible { outline: none; }
.chat-send {
  flex: none;
  height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(180deg, #7fcbff, #3fa9f5);
  box-shadow: 0 2px 0 var(--blue-dark);
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.chat-send:active { transform: translateY(1px); box-shadow: none; }
.chat-target { flex: none; display: inline-flex; align-items: center; gap: 2px; max-width: 42%; padding: 2px 3px 2px 8px; border-radius: 99px; background: #efd9fb; color: #6a2a8c; font-weight: 800; font-size: 13px; }
.ct-lock { flex: none; }
.ct-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-x { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #6a2a8c; font-weight: 800; }
.chat-hist, .chat-open-btn {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid var(--hud-line);
  border-radius: 14px;
  background: var(--hud-white);
  box-shadow: 0 3px 0 var(--hud-shadow), 0 6px 14px rgba(20, 40, 70, .2);
  font-size: 22px;
}
.chat-hist[aria-expanded='true'] { background: #eef6ff; border-color: var(--hud-icon); }
.chat-open-btn { display: none; }
.mini-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 99px;
  border: 2px solid #fff;
  background: var(--badge);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

/* ================================================================ THANH CÔNG CỤ NÔNG TRẠI */
.toolbar {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  display: flex;
  gap: 6px;
  padding: 6px 8px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-x;
  border: 3px solid var(--wood-dark);
  border-radius: 22px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 46px), linear-gradient(180deg, #d99a58, #b5763a);
  box-shadow: 0 4px 0 var(--wood-shadow), 0 8px 18px rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .35);
}
.toolbar::-webkit-scrollbar { display: none; }
.tool {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 2px 0 3px;
  border: 2px solid rgba(80, 45, 15, .45);
  border-radius: 15px;
  background: linear-gradient(180deg, #fff6df, #f3dcae);
  box-shadow: 0 3px 0 var(--wood-shadow);
  color: var(--wood-shadow);
}
.tool:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-shadow); }
.tool .ic { font-size: 24px; line-height: 1.05; }
.tool .lb { font-size: 10.5px; font-weight: 800; line-height: 1.05; white-space: nowrap; }
.tool.active { background: linear-gradient(180deg, #fff59a, #ffc21a); border-color: #fff; box-shadow: 0 3px 0 var(--gold-dark), 0 0 0 3px var(--gold-dark), 0 0 14px 3px rgba(255, 230, 90, .9); }
.seed-badge { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--wood-dark); background: #fff; font-size: 14px; line-height: 20px; text-align: center; }

/* ================================================================ TOAST & LÊN CẤP */
.toasts {
  position: fixed;
  z-index: 300;
  top: calc(var(--hud-bottom, 0px) + var(--safe-t) + 14px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(460px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  max-width: 100%;
  padding: 7px 16px 8px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 16px;
  background: rgba(46, 30, 14, .9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  overflow-wrap: anywhere;
  animation: toastIn .25s ease-out;
}
.toast-ok { background: rgba(38, 120, 28, .94); }
.toast-warn { background: rgba(178, 52, 30, .94); }
.toast.out { animation: toastOut .3s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(.95); } }

.level-toast {
  position: fixed;
  z-index: 310;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: calc(100vw - 32px);
  padding: 14px 30px 16px;
  border: 4px solid #fff;
  border-radius: 26px;
  background: linear-gradient(180deg, #ffe36b, #ff9a2e);
  box-shadow: 0 6px 0 #b05a00, 0 0 0 8px rgba(255, 220, 90, .45), 0 20px 40px rgba(0, 0, 0, .3);
  color: #fff;
  text-align: center;
  pointer-events: none;
  animation: levelIn .6s cubic-bezier(.2, 1.6, .4, 1);
}
.level-text { font-size: clamp(26px, 7vw, 44px); font-weight: 800; line-height: 1.1; white-space: nowrap; text-shadow: 0 3px 0 #b05a00, 2px 0 0 #b05a00, -2px 0 0 #b05a00; }
.level-sub { font-size: 15px; font-weight: 800; color: #6b3d00; }
.level-sub:empty { display: none; }
.level-toast.out { animation: levelOut .4s ease-in forwards; }
@keyframes levelIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); } }
@keyframes levelOut { to { opacity: 0; transform: translate(-50%, -80%) scale(.9); } }

/* ================================================================ MODAL */
.modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-t) + 12px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px);
}
.modal-backdrop { position: absolute; inset: 0; background: rgba(28, 20, 10, .5); animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(600px, 100%);
  max-height: 100%;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--cream);
  box-shadow: 0 6px 0 rgba(42, 26, 14, .5), 0 20px 40px rgba(0, 0, 0, .35);
  animation: modalIn .25s cubic-bezier(.2, 1.4, .4, 1);
}
.modal-card::after { content: ''; position: absolute; inset: 0; border-radius: 19px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85); pointer-events: none; }
.modal-sm { width: min(420px, 100%); }
.modal-xl { width: min(940px, 100%); height: min(660px, 100%); }
@keyframes modalIn { from { opacity: 0; transform: scale(.88) translateY(20px); } }
.modal-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 8px 8px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%), var(--accent, #4aa6ee);
  border-bottom: 3px solid var(--ink);
}
.theme-wood .modal-head { --accent: #c4864a; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 13px), linear-gradient(180deg, #d99a58, #b5763a); }
.atm-card .modal-head { --accent: #548cdc; }
.modal-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 0 rgba(30, 20, 10, .55), 1px 0 0 rgba(30, 20, 10, .55), -1px 0 0 rgba(30, 20, 10, .55), 0 -1px 0 rgba(30, 20, 10, .4);
}
.head-chip { flex: none; padding: 2px 10px; border-radius: 12px; background: rgba(255, 248, 230, .94); color: #8a5a00; font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.head-btn { flex: none; }
.modal-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(0, 0, 0, .25);
  border-radius: 13px;
  background: linear-gradient(180deg, #ff8a6b, #e8553d);
  box-shadow: 0 3px 0 var(--red-dark);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.modal-close:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-dark); }
.tabs-panel { flex: none; margin: 10px 10px 0; }
.modal-body { flex: 1; min-height: 60px; padding: 10px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.modal-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 2px dashed var(--line); background: var(--cream-2); }
.modal-foot-end { justify-content: flex-end; }
.modal-note { display: block; font-size: 13.5px; color: var(--text-soft); text-align: center; }
.foot-total { font-weight: 700; }
.foot-total b { color: #8a5a00; }
.confirm-text { margin: 4px 2px; font-size: 16.5px; font-weight: 600; overflow-wrap: anywhere; }

/* ================================================================ BỐ CỤC TÁCH (tủ đồ, cửa hàng) */
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 2px dashed var(--line);
  background: linear-gradient(180deg, #eef8ff, var(--cream) 45%);
}
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.main-body { flex: 1; min-height: 0; padding: 10px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.side-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.side-stats { display: flex; flex-direction: column; gap: 6px; }
.side-stats:empty { display: none; }
.stat-line { font-size: 13.5px; font-weight: 700; color: var(--text-soft); }

.pv-box {
  position: relative;
  flex: none;
  height: 240px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 18px;
  box-shadow: 0 0 0 2px var(--line), 0 3px 0 2px var(--line);
  background:
    radial-gradient(ellipse 55% 10% at 50% 90%, rgba(60, 120, 30, .3), transparent 70%),
    linear-gradient(180deg, #c8efff 0%, #e9f9ff 64%, #9fd96f 65%, #7cc35a 100%);
}
.pv-shop {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 26px, rgba(255, 255, 255, .25) 26px 28px) 0 0 / 100% 64%,
    radial-gradient(ellipse 55% 10% at 50% 90%, rgba(0, 0, 0, .18), transparent 70%),
    linear-gradient(180deg, #ffe9f3 0%, #fff6fa 64%, #c9c9c9 65%, #a9a9a9 100%);
}
.pv-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pv-rot, .pv-walk {
  position: absolute;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid var(--hud-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 0 var(--hud-shadow);
  color: var(--sky-dark);
  font-size: 19px;
  font-weight: 800;
}
.pv-rot { bottom: 8px; }
.pv-rot-l { left: 8px; }
.pv-rot-r { right: 8px; }
.pv-walk { top: 8px; right: 8px; font-size: 17px; }
.pv-walk[aria-pressed='true'] { background: #fff1b8; border-color: var(--gold-dark); }
.pv-trying, .pv-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 60px);
  padding: 1px 9px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-tag { color: #c2185b; }

.slot-tabs {
  flex: none;
  display: flex;
  gap: 7px;
  padding: 10px 10px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-bottom: 2px solid var(--line);
  background: var(--cream-2);
}
.stab {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 54px;
  padding: 3px 8px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 0 var(--line);
  color: var(--text-soft);
  font-weight: 800;
}
.stab.active { border-color: var(--gold-dark); background: linear-gradient(180deg, #ffe36b, #ffc21a); box-shadow: 0 3px 0 var(--gold-dark); color: #6b3d00; }
.stab-ic { font-size: 20px; line-height: 1.1; }
.stab-lb { font-size: 12.5px; line-height: 1.1; white-space: nowrap; }
.stab-n { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 4px; border: 2px solid #fff; border-radius: 99px; background: var(--blue-dark); color: #fff; font-size: 11px; line-height: 17px; text-align: center; }
.stab-sets .stab-n { background: #c98d00; }

/* --- Chi tiết món đang chọn --- */
.detail { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.detail-name { font-size: 17px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.detail-hint { margin: 0; color: var(--text-soft); font-weight: 600; font-size: 14px; }
.detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.detail-set { padding: 3px 8px; border-radius: 10px; background: #fff6cf; color: #8a5a00; font-size: 13px; font-weight: 700; }
.detail-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px; border: 2px solid var(--line); border-radius: 99px; background: #fff; color: var(--text); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.chip-set { border-color: #f2c94c; background: linear-gradient(180deg, #fff8cf, #ffe98a); color: #7a5000; }
.chip-lv { border-color: #b7e39a; background: #eaf7df; color: var(--leaf-dark); }
.chip-bad { border-color: #f3b7aa; background: #ffe3dc; color: var(--red-dark); }
.chip-price { border-color: #f2d36b; background: #fff6cf; color: #8a5a00; }
.chip-g-m { border-color: #a9cff5; background: #e3f1ff; color: #1a5fa8; }
.chip-g-f { border-color: #f6b3d0; background: #ffe6f1; color: #c2185b; }
.chip-g-u { border-color: #b9e0c9; background: #e7f7ee; color: #23784a; }
.chip-sanh { border-color: #d9b6ff; background: #f5ecff; color: #6a2a8c; }
.chip-gift { border-color: #ffc0d6; background: #fff0f5; }

/* ================================================================ MÓN ĐỒ (lưới cửa hàng/tủ đồ) */
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; align-content: start; }
.item-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 138px;
  padding: 18px 6px 6px;
  border: 3px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 0 var(--line);
  text-align: center;
  transition: transform .08s;
}
.item-cell:hover { border-color: #f2c94c; }
.item-cell:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.item-cell.sel { border-color: #ffc21a; background: #fffbe6; box-shadow: 0 3px 0 var(--gold-dark), 0 0 0 3px rgba(255, 194, 26, .45); }
.item-cell.worn { background: #f1fbe9; }
.item-cell.sel.worn { background: #f6fbe0; }
.item-cell.dim .item-cv, .item-cell.dim .item-name { opacity: .5; filter: grayscale(.5); }
.item-cv { width: 64px; height: 64px; flex: none; }
.item-name { display: -webkit-box; min-height: 2.3em; overflow: hidden; font-size: 13px; font-weight: 800; line-height: 1.15; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.item-tags { position: absolute; top: 4px; left: 4px; right: 4px; display: flex; gap: 3px; pointer-events: none; }
.tg { padding: 0 5px; border-radius: 8px; font-size: 10.5px; font-weight: 800; line-height: 16px; }
.tg-m { background: #d6eaff; color: #1a5fa8; }
.tg-f { background: #ffe0ef; color: #c2185b; }
.tg-lv { margin-left: auto; background: #e2f5cf; color: var(--leaf-dark); }
.tg-lv.bad { background: #ffd9d2; color: var(--red-dark); }
.tg-set { background: #fff1b8; color: #8a5a00; }
.tg-lv + .tg-set { margin-left: 0; }
.item-tags .tg-set:first-child, .item-tags .tg-m + .tg-set, .item-tags .tg-f + .tg-set { margin-left: auto; }
.item-price { font-size: 12.5px; font-weight: 800; color: #8a5a00; white-space: nowrap; }
.item-price.bad { color: var(--red-dark); }
.item-price.owned { color: var(--leaf-dark); }

/* --- Cửa hàng: đầu bảng có NPC --- */
.shop-card { --accent: #4aa6ee; }
.shop-head { min-height: 68px; padding-left: 10px; }
.npc-cv { flex: none; width: 56px; height: 56px; border: 3px solid #fff; border-radius: 16px; background: linear-gradient(180deg, #fff, #ffeef6); box-shadow: 0 0 0 2px var(--ink); }
.npc-text { flex: 1; min-width: 0; }
.npc-line { margin: 0; overflow: hidden; color: #fff; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.npc-line b { font-weight: 800; }

/* --- Nhuộm tóc --- */
.dye-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 9px; }
.dye-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 92px; padding: 9px 4px 6px; border: 3px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 3px 0 var(--line); }
.dye-cell.sel { border-color: #ffc21a; background: #fffbe6; box-shadow: 0 3px 0 var(--gold-dark), 0 0 0 3px rgba(255, 194, 26, .45); }
.dye-cell.cur { background: #f1fbe9; }
.dye-sw { display: inline-block; width: 40px; height: 40px; flex: none; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25), inset 0 -5px 0 rgba(0, 0, 0, .15); }
.dye-sw-sm { width: 22px; height: 22px; border-width: 2px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }
.dye-name { font-size: 13px; font-weight: 800; line-height: 1.1; }
.dye-cur { font-size: 11px; font-weight: 800; color: var(--leaf-dark); }

/* --- Bộ đồ --- */
.set-card { margin-bottom: 10px; padding: 10px 12px; border: 3px solid var(--line); border-radius: 16px; background: #fff; }
.set-card.on { border-color: #ffc21a; background: linear-gradient(180deg, #fffbe0, #fff 60%); box-shadow: 0 0 0 3px rgba(255, 210, 63, .35); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px rgba(255, 210, 63, .2), 0 0 18px rgba(255, 210, 63, .55); } }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.set-name { font-size: 17px; font-weight: 800; }
.set-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin: 8px 0 6px; }
.set-item { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: 12px; background: #f6efe2; }
.set-item.own { background: #eaf7df; }
.set-item.worn { background: #d7f2c4; box-shadow: inset 0 0 0 2px #8fd16a; }
.set-cv { flex: none; width: 38px; height: 38px; }
.set-iname { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.15; }
.set-mark { flex: none; font-size: 12px; font-weight: 800; color: var(--leaf-dark); }
.set-item:not(.own) .set-mark { color: var(--text-soft); }
.set-desc { margin-bottom: 6px; font-size: 13.5px; font-weight: 700; color: #8a5a00; }

/* ================================================================ HÀNG DANH SÁCH (bảng nông trại) */
.row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 2px 0 var(--line); }
.row:last-child { margin-bottom: 0; }
.row.locked { background: #f4efe6; }
.row.locked .row-ic, .row.locked .row-name { opacity: .5; filter: grayscale(.6); }
.row-ic { flex: none; width: 44px; font-size: 32px; line-height: 1; text-align: center; }
.row-cv { flex: none; width: 56px; height: 46px; }
.row-info { flex: 1; min-width: 0; }
.row-name { font-size: 16px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.row-meta { font-size: 13px; line-height: 1.25; color: var(--text-soft); overflow-wrap: anywhere; }
.row-reason { font-size: 12.5px; font-weight: 700; color: var(--red-dark); }
.row-ok { font-size: 12.5px; font-weight: 700; color: var(--leaf-dark); }
.row-acts { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 60%; }
.empty-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 10px; color: var(--text-soft); font-weight: 700; text-align: center; }
.empty-box .big { display: block; font-size: 40px; line-height: 1; }
.empty-sub { font-size: 13.5px; font-weight: 600; }
.info-strip { margin-bottom: 10px; padding: 6px 12px; border: 2px solid #c3e5a4; border-radius: 12px; background: #e8f6da; color: var(--leaf-dark); font-size: 14px; font-weight: 700; }

/* --- Hàng xóm --- */
.nb-av { position: relative; flex: none; width: 50px; height: 50px; }
.nb-av canvas { width: 50px; height: 50px; border: 2px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #bfe9ff, #e8f8ff 60%, #a5dc78 61%); }
.dot { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #b7b0a4; }
.dot.on { background: #3fd04a; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tag { padding: 0 7px; border-radius: 8px; font-size: 12px; font-weight: 800; line-height: 1.6; }
.tag-lv { background: var(--lv); color: #fff; }
.tag-on { background: #e2f5cf; color: var(--leaf-dark); }
.tag-steal { background: #3d2b4f; color: #fff; }
.tag-help { background: #e2f5cf; color: var(--leaf-dark); }
.tag-here { background: #ffe9a8; color: #8a5a00; }

/* --- Hộp thư --- */
.log-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.log-row.unread { border-color: #f2d36b; background: #fff6cf; }
.log-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #eef3f8; font-size: 18px; }
.k-steal .log-ic { background: #e9dcf7; }
.k-help .log-ic { background: #dff3cf; }
.k-dog .log-ic { background: #ffe6c7; }
.k-pm .log-ic { background: #d8ecff; }
.k-gift .log-ic { background: #ffdcec; }
.k-farm .log-ic { background: #eaf3df; }
.log-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.log-msg { font-weight: 600; overflow-wrap: anywhere; }
.log-time { font-size: 12px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* --- Chọn hạt --- */
.seed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; align-content: start; }
.seed-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 9px; border: 3px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--line); text-align: center; }
.seed-card:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.seed-card .s-ic { font-size: 34px; line-height: 1.1; }
.seed-card .s-name { font-size: 15px; font-weight: 800; line-height: 1.15; }
.seed-card .s-meta { font-size: 12px; line-height: 1.25; color: var(--text-soft); }
.seed-card .s-have { font-size: 12.5px; font-weight: 800; color: var(--leaf-dark); }
.seed-card .s-have.none { color: #c2600a; }
.seed-card.selected { border-color: var(--leaf); background: #f2ffe8; box-shadow: 0 3px 0 var(--leaf-dark), 0 0 0 3px rgba(92, 184, 58, .3); }
.seed-card:disabled { background: #f1ece3; box-shadow: none; }
.seed-card:disabled .s-ic, .seed-card:disabled .s-name { opacity: .45; filter: grayscale(.7); }
.seed-card .s-lock { position: absolute; top: 6px; right: 6px; padding: 0 6px; border-radius: 8px; background: var(--wood); color: #fff; font-size: 11.5px; font-weight: 800; }

/* ================================================================ BẢN ĐỒ, ATM, NHÀ, THẺ */
.map-card { width: min(640px, 100%); }
.map-card .modal-head { --accent: #3fa36b; }
.map-body { background: repeating-linear-gradient(45deg, rgba(120, 180, 90, .08) 0 12px, transparent 12px 24px), #f4f9e8; }
.map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.map-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 132px;
  padding: 12px 12px 10px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), 0 4px 0 rgba(42, 26, 14, .45);
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  transition: transform .08s, filter .15s;
}
.map-tile:hover:not(:disabled) { filter: brightness(1.07); }
.map-tile:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), 0 1px 0 rgba(42, 26, 14, .45); }
.map-tile:disabled { cursor: default; }
.map-home { background: linear-gradient(160deg, #8fd35a, #3f9a2a); }
.map-shop { background: linear-gradient(160deg, #6cb4f4, #2f6fb8); }
.map-park { background: linear-gradient(160deg, #4fd1c5, #1f8a7f); }
.map-vip { background: linear-gradient(160deg, #e8b84a, #8a3c8c); }
.map-tile.here { box-shadow: inset 0 0 0 3px #fff, 0 4px 0 rgba(42, 26, 14, .45); }
.map-tile.locked { filter: grayscale(.55) brightness(.92); }
.map-ic { font-size: 34px; line-height: 1.1; }
.map-name { font-size: 18px; font-weight: 800; line-height: 1.15; }
.map-desc { font-size: 13px; font-weight: 600; line-height: 1.25; }
.map-flag { margin-top: auto; padding: 1px 9px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--text); font-size: 12px; font-weight: 800; text-shadow: none; }
.map-lock { color: var(--red-dark); white-space: normal; }
.map-foot { display: flex; justify-content: center; margin-top: 12px; }

.atm-screen { padding: 12px 14px; border: 3px solid #0a2a4c; border-radius: 14px; background: linear-gradient(180deg, #0f3d6e, #174f8c); box-shadow: inset 0 0 18px rgba(80, 200, 255, .35); color: #9ff3ff; text-align: center; }
.atm-label { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.atm-big { font-size: 30px; font-weight: 800; line-height: 1.15; color: #e4fdff; text-shadow: 0 0 10px rgba(120, 230, 255, .6); }
.stat-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.stat-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.stat-ic { flex: none; width: 24px; font-size: 18px; text-align: center; }
.stat-lb { flex: 1; min-width: 0; font-weight: 700; }
.stat-val { font-weight: 800; text-align: right; }
.atm-note { margin: 10px 2px 0; color: var(--text-soft); font-size: 13px; font-weight: 600; }

.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.big-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 12px; border: 3px solid var(--wood-dark); border-radius: 18px; background: linear-gradient(180deg, #ffe7b8, #f2c27e); box-shadow: 0 4px 0 var(--wood-shadow), inset 0 2px 0 rgba(255, 255, 255, .6); color: var(--wood-shadow); }
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-shadow); }
.big-ic { font-size: 36px; line-height: 1.1; }
.big-title { font-size: 17px; font-weight: 800; }
.big-sub { font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; }

.player-card { width: min(580px, 100%); }
.player-card .modal-head { --accent: #ff8fb8; }
.card-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: start; }
.card-pv {
  position: relative;
  height: 210px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 18px;
  box-shadow: 0 0 0 2px var(--line);
  background:
    radial-gradient(ellipse 55% 10% at 50% 90%, rgba(0, 0, 0, .18), transparent 70%),
    linear-gradient(180deg, #6cb4f4 0%, #b9e0ff 60%, #b4b4b4 61%, #9c9c9c 100%);
}
.card-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.card-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card-name { display: flex; align-items: center; gap: 8px; font-size: 23px; font-weight: 800; line-height: 1.1; }
.card-name .dot { position: static; flex: none; }
.card-nm { min-width: 0; overflow-wrap: anywhere; }
.card-sec { margin-top: 6px; color: var(--text-soft); font-size: 12.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.card-acts { flex-wrap: wrap; justify-content: center; }

/* ================================================================ RESPONSIVE */
/* Màn hẹp (điện thoại dọc): khối thông tin xuống hàng 2, chat thu thành nút 💬 khi có thanh công cụ */
@media (max-width: 600px) {
  .hud { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'bl . br' 'info banner banner'; column-gap: 8px; padding-left: calc(var(--safe-l) + 10px); padding-right: calc(var(--safe-r) + 10px); }
  .hud-info { max-width: min(236px, 60vw); height: 50px; padding-right: 8px; }
  .hud-portrait { width: 40px; height: 40px; }
  .hud-name { font-size: 14px; }
  .hud-row { font-size: 12px; gap: 5px; overflow: hidden; }     /* Lv · xu · lượng luôn nằm gọn trong thẻ */
  .xpbar { min-width: 80px; }
  .scene-banner { justify-self: end; margin-top: 5px; padding-left: 10px; font-size: 13.5px; min-height: 36px; }
  .scene-banner.area { padding-right: 10px; }
  .bt-long, .bh-lb { display: none; }
  .bt-short { display: inline; }
  .menu-panel { left: calc(var(--safe-l) + 10px); }
  .emote-panel { right: calc(var(--safe-r) + 10px); }
  .bottom-bar { padding-left: calc(var(--safe-l) + 10px); padding-right: calc(var(--safe-r) + 10px); gap: 8px; }
  .game-screen.has-tools .chat-bar { display: none; }
  .game-screen.has-tools .chat-open-btn { display: grid; }
  .game-screen.has-tools.chat-open .chat-bar {
    display: flex;
    position: absolute;
    left: calc(var(--safe-l) + 10px);
    right: calc(var(--safe-r) + 10px);
    bottom: calc(100% + 8px);
    max-width: none;
  }
  .game-screen.has-tools.chat-open .chat-open-btn { background: #eef6ff; border-color: var(--hud-icon); }
  .chat-log { left: calc(var(--safe-l) + 10px); width: calc(100vw - 20px - var(--safe-l) - var(--safe-r)); }
  .chat-send { padding: 0 12px; }
  .toolbar { gap: 4px; padding: 5px 5px 7px; border-radius: 18px; }
  .tool { width: 46px; height: 52px; border-radius: 13px; }
  .tool .ic { font-size: 21px; }
  .tool .lb { font-size: 9px; }
}
@media (max-width: 640px) {
  .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .side { flex-direction: row; align-items: flex-start; max-height: 40vh; padding: 8px; border-right: 0; border-bottom: 2px dashed var(--line); }
  .pv-box { width: 128px; height: 158px; }
  .pv-rot, .pv-walk { width: 32px; height: 32px; font-size: 15px; }
  .pv-trying, .pv-tag { display: none; }
  .side-info { flex: 1; }
  .slot-tabs { padding: 9px 8px 7px; gap: 6px; }
  .stab { min-width: 58px; min-height: 48px; padding: 2px 6px; }
  .stab-lb { font-size: 11.5px; }
  .main-body { padding: 8px; }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
  .item-cell { min-height: 124px; padding-top: 17px; }
  .item-cv { width: 54px; height: 54px; }
  .modal-xl { height: 100%; }
  .shop-head { min-height: 60px; }
  .npc-cv { width: 46px; height: 46px; }
  .modal-title { font-size: 19px; }
  .head-chip { font-size: 13px; padding: 1px 8px; }
}
@media (max-width: 480px) {
  .login-wrap { padding-top: calc(var(--safe-t) + 34px); }
  .creator { flex-direction: column; align-items: stretch; }
  .creator-preview { flex-direction: row; justify-content: center; }
  .preview-cv { width: 124px; height: 152px; }
  .opt-label { width: 70px; font-size: 13px; }
  .sw { width: 24px; height: 24px; }
  .row { padding: 7px 8px; gap: 8px; }
  .row-ic { width: 36px; font-size: 28px; }
  .row-acts { max-width: 52%; }
  .row-multi { flex-wrap: wrap; }
  .row-multi .row-acts { flex: 1 1 100%; max-width: none; padding-left: 44px; }
  .modal { padding-left: calc(var(--safe-l) + 8px); padding-right: calc(var(--safe-r) + 8px); }
  .seed-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .tabs-panel { gap: 4px; }
  .tabs-panel .tab { padding: 4px; font-size: 13.5px; }
  .card-layout { grid-template-columns: 124px minmax(0, 1fr); gap: 10px; }
  .card-pv { height: 166px; }
  .card-name { font-size: 20px; }
  .home-grid { gap: 8px; }
  .big-ic { font-size: 30px; }
  .big-title { font-size: 15px; }
  .map-grid { gap: 8px; }
  .map-tile { min-height: 118px; padding: 10px; }
  .map-name { font-size: 16px; }
  .map-desc { font-size: 12px; }
}
/* Màn thấp (điện thoại ngang) */
@media (max-height: 520px) {
  .hud { column-gap: 10px; }
  .scene-banner { min-height: 34px; font-size: 14px; }
  .bottom-bar { padding-bottom: calc(var(--safe-b) + 6px); }
  .toolbar { padding: 4px 6px 5px; gap: 5px; border-radius: 18px; }
  .tool { height: 42px; width: 46px; border-radius: 12px; }
  .tool .lb { display: none; }
  .tool .ic { font-size: 22px; }
  .chat-form, .chat-hist, .chat-open-btn { height: 42px; }
  .chat-hist, .chat-open-btn { width: 42px; }
  .chat-send { height: 34px; }
  .chat-log { height: min(56vh, 240px); min-height: 120px; }
  .login-wrap { padding-top: calc(var(--safe-t) + 12px); }
  .tagline { margin: 6px 0 10px; }
  .modal { padding-top: calc(var(--safe-t) + 6px); padding-bottom: calc(var(--safe-b) + 6px); }
  .modal-head { min-height: 46px; padding-top: 4px; padding-bottom: 4px; }
  .modal-title { font-size: 18px; }
  .modal-xl { height: 100%; }
  .split { grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: none; }
  .side { flex-direction: column; max-height: none; border-right: 2px dashed var(--line); border-bottom: 0; }
  .pv-box { width: auto; height: 150px; }
  .shop-head { min-height: 50px; }
  .npc-cv { width: 40px; height: 40px; border-radius: 12px; }
  .npc-line { display: none; }
  .stab { flex-direction: row; gap: 4px; min-height: 40px; }
  .stab-ic { font-size: 17px; }
  .slot-tabs { padding: 8px 8px 6px; }
  .item-cell { min-height: 118px; }
  .card-pv { height: 160px; }
  .emo-btn, .pose-btn { min-height: 58px; }
  .map-tile { min-height: 100px; }
}
@media (max-height: 520px) and (max-width: 640px) {
  .split { grid-template-columns: 150px minmax(0, 1fr); }
}
/* Điện thoại ngang hẹp (≤ 600 × ≤ 520): HUD một hàng như màn ngang rộng — hai hàng sẽ che nóc nhà / biển quầy */
@media (max-height: 520px) and (max-width: 600px) {
  .hud { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: 'bl info banner br'; }
  .hud-info { max-width: 170px; height: var(--hb); }
  .scene-banner { margin-top: 4px; }
}
/* Màn lớn */
@media (min-width: 1200px) and (min-height: 700px) {
  .hud-info { max-width: 320px; padding-right: 16px; }
  .xpbar { height: 9px; }
  .tool { width: 64px; height: 62px; }
  .tool .ic { font-size: 28px; }
  .tool .lb { font-size: 11.5px; }
  .chat-form, .chat-hist { height: 50px; }
  .chat-hist { width: 50px; }
  .chat-bar { max-width: 540px; }
  .menu-panel { width: 262px; }
  .mn { font-size: 16.5px; min-height: 46px; }
  .split { grid-template-columns: 300px minmax(0, 1fr); }
  .pv-box { height: 290px; }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .item-cv { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ================================================================ v3 — NỀN TẢNG (loader, lượng, gói, đồ có hạn, hội thoại) */
/* Lớp nổi "chạm xuyên" của gói (dải gợi ý / hướng dẫn / thông báo nằm trên thế giới): chạm vào phần trống đi thẳng
   xuống canvas để nhân vật vẫn đi lại được; chỉ nút, liên kết, ô nhập và phần tử [data-tap] bên trong nhận chạm.
   Dùng: el.classList.add('tap-through') — docs/PLATFORM.md §17.5 */
.tap-through { pointer-events: none; }
.tap-through button, .tap-through a, .tap-through input, .tap-through select, .tap-through textarea, .tap-through [data-tap] { pointer-events: auto; }

/* --- Khung tải trò chơi trong thẻ đăng nhập (loader.js) --- */
.boot-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 2px solid #b9df9a;
  border-radius: 14px;
  background: linear-gradient(180deg, #f6fff0, #eaf8dd);
  transition: opacity .5s, max-height .6s, margin .6s, padding .6s;
  max-height: 420px;
  overflow: hidden;
}
.boot-card.done { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
.boot-card.hidden { display: none; }
.boot-card.err { border-color: var(--red); background: #fff1ee; }
.boot-head { display: flex; align-items: center; gap: 8px; }
.boot-spin { display: inline-block; font-size: 20px; animation: bootSpin 2.4s linear infinite; }
.boot-card.done .boot-spin, .boot-card.err .boot-spin { animation: none; }
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-spin { animation: none; } }
.boot-title { flex: 1; min-width: 0; font-size: 15px; color: #2f6b1a; }
.boot-card.err .boot-title { color: var(--red); }
.boot-pct { font-size: 16px; font-weight: 900; color: #2f6b1a; font-variant-numeric: tabular-nums; }
.boot-bar { display: block; width: 100%; height: 12px; overflow: hidden; border-radius: 99px; background: #dfe9cf; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.boot-bar i { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(180deg, #8ee060, #4caf2a); transition: width .25s; }
.boot-card.err .boot-bar i { background: var(--red); }
.boot-text { font-size: 13px; font-weight: 700; color: var(--text-soft); overflow-wrap: anywhere; }
.boot-mods { display: flex; flex-wrap: wrap; gap: 4px; max-height: 120px; overflow-y: auto; }
.boot-mod { padding: 1px 8px; border: 1.5px solid #d8cfb8; border-radius: 99px; background: #fff; font-size: 11.5px; font-weight: 700; color: #8a7a60; white-space: nowrap; }
.boot-mod.load { border-color: #f2b705; background: #fff7d6; color: #6b4f00; }
.boot-mod.ok { border-color: #8ccf63; background: #effbe5; color: #2f6b1a; }
.boot-mod.err { border-color: var(--red); background: #ffe9e5; color: #a3261a; }
#bootReload { align-self: flex-start; }
.btn:disabled { cursor: not-allowed; }

/* --- HUD: lượng --- */
.hud-luong { display: inline-flex; align-items: center; gap: 2px; color: #2f6fb8; font-weight: 800; }
.hud-luong.bump { animation: bump .45s; }
.head-luong { color: #2f6fb8; }

/* --- Nút HUD của gói (UI.registerHudButton) --- */
.hud-emo { font-size: calc(var(--hb) * .46); line-height: 1; }
.hud-corner { position: absolute; z-index: 12; display: flex; flex-direction: column; gap: calc(var(--hb) * .18); pointer-events: none; }
.hud-corner > * { pointer-events: auto; }
.hud-corner:empty { display: none; }
.hud-bl { left: calc(var(--safe-l) + 14px); bottom: calc(var(--bar-top, 70px) + 12px); }
.hud-br { right: calc(var(--safe-r) + 14px); bottom: calc(var(--bar-top, 70px) + 12px); }
.hud-corner .hud-btn { --hb: clamp(42px, min(9vh, 12vw), 64px); }

/* --- Menu: mục của gói --- */
.mn-mod .mn-lb { flex: 1; }

/* --- Chat: kênh của gói --- */
.tabs-mini.many { overflow-x: auto; scrollbar-width: none; }
.tabs-mini.many::-webkit-scrollbar { display: none; }
.tabs-mini.many .tab { flex: none; padding-left: 10px; padding-right: 10px; }
.chat-chan {
  flex: none;
  width: 36px;
  height: 36px;
  margin-left: -6px;
  padding: 0;
  border: 2px solid #c9d6e2;
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
  line-height: 1;
}
.chat-bar.ch-mode .chat-form { border-color: #f2b33d; background: #fffbea; }
.cl-chan { font-weight: 600; }
.cl-chtag { color: #b46a00; }

/* --- Cửa hàng: thời hạn (đồ có hạn) --- */
.dur-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 2px; }
.dur-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-height: 46px;
  padding: 4px 2px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 0 var(--line);
  color: var(--text);
}
.dur-btn.on { border-color: #ffc21a; background: #fff6cf; box-shadow: 0 2px 0 var(--gold-dark), 0 0 0 2px rgba(255, 194, 26, .45); }
.dur-btn.poor .dur-pr { color: var(--red-dark); }
.dur-lb { font-size: 12.5px; font-weight: 800; }
.dur-pr { font-size: 12px; font-weight: 800; color: #8a5a00; white-space: nowrap; }
.item-price.luong { color: #2f6fb8; }

/* --- Tủ đồ: hạn dùng, cấp nâng --- */
.item-lv { position: absolute; top: 22px; left: 6px; padding: 0 5px; border-radius: 8px; background: linear-gradient(180deg, #fff59a, #ffc21a); color: #6b3d00; font-size: 11.5px; font-weight: 800; line-height: 17px; box-shadow: 0 1px 0 var(--gold-dark); }
.item-exp { font-size: 11px; font-weight: 800; color: #2f7fd0; white-space: nowrap; }
.item-exp.soon, .detail-exp.soon { color: var(--red-dark); }
.detail-lv { color: #8a5a00; font-weight: 800; }

/* --- Bản đồ: vùng, giá vé, điểm đến của gói --- */
.map-region { margin: 12px 2px 6px; font-weight: 800; font-size: 14px; color: var(--leaf-dark); text-transform: uppercase; letter-spacing: .4px; }
.map-region:first-child { margin-top: 0; }
.map-tile:not(.map-home):not(.map-shop):not(.map-park):not(.map-vip) { background: linear-gradient(160deg, #9aa8ff, #4d5bc0); }
.map-price { padding: 0 8px; border-radius: 99px; background: rgba(0, 0, 0, .25); font-size: 12px; font-weight: 800; }

/* --- Hội thoại NPC (UI.dialog) --- */
.dlg-modal { align-items: flex-end; padding-bottom: calc(var(--safe-b) + 18px); }
.dlg-card { width: min(560px, 100%); padding: 14px 14px 12px; background: linear-gradient(180deg, #fffdf6, var(--cream)); }
.dlg-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; font-size: 16px; }
.dlg-main { display: flex; align-items: flex-start; gap: 12px; padding-right: 36px; }
.dlg-pv { flex: none; width: 72px; height: 72px; border: 3px solid #fff; border-radius: 18px; background: linear-gradient(180deg, #bfe9ff, #e8f8ff 62%, #a5dc78 63%); box-shadow: 0 0 0 2px var(--ink); }
.dlg-say { flex: 1; min-width: 0; }
.dlg-name { margin: 0 0 2px; font-size: 18px; font-weight: 800; -webkit-text-stroke: 4px var(--npc-stroke, #0B4A5A); paint-order: stroke fill; }
.dlg-text { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); }
.dlg-opts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* --- Bảng của gói (UI.registerPanel) --- */
.panel-modal .modal-card { --accent: #4aa6ee; }

@media (max-width: 600px) {
  .hud-bl { left: calc(var(--safe-l) + 10px); }
  .hud-br { right: calc(var(--safe-r) + 10px); }
  .dlg-pv { width: 56px; height: 56px; }
  .dlg-text { font-size: 15px; }
  .hud-row .hud-luong { display: inline-flex; }
}
@media (max-height: 520px) {
  .dlg-modal { padding-bottom: calc(var(--safe-b) + 8px); }
  .dlg-card { padding: 10px; }
  .dlg-opts { margin-top: 8px; }
}
/* ================================================================ v3 TÍCH HỢP: MENU DẠNG LƯỚI THEO NHÓM
   (~40 mục của lõi + 13 gói: mỗi nhóm một lưới ô biểu tượng + nhãn ngắn; nhóm trống tự ẩn) */
.menu-panel.mn-tiles {
  width: min(440px, calc(100vw - var(--safe-l) - var(--safe-r) - 20px));
  gap: 0;
  padding: 6px 8px 8px;
}
.mn-sec { padding: 2px 0 4px; }
.mn-sec + .mn-sec { border-top: 2px dashed #ecd9ae; padding-top: 6px; }
.mn-sec-t { margin: 0 4px 3px; color: var(--text-soft); font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.mn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.mn-tiles .mn {
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  min-height: 68px;
  padding: 7px 3px 5px;
  font-size: 12.5px;
  line-height: 1.12;
  text-align: center;
}
.mn-tiles .mn-ic { width: auto; font-size: 25px; line-height: 1.05; }
.mn-tiles .mn-lb, .mn-tiles .mn-mod .mn-lb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: none; max-width: 100%; overflow-wrap: anywhere; }
.mn-tiles .mn-note { display: none; }
.mn-tiles .mn-badge { position: absolute; top: 2px; right: 4px; margin: 0; min-width: 19px; height: 19px; line-height: 19px; padding: 0 5px; font-size: 11px; }
.mn-tiles .mn-sec[data-g="sys"] .mn { min-height: 58px; }
@media (max-width: 380px) {
  .mn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-height: 520px) {
  .mn-tiles .mn { min-height: 56px; padding: 4px 2px 3px; font-size: 12px; }
  .mn-tiles .mn-ic { font-size: 21px; }
  .mn-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .menu-panel.mn-tiles { width: min(600px, calc(100vw - var(--safe-l) - var(--safe-r) - 20px)); }
}

/* ================================================================ v3 TÍCH HỢP: CỘT NÚT HUD CỦA GÓI
   Cột dưới phải chỉ hiện số nút vừa chiều cao màn; phần dư gom vào nút "⋯" (mở bảng nhỏ liệt kê các nút còn lại) */
.hud-mod.hud-ovf { display: none; }
.hud-more-btn .hud-emo { font-size: calc(var(--hb) * .5); font-weight: 900; letter-spacing: 1px; }
.hud-more-panel {
  right: calc(var(--safe-r) + 14px + var(--hb-col, 64px) + 10px);
  bottom: calc(var(--bar-top, 70px) + 12px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 236px;
  max-height: calc(100% - var(--hud-bottom, 80px) - var(--bar-top, 70px) - 30px);
  padding: 6px;
  overflow-y: auto;
}
.hud-more-panel .mn { min-height: 44px; }

/* --- Thẻ người chơi: hàng nút nhỏ theo nhóm của gói (registerProfileAction({ group })) --- */
.card-act-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; width: 100%; padding-top: 2px; }
.card-act-row .btn-sm { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.card-act-t { color: var(--text-soft); font-size: 12.5px; font-weight: 800; }
.card-act-safety .btn-sm { min-height: 32px; font-size: 13px; opacity: .92; }