:root {
  --bg: #0f0d1a;
  --bg-panel: #171428;
  --bg-card: #201c38;
  --border: #322c52;
  --text: #e8e4ff;
  --text-dim: #9891c4;
  --gold: #f1c84c;
  --tier-b: #4aa3ff;
  --tier-a: #b968f7;
  --tier-s: #f1c84c;
  --tier-m: #ff4d4d;
  --tier-u: #ff9d3c;
  --tier-e: #a3122b;
  --hp-high: #3ecf6e;
  --hp-mid: #f1c84c;
  --hp-low: #ff4d4d;
  --accent: #ff5470;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Cac font emoji chuyen dung o cuoi stack — thieu chung la nguyen nhan pho
     bien nhat khien emoji hien "o vuong" (tofu) tren nhieu may/trinh duyet:
     Segoe UI/Helvetica/Arial KHONG co day du glyph mau cho emoji, trinh
     duyet chi tu dong fallback sang font he thong co emoji NEU font do co
     mat trong stack. */
  font-family: "Segoe UI", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  background: radial-gradient(circle at top, #1b1733 0%, var(--bg) 60%);
  color: var(--text);
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ===== Auth screen ===== */
#authScreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.auth-box h1 {
  margin: 0 0 4px;
  font-size: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, var(--gold), var(--tier-a));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kcoin-icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

.auth-box p.sub {
  margin: 0 0 24px;
  color: var(--text-dim);
  font-size: 13px;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #100e1e;
  color: var(--text);
  font-size: 14px;
}

.field input:focus {
  outline: none;
  border-color: var(--gold);
}

.btn {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: transform .1s ease, opacity .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  width: 100%;
  background: linear-gradient(90deg, var(--gold), #ffb03c);
  color: #241a00;
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  text-decoration: underline;
  padding: 8px;
}

.catalog-sort-btn, .catalog-tier-btn, .collection-sort-btn, .equip-sort-btn, .team-sort-btn, .upgrade-sort-btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
}
.catalog-sort-btn.active, .catalog-tier-btn.active, .collection-sort-btn.active, .equip-sort-btn.active, .team-sort-btn.active, .upgrade-sort-btn.active {
  border-color: var(--gold);
  color: var(--gold);
}

.error-msg {
  color: var(--accent);
  font-size: 13px;
  margin-top: 10px;
  min-height: 16px;
}

/* ===== Game shell ===== */
#gameScreen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  background: linear-gradient(90deg, var(--gold), var(--tier-a));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topbar .stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 14px;
}

.caoluong-badge {
  color: var(--gold);
  font-weight: 700;
}

.kcoin-badge { color: var(--tier-b); }

.logout-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
}

.tab-categories {
  display: flex;
  gap: 8px;
  padding: 12px 20px 0;
  background: var(--bg-panel);
}

.category-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.category-btn.active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(241,200,76,0.08);
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 10px 20px 0;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tab-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  flex: 0 0 auto;
  white-space: nowrap;
}

.tab-btn.active {
  color: var(--text);
  background: var(--bg);
}

.view {
  flex: 1;
  padding: 24px;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

/* ===== Gacha ===== */
.gacha-panel {
  text-align: center;
  padding: 40px 20px;
}

.gacha-panel .desc {
  color: var(--text-dim);
  margin-bottom: 24px;
}

.gacha-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-summon {
  background: linear-gradient(135deg, var(--tier-a), #6b4fd6);
  color: white;
  padding: 14px 26px;
  border-radius: 12px;
  font-size: 15px;
}

.summon-results {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.result-card {
  animation: popIn .35s ease;
}

@keyframes popIn {
  from { transform: scale(0.4) rotate(-6deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ===== Hero card ===== */
.hero-card {
  /* Gradient nhe thay vi mau phang --bg-card — giup card noi bat hon khoi
     nen trang (--bg) tren man hinh lon, thay vi bi "chim" vao nhau vi ca 2
     deu la sac tim rat toi. */
  background: linear-gradient(160deg, #2a2450 0%, var(--bg-card) 100%);
  border-radius: 12px;
  padding: 12px;
  width: 130px;
  border: 2px solid var(--border);
  text-align: center;
  position: relative;
}

.hero-card.tier-B { border-color: var(--tier-b); box-shadow: 0 0 14px -6px var(--tier-b); }
.hero-card.tier-A { border-color: var(--tier-a); box-shadow: 0 0 14px -6px var(--tier-a); }
.hero-card.tier-S { border-color: var(--tier-s); box-shadow: 0 0 18px -4px var(--tier-s); }
.hero-card.tier-M { border-color: var(--tier-m); box-shadow: 0 0 18px -4px var(--tier-m); }
.hero-card.tier-U { border-color: var(--tier-u); box-shadow: 0 0 18px -4px var(--tier-u); }
.hero-card.tier-E { border-color: var(--tier-e); box-shadow: 0 0 18px -4px var(--tier-e); }

.hero-card .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #10101c;
}

.tier-B .avatar { background: var(--tier-b); }
.tier-A .avatar { background: var(--tier-a); }
.tier-S .avatar { background: var(--tier-s); }
.tier-M .avatar { background: var(--tier-m); }
.tier-U .avatar { background: var(--tier-u); }
.tier-E .avatar { background: var(--tier-e); color: #fff; }

/* Anh avatar that (neu hero co avatarUrl — xem heroAvatars.js) thay cho chu
   cai dau: fill tron kin khung, khong con background mau tier (chu cai dau
   van fallback nguyen background mau tier khi chua co anh). */
.hero-card .avatar img.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hero-card .name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  min-height: 30px;
}

.hero-card .tier-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 2px;
}

.hero-card .stars {
  color: var(--gold);
  font-size: 13px;
  margin-top: 4px;
}

.hero-card.selected {
  outline: 3px solid var(--gold);
}

.hero-card.selectable { cursor: pointer; }

.hero-card-detailed {
  width: 200px;
  text-align: left;
}

.hero-card-detailed .avatar,
.hero-card-detailed .name,
.hero-card-detailed .tier-tag,
.hero-card-detailed .stars {
  text-align: center;
}

.hero-stats {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

.hero-skills {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* Man hinh lon co du cho — phong to them chu cho de doc thay vi giu nguyen
   kich thuoc nho toi uu cho mobile. */
@media (min-width: 1000px) {
  .hero-card-detailed { width: 220px; }
  .hero-card-detailed .name { font-size: 15px; }
  .hero-card-detailed .tier-tag { font-size: 12.5px; }
  .hero-card-detailed .hero-stats { font-size: 15px; }
  .hero-card-detailed .hero-skills { font-size: 13px; }
  .hero-card-detailed .hero-equip { font-size: 13px; }
}

.hero-equip {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

.duplicate-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--accent);
  color: white;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 10px;
}

/* Emoji phe phai (FACTION_ICON) — goc trai tren, doi dien duplicate-badge o
   goc phai, de nhan ra ngay khong can doc chu "· Ten Phe Phai". */
.faction-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 22px;
  height: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ===== Upgrade / Mutate panel ===== */
.upgrade-panel {
  margin-top: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

/* ===== Xep Hang: thong tin/danh dau ben trai, bang xep hang ben phai ===== */
.rank-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.rank-main { flex: 2; min-width: 0; }
.rank-sidebar { flex: 1; min-width: 220px; }

@media (max-width: 760px) {
  .rank-layout { flex-direction: column; }
}

.leaderboard-entry {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  text-align: left;
}

.leaderboard-entry.me { border-color: var(--gold); }
.leaderboard-entry .name { font-weight: 700; font-size: 13px; }
.leaderboard-entry .tier-tag { font-size: 11px; color: var(--text-dim); margin: 2px 0; }
.leaderboard-entry .qty { font-size: 12px; color: var(--gold); }

/* ===== Collection / grid ===== */
.hero-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ===== Inventory ===== */
.item-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.item-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  width: 130px;
  text-align: center;
}

/* Vien mau theo tier — chi trang bi (equipmentData.js chi co B/A/S/M, khong
   co U/E) moi duoc gan class tier-X, cac .item-card khac (Kho Do/Cua Hang)
   khong co class nay nen khong bi anh huong. */
.item-card.tier-B { border-color: var(--tier-b); box-shadow: 0 0 14px -6px var(--tier-b); }
.item-card.tier-A { border-color: var(--tier-a); box-shadow: 0 0 14px -6px var(--tier-a); }
.item-card.tier-S { border-color: var(--tier-s); box-shadow: 0 0 18px -4px var(--tier-s); }
.item-card.tier-M { border-color: var(--tier-m); box-shadow: 0 0 18px -4px var(--tier-m); }

.item-card.selected { outline: 3px solid var(--gold); }

/* The Nen (Thoi Nen) — the cong ty rong hon .item-card mac dinh de du cho
   dong lich su gia 5 phien gan nhat khong bi vo dong qua nhieu. */
.market-card { width: 220px; text-align: left; }
.market-card .name { min-height: auto; }
.market-chart { width: 100%; height: 46px; display: block; margin: 6px 0 4px; }

/* Luoi Thoi Nen rieng — 2 cot co dinh (6 cong ty = 3 hang ngang) thay vi
   flex-wrap tu do nhu cac luoi item-card khac, the/do thi to hon de de nhin
   xu huong gia hon. Dung ID de thang ca .item-card width: 108px o mobile
   breakpoint ben duoi. */
#marketCompanyGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

#marketCompanyGrid .market-card {
  width: auto;
  padding: 18px;
}

#marketCompanyGrid .name { font-size: 16px; }
#marketCompanyGrid .qty { font-size: 20px; }
#marketCompanyGrid .market-chart { height: 100px; margin: 10px 0 8px; }

.item-card .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: var(--bg);
  overflow: hidden;
}

.item-card .avatar img.item-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.item-card .name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  min-height: 30px;
}

.item-card .qty {
  color: var(--gold);
  font-size: 13px;
  margin-top: 4px;
  font-weight: 700;
}

.item-card .price {
  color: var(--gold);
  font-size: 12px;
  margin-top: 4px;
  font-weight: 700;
}

.item-card .shop-qty {
  width: 100%;
  margin-top: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #100e1e;
  color: var(--text);
  font-size: 12px;
  text-align: center;
}

.item-card .shop-action-btn {
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 12px;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 24px 0 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===== Team builder ===== */
.team-slots {
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
}

.team-slot {
  width: 130px;
  height: 168px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 12px;
}

.empty-hint {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 30px;
}

/* ===== Battle animation (dung chung cho Xep Hang / Pho Ban) ===== */
.battle-stage {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-top: 14px;
}

.battle-columns {
  display: flex;
  gap: 20px;
}

.battle-side {
  flex: 1;
}

.battle-side h3 {
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.unit-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-left: 3px solid var(--border);
  transition: opacity .2s ease;
}

.unit-row.dead { opacity: 0.25; }

/* Khung phat sang cho unit VUA ra don trong khung hinh hien tai (xem
   extractActingKey() trong app.js) — chi ton tai trong 1 frame vi toan bo
   sideA/sideB duoc innerHTML lai moi frame, khong can code don dep rieng. */
.unit-row.acting {
  border-left-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(241,200,76,0.55);
  animation: actingPulse 0.5s ease-in-out infinite alternate;
}

@keyframes actingPulse {
  from { box-shadow: 0 0 0 1px var(--gold), 0 0 6px rgba(241,200,76,0.35); }
  to   { box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(241,200,76,0.75); }
}

/* So HP bay len khi unit an/mat mau (xem spawnDamagePopup() trong app.js) */
.dmg-popup {
  position: absolute;
  top: 2px;
  right: 10px;
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
  z-index: 5;
  animation: dmgFloat 0.9s ease-out forwards;
}

.dmg-popup.dmg { color: var(--hp-low); text-shadow: 0 0 6px rgba(255,77,77,0.55); }
.dmg-popup.heal { color: var(--hp-high); text-shadow: 0 0 6px rgba(62,207,110,0.55); }

@keyframes dmgFloat {
  0%   { opacity: 0; transform: translateY(2px) scale(0.8); }
  15%  { opacity: 1; transform: translateY(-2px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

.unit-row .u-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #10101c;
}

.unit-row.tier-B .u-icon { background: var(--tier-b); }
.unit-row.tier-A .u-icon { background: var(--tier-a); }
.unit-row.tier-S .u-icon { background: var(--tier-s); }
.unit-row.tier-M .u-icon { background: var(--tier-m); }
.unit-row.tier-U .u-icon { background: var(--tier-u); }
.unit-row.tier-E .u-icon { background: var(--tier-e); color: #fff; }

.unit-info { flex: 1; min-width: 0; }

.unit-name {
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

.hp-bar-bg {
  height: 8px;
  border-radius: 4px;
  background: #0c0a17;
  overflow: hidden;
  margin-top: 4px;
}

.hp-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .35s ease, background-color .35s ease;
}

.round-label {
  text-align: center;
  font-weight: 700;
  color: var(--gold);
  margin: 16px 0 10px;
  font-size: 14px;
}

.battle-log {
  margin-top: 14px;
  background: #0c0a17;
  border-radius: 10px;
  padding: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  max-height: 180px;
  overflow-y: auto;
  color: var(--text-dim);
}

.battle-log div { animation: fadeIn .25s ease; }

/* To mau tung dong log theo loai skill (xem classifyLogLine() trong app.js) */
.log-death { color: var(--hp-low); font-weight: 800; }
.log-crit { color: #ff9d3c; font-weight: 700; }
.log-heal { color: var(--hp-high); }
.log-counter { color: var(--tier-a); }
.log-defense { color: #7ecbff; }
.log-cleanse { color: var(--gold); }
.log-cc { color: #6fd1ff; }
.log-dot { color: var(--tier-a); }
.log-fire { color: #ff7a45; }
.log-blood { color: #ff6b6b; }
.log-utility { color: var(--gold); }
.log-dodge { color: var(--text-dim); font-style: italic; }
.log-damage { color: #ffb3b3; }
.log-attack { color: var(--text); }
.log-default { color: var(--text-dim); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.battle-result {
  text-align: center;
  margin-top: 18px;
  padding: 18px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 800;
}

.battle-result.win { background: rgba(62,207,110,0.12); color: var(--hp-high); }
.battle-result.lose { background: rgba(255,77,77,0.12); color: var(--hp-low); }
.battle-result.draw { background: rgba(241,200,76,0.12); color: var(--gold); }

@media (max-width: 640px) {
  .team-slots { flex-wrap: wrap; }
  .battle-columns { flex-direction: column; }

  .view { padding: 14px; }

  .topbar { padding: 10px 14px; }
  .topbar .brand { font-size: 16px; }
  .topbar .stats { font-size: 12.5px; gap: 8px 10px; }
  .logout-btn { padding: 5px 8px; font-size: 11px; }

  .tabs { padding: 8px 14px 0; gap: 2px; }
  .tab-btn { padding: 9px 12px; font-size: 13px; }

  .tab-categories { padding: 10px 14px 0; gap: 6px; }
  .category-btn { padding: 8px 14px; font-size: 13px; }

  .rank-sidebar { min-width: 0; }
  .mono-sidebar { min-width: 0; }
}

@media (max-width: 380px) {
  .hero-card, .item-card, .team-slot { width: 108px; }
  .hero-card .avatar, .item-card .avatar { width: 46px; height: 46px; font-size: 18px; }
  .hero-card-detailed { width: 100%; max-width: 240px; }
}

/* ===== Co Ty Chuoi (Monopoly) ===== */
.mono-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.mono-main { flex: 1.6; min-width: 0; }
.mono-sidebar { flex: 1; min-width: 260px; max-height: 720px; overflow-y: auto; padding-right: 4px; }

/* Ban co can nhieu chieu ngang hon khung .view mac dinh (1000px) de 60 o du
   lon hien duoc them thong tin (gia/nha) — chi noi len view nay. */
#viewMonopoly { max-width: 1320px; }

@media (max-width: 900px) {
  /* align-items:flex-start o .mono-layout lam cross-axis (ngang) khi doi
     sang column khong con stretch nua — .mono-main shrink-to-fit ve gan 0,
     khien .mono-board (width:100% cua .mono-main) khong co gi de tinh %
     nen sup xuong con ~2px thay vi thu nho theo man hinh. Ep stretch lai
     khi da la column. */
  .mono-layout { flex-direction: column; align-items: stretch; }
  .mono-sidebar { max-height: none; }
}

/* Ban co 60 o xep vien hinh vuong 16x16 (4*(16-1)=60, khop BOARD_SIZE) — tinh
   toa do tung o qua monoTileCoords() trong app.js, dat bang % tuyet doi thay
   vi CSS Grid de tranh cac hang/cot giua khong co noi dung co gian sai. */
.mono-board {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.mono-tile {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--mono-tier-color, var(--border));
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1px;
  border-radius: 4px;
  cursor: pointer;
  transition: filter .12s ease;
}

.mono-tile:hover { filter: brightness(1.25); z-index: 5; }

.mono-tile.mono-special { background: var(--bg-panel); }

.mono-tile.mono-mine { box-shadow: inset 0 0 0 2px var(--hp-high); }
.mono-tile.mono-other { box-shadow: inset 0 0 0 2px var(--accent); }

.mono-tile.here {
  outline: 2px solid var(--gold);
  z-index: 3;
}

.mono-emoji { font-size: 20px; line-height: 1; }

.mono-price {
  font-size: 9px;
  line-height: 1.2;
  margin-top: 2px;
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
}

.mono-houses {
  font-size: 8px;
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
}

.mono-token {
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 13px;
  z-index: 4;
  animation: actingPulse 0.6s ease-in-out infinite alternate;
}

.mono-tile-info {
  margin-top: 14px;
}

/* Badge dem so nguoi choi KHAC dang dung o 1 o (xem playersByTile trong
   app.js) — khac .mono-token (chi rieng vi tri cua BAN), dat goc doi dien
   de khong de len nhau khi ca 2 cung xuat hien tren cung 1 o. */
.mono-others {
  position: absolute;
  bottom: -5px;
  left: -4px;
  font-size: 8px;
  line-height: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 3px;
  z-index: 4;
  white-space: nowrap;
}

.mono-center {
  position: absolute;
  left: 6.25%;
  top: 6.25%;
  width: 87.5%;
  height: 87.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 10px;
  z-index: 2;
}

.mono-dice { display: flex; gap: 10px; }

.mono-die {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}