:root {
  --bg: #0b0e22;
  --bg-soft: #1a1e3a;
  --panel: #20254a;
  --panel-2: #2a3060;
  --text: #eef1ff;
  --muted: #9aa0d0;
  --p1: #ff5d73;
  --p2: #4dd0e1;
  --accent: #ffd166;
  --accent-2: #ff8fb1;
  --good: #6ee7b7;
  --grad-accent: linear-gradient(135deg, #ffd166 0%, #ff8c5a 100%);
  --grad-cool: linear-gradient(135deg, #6a8dff 0%, #4dd0e1 100%);
  --grad-hot: linear-gradient(135deg, #ff5d73 0%, #ff8fb1 100%);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --glow: 0 0 0 1px rgba(255,255,255,0.05), 0 18px 44px rgba(0, 0, 0, 0.5);
  --radius: 16px;
  --font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* ---------- Accessibility: focus rõ ràng ---------- */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.game-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  transform: translateY(-4px);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(255,93,115,0.16), transparent 60%),
    radial-gradient(900px 500px at 88% -4%, rgba(77,208,225,0.16), transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(122,140,255,0.12), transparent 55%),
    linear-gradient(180deg, #11142e 0%, var(--bg) 55%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.app-header {
  text-align: center;
  padding: 36px 16px 14px;
  position: relative;
}

.sound-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(42, 48, 96, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-size: 1.2rem;
  width: 46px;
  height: 46px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
}
.sound-toggle:hover { background: var(--accent); box-shadow: 0 0 18px rgba(255,209,102,0.5); }
.sound-toggle:active { transform: scale(0.94); }
.sound-toggle.muted { opacity: 0.6; }
.theme-toggle { right: 74px; }
.accent-toggle { right: 128px; }
.lang-toggle { right: 182px; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.5px; }

/* Nút "Cài app" (PWA) — kiểu pill, chỉ hiện khi trình duyệt cho phép cài */
.install-btn {
  position: absolute;
  top: 20px;
  right: 182px;
  height: 46px;
  padding: 0 16px;
  background: var(--grad-accent, rgba(255,209,102,0.92));
  color: #2a1606;
  font-weight: 800;
  font-family: var(--font-body);
  font-size: 0.9rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(255,140,90,0.35);
  transition: filter 0.18s, transform 0.1s, box-shadow 0.18s;
}
.install-btn:hover { filter: brightness(1.06); box-shadow: 0 8px 24px rgba(255,140,90,0.5); }
.install-btn:active { transform: scale(0.95); }
.install-btn.hidden { display: none; }

/* ---------- Chip hồ sơ ---------- */
.profile-chip {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: rgba(42, 48, 96, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  transition: background 0.16s, box-shadow 0.16s, transform 0.1s;
}
.profile-chip:hover { background: rgba(60, 68, 120, 0.7); box-shadow: 0 0 16px rgba(120,160,255,0.4); }
.profile-chip:active { transform: scale(0.96); }
.chip-avatar { font-size: 1.3rem; line-height: 1; }
.chip-name { font-weight: 700; font-size: 0.9rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Header gọn trên màn điện thoại nhỏ (≤480px) ----------
   Tránh chip hồ sơ + 3 nút toggle + logo căn giữa chồng lên nhau. */
@media (max-width: 480px) {
  .app-header { padding-top: 62px; }
  .sound-toggle { width: 40px; height: 40px; font-size: 1.05rem; top: 12px; right: 14px; }
  .theme-toggle { right: 60px; }
  .accent-toggle { right: 106px; }
  .lang-toggle { right: 152px; font-size: 0.8rem; }
  /* Nút cài app: đưa xuống dưới hàng toggle để không chồng lên nhau */
  .install-btn { top: 56px; right: 14px; height: 34px; padding: 0 12px; font-size: 0.8rem; }
  .profile-chip { top: 12px; left: 12px; padding: 6px 11px 6px 7px; }
  .chip-name { max-width: 66px; font-size: 0.82rem; }
  .logo { font-size: 1.45rem; }
  .tagline { font-size: 0.82rem; }
  /* tăng vùng chạm cho nút nhỏ trên điện thoại */
  .fav-btn { width: 40px; height: 40px; font-size: 1.1rem; }
  .chat-emote-btn { width: 42px; height: 42px; }
  /* đảm bảo vùng chạm tối thiểu ~44px cho các nút icon/nhỏ trên cảm ứng */
  .chat-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .modal-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 6px; }
  .replay-controls .btn { min-width: 44px; min-height: 44px; }
  .btn.small { min-height: 40px; }
  .chip { min-height: 40px; }
  /* tránh iOS tự phóng to khi focus ô nhập có font < 16px */
  .chat-input, .player-name-input { font-size: 16px; }
}

/* ---------- Trang hồ sơ ---------- */
.profile-view { display: flex; flex-direction: column; gap: 18px; }
.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(160deg, rgba(42,48,96,0.7), rgba(28,33,68,0.85));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.profile-avatar {
  width: 76px; height: 76px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 2.8rem;
  border-radius: 50%;
  background: var(--grad-cool);
  box-shadow: 0 6px 18px rgba(77,208,225,0.4);
}
.profile-id { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-opt {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  font-size: 1.2rem; cursor: pointer;
  transition: transform 0.1s, border-color 0.16s, background 0.16s;
}
.avatar-opt:hover { transform: scale(1.12); }
.avatar-opt.on { border-color: var(--accent); background: rgba(255,209,102,0.2); }
.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.pstat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(42,48,96,0.6), rgba(24,28,58,0.8));
  border: 1px solid rgba(255,255,255,0.07);
}
.pstat-ic { font-size: 1.5rem; }
.pstat b { font-size: 1.3rem; font-family: var(--font-head); }
.pstat small { color: var(--muted); font-size: 0.78rem; text-align: center; }
.profile-h { font-family: var(--font-head); margin: 4px 0 0; }
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ach {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(42,48,96,0.4);
}
.ach.done { border-color: rgba(255,209,102,0.4); background: linear-gradient(135deg, rgba(255,209,102,0.14), rgba(255,143,177,0.08)); }
.ach.locked { opacity: 0.6; }
.ach-ic { font-size: 1.8rem; flex: 0 0 auto; }
.ach-txt { display: flex; flex-direction: column; }
.ach-txt b { font-size: 0.95rem; }
.ach-txt small { color: var(--muted); font-size: 0.78rem; }

/* ---------- Lịch sử ván đấu ---------- */
.hist-list { display: flex; flex-direction: column; gap: 8px; }
.hist-empty {
  padding: 22px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
}
.hist-item {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(42,48,96,0.5), rgba(24,28,58,0.7));
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 4px solid var(--muted);
}
.hist-item.win { border-left-color: var(--good); }
.hist-item.lose { border-left-color: var(--p1); }
.hist-item.draw { border-left-color: var(--accent); }
.hist-game { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-res { font-weight: 600; font-size: 0.9rem; }
.hist-meta { color: var(--muted); font-size: 0.78rem; text-align: right; white-space: nowrap; }
.hist-replay { white-space: nowrap; padding: 5px 12px; font-size: 0.82rem; }
@media (max-width: 640px) {
  .hist-item { grid-template-columns: 1fr auto; }
  .hist-meta { grid-column: 1 / -1; text-align: left; }
  .hist-replay { grid-column: 1 / -1; justify-self: start; }
}
body.theme-light .hist-item { background: linear-gradient(160deg, #ffffff, #f1f4fd); border-color: rgba(20,30,80,0.08); }

/* ---------- Bảng xếp hạng ---------- */
.lead-list { display: flex; flex-direction: column; gap: 6px; }.lead-empty {
  padding: 20px; text-align: center; color: var(--muted);
  border: 1px dashed rgba(255,255,255,0.14); border-radius: 14px; background: rgba(255,255,255,0.03);
}
.lead-item {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(42,48,96,0.5), rgba(24,28,58,0.7));
  border: 1px solid rgba(255,255,255,0.07);
}
.lead-rank { font-size: 1.2rem; text-align: center; }
.lead-num { color: var(--muted); font-size: 0.95rem; }
.lead-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-stat { font-size: 0.84rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.lead-rate { color: var(--accent); min-width: 42px; text-align: right; }
body.theme-light .lead-item { background: linear-gradient(160deg, #ffffff, #f1f4fd); border-color: rgba(20,30,80,0.08); }
@media (max-width: 520px) {
  .lead-item { grid-template-columns: 30px 1fr auto auto; }
  .lead-item .lead-rate { display: none; }
}
.settings-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(160deg, rgba(42,48,96,0.55), rgba(24,28,58,0.8));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 8px 16px;
}
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  font-weight: 600;
}
.set-row + .set-row { border-top: 1px solid rgba(255,255,255,0.06); }
.set-row input[type="range"] { flex: 1; max-width: 240px; accent-color: var(--accent); }
.set-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }

/* ---------- Giao diện SÁNG ---------- */
body.theme-light {
  --bg: #eef1fb;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-2: #eef1fc;
  --text: #1b2147;
  --muted: #5c628a;
  --shadow: 0 10px 28px rgba(40, 50, 90, 0.14);
  --glow: 0 0 0 1px rgba(20,30,80,0.05), 0 18px 44px rgba(40,50,90,0.18);
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(255,93,115,0.12), transparent 60%),
    radial-gradient(900px 500px at 88% -4%, rgba(77,208,225,0.16), transparent 60%),
    linear-gradient(180deg, #f5f7ff 0%, #e7ecfb 100%);
}
body.theme-light .sound-toggle { background: rgba(255,255,255,0.8); border-color: rgba(20,30,80,0.12); color: #1b2147; }
body.theme-light .game-card { background: linear-gradient(160deg, #ffffff, #f1f4fd); border-color: rgba(20,30,80,0.08); }
body.theme-light .game-card:hover { box-shadow: 0 22px 44px rgba(40,50,90,0.2), 0 0 24px rgba(255,143,177,0.18); }
body.theme-light .cat-sidebar { background: linear-gradient(170deg, #ffffff, #eef1fc); border-color: rgba(20,30,80,0.08); }
body.theme-light .cat-item:hover { background: rgba(20,30,80,0.05); }
body.theme-light .cat-item.active { background: linear-gradient(135deg, rgba(255,170,90,0.22), rgba(255,143,177,0.16)); border-color: rgba(255,150,90,0.5); }
body.theme-light .search-bar { background: linear-gradient(160deg, #ffffff, #eef1fc); border-color: rgba(20,30,80,0.1); }
body.theme-light .scoreboard { background: linear-gradient(160deg, #ffffff, #eef1fc); border-color: rgba(20,30,80,0.08); }
body.theme-light .online-entry { background: linear-gradient(180deg, #ffffff, #f1f4fd); }
body.theme-light .btn { background: #eef1fc; color: #1b2147; border-color: rgba(20,30,80,0.12); }
body.theme-light .btn:hover { background: var(--accent); color: #2a1606; }
body.theme-light .cat-empty { background: rgba(20,30,80,0.03); border-color: rgba(20,30,80,0.12); }
body.theme-light .status { color: #b06a00; }

.logo {
  margin: 0 auto;
  width: fit-content;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.6rem;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.5px;
  background: linear-gradient(100deg, #ffd166 0%, #ff8fb1 42%, #6a8dff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 18px rgba(255, 143, 177, 0.35));
  transition: transform 0.18s;
}
.logo:hover { transform: scale(1.03); }

.tagline {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 0.3px;
}

#app {
  flex: 1;
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 16px;
}

.hidden { display: none !important; }

/* ---------- Bố cục duyệt theo thể loại (sidebar) ---------- */
.browse {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 6px;
}
.cat-sidebar {
  position: sticky;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(42,48,96,0.55), rgba(22,26,55,0.8));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: var(--shadow);
}
.cat-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background 0.16s, color 0.16s, border-color 0.16s, transform 0.1s;
}
.cat-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); transform: translateX(2px); }
.cat-item.active {
  background: linear-gradient(135deg, rgba(255,209,102,0.2), rgba(255,143,177,0.13));
  border-color: rgba(255, 209, 102, 0.42);
  color: var(--text);
}
.cat-ic { font-size: 1.35rem; width: 30px; text-align: center; flex: 0 0 auto; }
.cat-label { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.cat-label b { font-size: 0.9rem; font-weight: 600; }
.cat-label small { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.cat-item.active .cat-label small { color: var(--accent); }
.cat-head { margin-bottom: 16px; }
.cat-head h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.7rem;
  margin: 0 0 7px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.cat-head-ic { font-size: 1.55rem; }
.cat-head p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.5; font-size: 0.95rem; }
.cat-head-count {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.32);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}
.list-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 16px;
}
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(42, 48, 96, 0.5);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.chip:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
.chip.on { background: var(--grad-cool); color: #0c1230; border-color: transparent; }
.sort-wrap { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; }
.sort-select { min-width: 130px; }
.load-more {
  display: block;
  margin: 8px auto 0;
  padding: 11px 30px;
}
@media (max-width: 720px) {
  .browse { grid-template-columns: 1fr; gap: 14px; }
  .cat-sidebar {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .cat-item { flex: 0 0 auto; }
  .cat-label small { display: none; }
  .cat-head h2 { font-size: 1.4rem; }
}
.cat-item.cat-special { border-left: 3px solid transparent; }
.cat-item.cat-special.active { border-left-color: var(--p1); }

/* ---------- Thanh tìm kiếm ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(42,48,96,0.7), rgba(24,28,58,0.85));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.search-bar:focus-within {
  border-color: rgba(255, 209, 102, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.12), var(--shadow);
}
.search-ic { font-size: 1.1rem; opacity: 0.8; }
.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 0;
}
.search-input::placeholder { color: var(--muted); }

.cat-empty {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  font-size: 0.95rem;
}

/* ---------- Poster thẻ game ---------- */
.card-media {
  position: relative;
  margin: -6px -6px 16px;
}
.game-poster {
  position: relative;
  height: 122px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(120% 80% at 78% 12%, hsla(calc(var(--ph) + 40), 85%, 62%, 0.55), transparent 60%),
    linear-gradient(150deg, hsl(var(--ph), 70%, 42%), hsl(calc(var(--ph) + 30), 65%, 20%));
}
.game-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.4px);
  background-size: 16px 16px;
  opacity: 0.35;
  mix-blend-mode: overlay;
}
.poster-emoji {
  font-size: 3.6rem;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  transition: transform 0.25s cubic-bezier(0.34,1.4,0.5,1);
  z-index: 1;
}
.game-card:hover .poster-emoji { transform: scale(1.18) rotate(-4deg); }
.poster-mark {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(8, 11, 27, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  backdrop-filter: blur(3px);
}

/* ---------- Huy hiệu trên thẻ ---------- */
.card-badges {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.badge-hot { background: linear-gradient(135deg, #ff5d4d, #ff2d55); color: #fff; }
.badge-new { background: linear-gradient(135deg, #6ee7b7, #34d399); color: #08231a; }
.badge-online { background: rgba(8, 11, 27, 0.72); color: #9fd9ff; border: 1px solid rgba(159, 217, 255, 0.4); }

/* ---------- Nút yêu thích ---------- */
.fav-btn {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 11, 27, 0.6);
  color: rgba(255, 255, 255, 0.65);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  transition: transform 0.12s, color 0.16s, background 0.16s, border-color 0.16s;
}
.fav-btn:hover { transform: scale(1.12); color: #ff6b81; border-color: rgba(255, 107, 129, 0.6); }
.fav-btn.on { color: #ff5d73; background: rgba(255, 93, 115, 0.18); border-color: rgba(255, 93, 115, 0.7); }
.fav-btn.on:hover { color: #ff8fa1; }
.card-stats {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.board-wrap.ai-thinking { pointer-events: none; }
.board-wrap.ai-thinking::after {
  content: "🤖 Máy đang suy nghĩ...";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 11, 27, 0.82);
  color: var(--accent);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  z-index: 50;
  pointer-events: none;
}
.mode-icon-ai { display: flex; align-items: center; justify-content: center; font-size: 2.4rem; }
.ai-level-select { margin-top: 10px; width: 100%; }

/* ---------- Trang chi tiết game ---------- */
.detail-view { display: flex; flex-direction: column; gap: 18px; }
.detail-card {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  background: linear-gradient(160deg, rgba(42,48,96,0.7), rgba(28,33,68,0.85));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.detail-poster .game-poster { height: 200px; border-radius: 14px; }
.detail-poster .poster-emoji { font-size: 6rem; }
.detail-info { display: flex; flex-direction: column; gap: 12px; }
.detail-title { font-family: var(--font-head); font-weight: 800; font-size: 1.8rem; margin: 0; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-badges .badge { position: static; }
.badge-ai { background: linear-gradient(135deg, #a78bfa, #7c5cff); color: #fff; }
.detail-desc { color: var(--muted); line-height: 1.55; margin: 0; font-size: 1rem; }
.detail-stats { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text); font-weight: 600; font-size: 0.9rem; }
.detail-stats .detail-nostat { color: var(--muted); font-weight: 500; }
.detail-play { align-self: flex-start; font-size: 1.05rem; padding: 12px 28px; margin-top: 4px; }
.detail-howto {
  background: linear-gradient(160deg, rgba(42,48,96,0.55), rgba(24,28,58,0.8));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
.detail-howto h3 { margin: 0 0 12px; font-family: var(--font-head); }
.detail-howto ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.detail-howto li { line-height: 1.5; color: var(--text); }
.detail-howto li::marker { color: var(--accent); font-weight: 700; }
@media (max-width: 640px) {
  .detail-card { grid-template-columns: 1fr; }
  .detail-poster .game-poster { height: 150px; }
}

/* ---------- Menu ---------- */
.game-grid {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 10px;
}

.online-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 4px 0 22px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 209, 102, 0.22);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12% 10%, rgba(77,208,225,0.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent),
    var(--panel);
  box-shadow: var(--shadow);
}

/* ---------- Banner thử thách hằng ngày ---------- */
.daily-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 143, 177, 0.3);
  background:
    radial-gradient(circle at 90% 10%, rgba(255,143,177,0.2), transparent 45%),
    linear-gradient(135deg, rgba(106,141,255,0.18), rgba(255,209,102,0.1)),
    var(--panel);
  box-shadow: var(--shadow);
}
.daily-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.daily-poster { flex: 0 0 auto; width: 84px; }
.daily-poster .game-poster { height: 56px; border-radius: 10px; }
.daily-poster .poster-emoji { font-size: 2rem; }
.daily-poster .poster-mark { display: none; }
.daily-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.daily-tag {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--accent);
  text-transform: uppercase;
}
.daily-text b { font-family: var(--font-head); font-size: 1.25rem; }
.daily-text small { color: var(--muted); font-size: 0.84rem; }
.daily-play { flex: 0 0 auto; }
@media (max-width: 560px) {
  .daily-banner { flex-direction: column; align-items: stretch; }
  .daily-play { width: 100%; }
}
.online-entry h2 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 1.12rem;
}
.online-entry p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.game-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px;
}

.game-section-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text);
  font-size: 1.18rem;
}

.game-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.game-section-count {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 209, 102, 0.26);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--accent);
  background: rgba(255, 209, 102, 0.07);
  font-size: 0.76rem;
  font-weight: 700;
}

.game-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

.game-card {
  position: relative;
  background: linear-gradient(160deg, rgba(42,48,96,0.85), rgba(28,33,68,0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 22px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34,1.2,0.5,1), box-shadow 0.2s ease, border-color 0.2s;
  box-shadow: var(--shadow);
}
.game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,209,102,0.7), rgba(255,143,177,0.5), rgba(106,141,255,0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.game-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: transparent;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 143, 177, 0.18);
}
.game-card:hover::after { opacity: 1; }
.game-card { animation: card-in 0.4s ease both; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.game-avatar {
  --av-a: var(--accent);
  --av-b: var(--p2);
  --av-c: var(--p1);
  position: relative;
  height: 116px;
  margin: -6px -6px 18px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.01)),
    #151936;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.game-avatar::before {
  content: attr(data-mark);
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(8,11,27,0.7);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--av-a);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0;
}
.game-avatar::after,
.avatar-orbit,
.avatar-piece {
  content: "";
  position: absolute;
  display: block;
}
.avatar-piece {
  z-index: 3;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.28);
}
.game-avatar-board {
  --av-a: #ffd166;
  --av-b: #4dd0e1;
  --av-c: #ff5d73;
  background:
    linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px),
    linear-gradient(135deg, #171b38, #2b3267);
  background-size: 26px 26px, 26px 26px, auto;
}
.game-avatar-board .avatar-piece {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.game-avatar-board .avatar-piece.a { right: 25px; top: 24px; background: var(--av-b); }
.game-avatar-board .avatar-piece.b { right: 54px; top: 54px; background: var(--av-a); }
.game-avatar-board .avatar-piece.c { right: 88px; bottom: 18px; background: var(--av-c); }
.game-avatar-board .avatar-orbit.one {
  left: 63px;
  top: 72px;
  width: 88px;
  height: 3px;
  background: var(--av-a);
  transform: rotate(-26deg);
}
.game-avatar-map {
  --av-a: #6ee7b7;
  --av-b: #4dd0e1;
  --av-c: #ffd166;
  background:
    linear-gradient(150deg, rgba(110,231,183,0.28) 0 26%, transparent 26% 100%),
    linear-gradient(28deg, transparent 0 42%, rgba(77,208,225,0.2) 42% 64%, transparent 64%),
    #151936;
}
.game-avatar-map .avatar-piece.a {
  width: 58px;
  height: 33px;
  right: 22px;
  bottom: 22px;
  background: var(--av-b);
  clip-path: polygon(8% 30%, 65% 30%, 100% 50%, 65% 70%, 8% 70%, 0 50%);
}
.game-avatar-map .avatar-piece.b {
  width: 40px;
  height: 40px;
  left: 76px;
  top: 35px;
  background: rgba(255,209,102,0.88);
  clip-path: polygon(50% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%);
}
.game-avatar-map .avatar-piece.c {
  width: 28px;
  height: 28px;
  right: 95px;
  top: 20px;
  border: 3px solid var(--av-c);
  background: transparent;
}
.game-avatar-action {
  --av-a: #ffd166;
  --av-b: #6ee7b7;
  --av-c: #ff5d73;
  background:
    radial-gradient(circle at 70% 48%, transparent 0 17px, rgba(255,255,255,0.16) 18px 20px, transparent 21px 38px, rgba(255,255,255,0.12) 39px 41px, transparent 42px),
    linear-gradient(135deg, #171b38, #27305d);
}
.game-avatar-action .avatar-orbit.one {
  left: 34px;
  top: 74px;
  width: 122px;
  height: 4px;
  border-radius: 999px;
  background: var(--av-a);
  transform: rotate(-17deg);
}
.game-avatar-action .avatar-piece.a {
  left: 49px;
  top: 67px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--av-c);
}
.game-avatar-action .avatar-piece.b {
  right: 34px;
  top: 43px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--av-a);
}
.game-avatar-action .avatar-piece.c {
  right: 80px;
  bottom: 17px;
  width: 42px;
  height: 7px;
  border-radius: 999px;
  background: var(--av-b);
}
.game-avatar-long {
  --av-a: #ff9f7a;
  --av-b: #6ee7b7;
  --av-c: #ffd166;
  background:
    linear-gradient(rgba(255,255,255,0.1) 0 2px, transparent 2px 33px),
    linear-gradient(135deg, #171b38, #2a315c);
  background-size: 100% 34px, auto;
}
.game-avatar-long .avatar-piece.a,
.game-avatar-long .avatar-piece.b {
  width: 32px;
  height: 42px;
  bottom: 18px;
  background: var(--av-a);
  clip-path: polygon(12% 100%, 12% 38%, 50% 0, 88% 38%, 88% 100%);
}
.game-avatar-long .avatar-piece.a { left: 70px; }
.game-avatar-long .avatar-piece.b { right: 30px; background: var(--av-b); }
.game-avatar-long .avatar-piece.c {
  left: 130px;
  top: 50px;
  width: 36px;
  height: 18px;
  border-radius: 999px;
  background: var(--av-c);
}
.game-avatar-hidden {
  --av-a: #c6a7ff;
  --av-b: #4dd0e1;
  --av-c: #ffd166;
  background:
    radial-gradient(circle at 68% 55%, transparent 0 22px, rgba(77,208,225,0.22) 23px 25px, transparent 26px 43px, rgba(77,208,225,0.18) 44px 46px, transparent 47px),
    linear-gradient(135deg, #151936, #272b55);
}
.game-avatar-hidden .avatar-orbit.one {
  right: 28px;
  top: 19px;
  width: 4px;
  height: 88px;
  border-radius: 999px;
  background: var(--av-b);
  transform: rotate(44deg);
  transform-origin: center;
}
.game-avatar-hidden .avatar-piece.a {
  left: 70px;
  bottom: 22px;
  width: 42px;
  height: 28px;
  border-radius: 50% 50% 46% 46%;
  background: var(--av-a);
}
.game-avatar-hidden .avatar-piece.b,
.game-avatar-hidden .avatar-piece.c {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--av-c);
}
.game-avatar-hidden .avatar-piece.b { right: 55px; top: 38px; }
.game-avatar-hidden .avatar-piece.c { right: 95px; bottom: 30px; }
.game-avatar-chance {
  --av-a: #ffd166;
  --av-b: #4dd0e1;
  --av-c: #ff5d73;
  background:
    linear-gradient(135deg, rgba(255,209,102,0.2), transparent 38%),
    linear-gradient(160deg, #171b38, #2b315f);
}
.game-avatar-chance .avatar-piece.a,
.game-avatar-chance .avatar-piece.b {
  width: 45px;
  height: 64px;
  top: 26px;
  border-radius: 8px;
  background: #f4e1ae;
}
.game-avatar-chance .avatar-piece.a {
  right: 57px;
  transform: rotate(-10deg);
}
.game-avatar-chance .avatar-piece.b {
  right: 22px;
  background: var(--av-b);
  transform: rotate(9deg);
}
.game-avatar-chance .avatar-piece.c {
  left: 72px;
  bottom: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--av-a);
}
.game-avatar-auctionwar .avatar-piece.a {
  right: 34px;
  top: 22px;
  width: 62px;
  height: 46px;
  border-radius: 8px;
  background: #f0d79c;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.game-avatar-auctionwar .avatar-piece.b {
  right: 76px;
  bottom: 20px;
  width: 55px;
  height: 9px;
  border-radius: 999px;
  background: var(--av-c);
  transform: rotate(-28deg);
}
.game-avatar-auctionwar .avatar-piece.c {
  left: 80px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--av-a);
}
.game-avatar {
  height: 132px;
  margin: -6px -6px 18px;
  border-radius: 12px;
  background: transparent;
}
.game-avatar::before,
.game-avatar::after {
  display: none;
}
.game-avatar-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.game-icon {
  --icon-a: var(--accent);
  --icon-b: var(--p2);
  --icon-bg: #151936;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 42%),
    var(--icon-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.24);
  color: var(--icon-a);
  font-weight: 900;
  letter-spacing: 0;
  overflow: hidden;
  vertical-align: middle;
}
.game-icon::before {
  content: attr(data-mark);
  position: relative;
  z-index: 2;
  font-size: 1.05rem;
}
.game-icon::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--icon-b), transparent 55%);
}
.game-icon.small {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}
.game-icon.small::before { font-size: 0.78rem; }
.game-icon-auctionwar { --icon-a: #ffd166; --icon-b: #6ee7b7; }
.game-icon-tankarena,
.game-icon-artillery { --icon-a: #6ee7b7; --icon-b: #ff5d73; }
.game-icon-submarinehunt,
.game-icon-battleship,
.game-icon-seabattleplus { --icon-a: #4dd0e1; --icon-b: #8bb7ff; }
.game-icon-hiddenassassin,
.game-icon-trapmansion,
.game-icon-treasure,
.game-icon-bullscows,
.game-icon-hangman,
.game-icon-noitu { --icon-a: #c6a7ff; --icon-b: #ffd166; }
.game-icon-basedefenseduel,
.game-icon-dungeonrival,
.game-icon-crystalconquest { --icon-a: #ff9f7a; --icon-b: #6ee7b7; }
.game-icon-pig,
.game-icon-yahtzee,
.game-icon-domino,
.game-icon-memory,
.game-icon-dicebattle { --icon-a: #ffd166; --icon-b: #ff5d73; }
.game-card h3 { margin: 12px 0 6px; font-size: 1.2rem; }
.game-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }

@media (max-width: 560px) {
  .online-entry {
    grid-template-columns: 1fr;
  }
  .online-entry .btn {
    width: 100%;
  }
  .game-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/* ---------- Game view ---------- */
.game-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.game-bar .back-btn { justify-self: start; }
.game-bar .game-bar-right { justify-self: end; }

.game-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.btn {
  background: rgba(42, 48, 96, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, transform 0.1s, box-shadow 0.16s, color 0.16s;
  white-space: nowrap;
}
.btn:hover { background: var(--accent); color: #1a1320; box-shadow: 0 6px 18px rgba(255,209,102,0.32); }
.btn:active { transform: scale(0.97); }

/* Nút "← Về danh sách" gọn, canh trái, kiểu nhẹ nhàng (không chiếm cả hàng) */
.detail-view > .back-btn,
.profile-view > .back-btn {
  align-self: flex-start;
  width: auto;
  padding: 8px 14px 8px 11px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(42, 48, 96, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--muted);
}
.detail-view > .back-btn:hover,
.profile-view > .back-btn:hover {
  background: rgba(42, 48, 96, 0.85);
  color: var(--text);
  box-shadow: none;
  transform: translateX(-2px);
}
body.theme-light .detail-view > .back-btn,
body.theme-light .profile-view > .back-btn {
  background: #eef1fc;
  color: #4a5278;
}
body.theme-light .detail-view > .back-btn:hover,
body.theme-light .profile-view > .back-btn:hover {
  background: #e2e7fb;
  color: #1b2147;
}
#restartBtn,
#winAgain {
  max-width: 240px;
  white-space: normal;
  line-height: 1.2;
}

/* ---------- Scoreboard ---------- */
.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  background: linear-gradient(160deg, rgba(42,48,96,0.7), rgba(28,33,68,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.score { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.score-name { font-size: 0.85rem; color: var(--muted); }
.score-val { font-size: 2rem; font-weight: 800; font-family: var(--font-head); }
.score-p1 .score-val { color: var(--p1); }
.score-p2 .score-val { color: var(--p2); }

/* sáng đèn thẻ điểm của người đang tới lượt */
.score {
  border-radius: 12px;
  padding: 8px 12px;
  border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.score.active { background: var(--bg-soft); }
.score-p1.active {
  border-color: var(--p1);
  box-shadow: 0 0 14px rgba(255, 93, 115, 0.55);
}
.score-p2.active {
  border-color: var(--p2);
  box-shadow: 0 0 14px rgba(77, 208, 225, 0.55);
}
.score.active .score-name { color: var(--text); }

.turn-banner {
  background: var(--grad-cool);
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 700;
  text-align: center;
  font-size: 0.9rem;
  color: #0c1230;
  border: none;
  box-shadow: 0 6px 16px rgba(77, 208, 225, 0.25);
}

@media (max-width: 560px) {
  .game-bar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
  }
  .game-title {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    font-size: 1.22rem;
    overflow-wrap: anywhere;
  }
  .game-bar .back-btn {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .game-bar-right {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .game-bar .btn {
    padding: 8px 10px;
    font-size: 0.84rem;
  }
  .scoreboard {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
  }
  .turn-banner {
    grid-column: 1 / -1;
    order: -1;
    padding: 7px 10px;
  }
  .score {
    min-width: 0;
    padding: 6px 8px;
  }
  .score-val {
    font-size: 1.55rem;
  }
}

/* ---------- Boards ---------- */
.board-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
}

.board-wrap.session-locked {
  min-height: 220px;
  align-items: center;
}

.board-wrap.session-locked > :not(.session-lock) {
  pointer-events: none;
  user-select: none;
  filter: grayscale(0.35) opacity(0.55);
}

.session-lock {
  width: min(520px, 100%);
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(255, 93, 115, 0.22), rgba(77, 208, 225, 0.14)), var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.5;
}

.app-toast {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 2000;
  max-width: min(520px, calc(100vw - 28px));
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 18, 38, 0.94);
  color: var(--text);
  box-shadow: var(--shadow);
  font-weight: 800;
  text-align: center;
  transform: translate(-50%, -18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.room-exit-notice {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 10, 24, 0.68);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: all;
  transition: opacity 0.18s ease;
}

.room-exit-notice.show {
  opacity: 1;
}

.room-exit-card {
  width: min(420px, 100%);
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
}

.room-exit-notice.show .room-exit-card {
  transform: translateY(0) scale(1);
}

.room-exit-card h2 {
  margin: 0 0 10px;
  font-size: 1.45rem;
  color: var(--accent);
}

.room-exit-card p {
  margin: 0 0 12px;
  color: var(--text);
  font-weight: 800;
  line-height: 1.5;
}

.room-exit-card span {
  color: var(--muted);
  font-size: 0.95rem;
}

.status {
  text-align: center;
  min-height: 1.5em;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
}

/* Tic-Tac-Toe */
.ttt-root { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ttt-hud { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ttt-side {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  font-size: 1.5rem; font-weight: 900;
  background: var(--panel-2);
  border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.ttt-side.x { color: var(--p1); }
.ttt-side.o { color: var(--p2); }
.ttt-side.x.turn { border-color: var(--p1); box-shadow: 0 0 12px rgba(255,93,115,0.5); transform: scale(1.08); }
.ttt-side.o.turn { border-color: var(--p2); box-shadow: 0 0 12px rgba(77,208,225,0.5); transform: scale(1.08); }
.ttt-badge {
  font-size: 0.95rem; padding: 8px 14px; border-radius: 10px;
  background: var(--panel-2); white-space: nowrap; min-width: 84px; text-align: center;
}
.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(110,150,255,0.12), transparent 60%),
    linear-gradient(160deg, #1b2240 0%, #141a30 100%);
  background-color: #161d33;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.ttt-cell {
  position: relative;
  background: linear-gradient(160deg, #242c47, #1a2138);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.06), inset 0 -3px 6px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.3);
}
.ttt-cell:hover { background: linear-gradient(160deg, #2c3656, #202842); transform: translateY(-2px); }
/* X / O vẽ bằng nét SVG, có hiệu ứng "vẽ tay" */
.ttt-svg { width: 64%; height: 64%; overflow: visible; }
.ttt-svg line, .ttt-svg circle { fill: none; stroke-width: 13; stroke-linecap: round; }
.ttt-svg.ttt-x line { stroke: var(--p1); filter: drop-shadow(0 0 6px rgba(255,93,115,0.55)); stroke-dasharray: 78; stroke-dashoffset: 78; animation: tttDraw 0.22s ease forwards; }
.ttt-svg.ttt-x line:nth-child(2) { animation-delay: 0.16s; }
.ttt-svg.ttt-o circle { stroke: var(--p2); filter: drop-shadow(0 0 6px rgba(77,208,225,0.55)); stroke-dasharray: 182; stroke-dashoffset: 182; transform: rotate(-90deg); transform-origin: 50% 50%; animation: tttDraw 0.34s ease forwards; }
@keyframes tttDraw { to { stroke-dashoffset: 0; } }
.ttt-cell.ghost .ttt-svg { opacity: 0.32; }
.ttt-cell.ghost .ttt-svg line, .ttt-cell.ghost .ttt-svg circle { animation: none; stroke-dashoffset: 0; }
.ttt-cell.last { box-shadow: 0 0 0 3px var(--accent), inset 0 -3px 6px rgba(0,0,0,0.4); }
.ttt-cell.lastempty { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22); }
.ttt-cell.selected { box-shadow: 0 0 0 3px var(--good), 0 0 14px rgba(46,160,67,0.5); transform: scale(1.05); }
.ttt-cell.movehint::after {
  content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  border: 3px dashed var(--good); animation: tttHint 1.1s ease-in-out infinite;
}
@keyframes tttHint { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.18); opacity: 1; } }
.ttt-cell.win { background: linear-gradient(160deg, #3ddc84, #1f9d57); animation: ttt-winpulse 0.7s ease infinite; }
.ttt-cell.win .ttt-svg line, .ttt-cell.win .ttt-svg circle { stroke: #0f1226; filter: none; }
@keyframes ttt-pop { 0% { transform: scale(0.2); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes ttt-winpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* Connect Four */
.c4-board {
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,0.14), transparent 50%),
    linear-gradient(165deg, #2c4aa8, #1a2c66);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.08), inset 0 -6px 14px rgba(0,0,0,0.4);
}
.c4-cell {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #0c1330, #060a1c);
  cursor: pointer;
  transition: transform 0.1s;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 -2px 3px rgba(255,255,255,0.05);
}
.c4-cell.p1 { background: radial-gradient(circle at 35% 30%, #ff97a6 0%, var(--p1) 45%, #c43048 100%); box-shadow: inset 0 -4px 8px rgba(0,0,0,0.4), inset 0 4px 7px rgba(255,255,255,0.45), 0 0 8px rgba(255,93,115,0.4); }
.c4-cell.p2 { background: radial-gradient(circle at 35% 30%, #b6f0f8 0%, var(--p2) 45%, #2592a6 100%); box-shadow: inset 0 -4px 8px rgba(0,0,0,0.4), inset 0 4px 7px rgba(255,255,255,0.45), 0 0 8px rgba(77,208,225,0.4); }
/* quân xem trước (ghost) khi rê chuột lên cột */
.c4-cell.ghost.g1 { background: var(--p1); opacity: 0.32; }
.c4-cell.ghost.g2 { background: var(--p2); opacity: 0.32; }
.c4-col.hovercol { background: rgba(255, 255, 255, 0.06); border-radius: 30px; }
/* hiệu ứng rơi từ trên cao xuống, có nảy */
.c4-cell.dropping { animation: c4-drop 0.46s cubic-bezier(0.34, 0.1, 0.5, 1); }
@keyframes c4-drop {
  0%   { transform: translateY(var(--drop)); }
  65%  { transform: translateY(0); }
  78%  { transform: translateY(-14%); }
  90%  { transform: translateY(0); }
  95%  { transform: translateY(-5%); }
  100% { transform: translateY(0); }
}
.c4-cell.last { box-shadow: inset 0 -3px 6px rgba(0,0,0,0.35), 0 0 0 3px rgba(255,255,255,0.45); }
.c4-cell.win { box-shadow: 0 0 0 4px var(--accent); animation: c4-winpulse 0.7s ease infinite; z-index: 2; }
@keyframes c4-winpulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px var(--accent); }
  50% { transform: scale(1.12); box-shadow: 0 0 14px 5px var(--accent); }
}
.c4-col:hover .c4-cell:first-child { transform: scale(1.05); }

/* Isolation Duel */
.iso-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.iso-hud {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: min(460px, 94vw);
}
.iso-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 2px solid transparent;
}
.iso-side span { font-size: 0.76rem; color: var(--muted); }
.iso-side b { font-size: 1.05rem; font-weight: 900; }
.iso-side.p1 b { color: var(--p1); }
.iso-side.p2 b { color: var(--p2); }
.iso-side.p1.active { border-color: var(--p1); box-shadow: 0 0 10px rgba(255,93,115,0.4); }
.iso-side.p2.active { border-color: var(--p2); box-shadow: 0 0 10px rgba(77,208,225,0.4); }
.iso-bar { width: 80%; height: 6px; border-radius: 999px; background: rgba(0,0,0,0.3); overflow: hidden; }
.iso-bar > i { display: block; height: 100%; border-radius: inherit; transition: width 0.25s; }
.iso-bar.p1 > i { background: linear-gradient(90deg, #ffd166, #ff5d73); }
.iso-bar.p2 > i { background: linear-gradient(90deg, #8be6f0, #4dd0e1); }
.iso-mid { display: flex; align-items: center; font-size: 1.1rem; color: var(--muted); }
.iso-board {
  --iso-size: 7;
  display: grid;
  grid-template-rows: repeat(var(--iso-size), 1fr);
  gap: 6px;
  width: min(540px, 92vw);
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(135deg, #172143, #0e142c);
  box-shadow: var(--shadow);
}
.iso-cell {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.iso-cell.alt { background: rgba(255, 255, 255, 0.028); }
.iso-cell:disabled { opacity: 1; }
.iso-cell.legal { cursor: pointer; }
.iso-cell.legal::after {
  content: ""; width: 30%; height: 30%; border-radius: 50%;
  background: rgba(255,209,102,0.6);
  box-shadow: 0 0 8px rgba(255,209,102,0.5);
}
.iso-cell.legal:hover { transform: scale(1.06); background: rgba(255, 209, 102, 0.18); }
.iso-cell.blocktarget { cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,93,115,0.45); }
.iso-cell.blocktarget::after {
  content: "✕"; color: rgba(255,93,115,0.55); font-weight: 900; font-size: 0.9rem;
}
.iso-cell.blocktarget:hover { transform: scale(1.06); background: rgba(255,93,115,0.18); }
.iso-cell.blocked {
  background:
    radial-gradient(circle at 50% 45%, #2a1430, #0a0610),
    #0a0610;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.7);
  opacity: 0.92;
  border-color: rgba(120,40,90,0.3);
}
.iso-cell.lastblock { box-shadow: inset 0 0 0 2px rgba(255,93,115,0.5), inset 0 0 10px rgba(0,0,0,0.7); }
.iso-pawn {
  width: 72%; height: 72%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; /* dùng nền tròn thay ký tự */
  box-shadow: 0 3px 6px rgba(0,0,0,0.45), inset 0 -3px 6px rgba(0,0,0,0.35), inset 0 2px 4px rgba(255,255,255,0.4);
}
.iso-cell.p1 .iso-pawn { background: radial-gradient(circle at 36% 30%, #ffb3c0, #ff5d73 60%, #b3263c); }
.iso-cell.p2 .iso-pawn { background: radial-gradient(circle at 36% 30%, #b3f3ff, #4dd0e1 60%, #1c8a99); }
.iso-cell.lastmove { box-shadow: inset 0 0 0 3px rgba(255,209,102,0.7); }

/* Laser Chess */
.lc-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.lc-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.lc-turn { font-size: 0.9rem; color: var(--muted); }
.lc-tag { font-weight: 900; }
.lc-tag.p1 { color: var(--p1); }
.lc-tag.p2 { color: var(--p2); }
.lc-rotate.active, .lc-rotate:disabled { opacity: 0.5; }
.lc-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 5px;
  width: min(560px, 92vw);
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(135deg, #141c3a, #0c1124);
  box-shadow: var(--shadow);
}
.lc-cell {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
}
.lc-cell.alt { background: rgba(255, 255, 255, 0.025); }
.lc-cell.home1 { background: linear-gradient(0deg, rgba(255,93,115,0.1), rgba(255,255,255,0.03)); }
.lc-cell.home2 { background: linear-gradient(180deg, rgba(77,208,225,0.1), rgba(255,255,255,0.03)); }
.lc-cell:disabled { opacity: 1; }
.lc-cell.legal { cursor: pointer; }
.lc-cell.legal:hover { transform: scale(1.05); filter: brightness(1.2); }
.lc-cell.selected { box-shadow: inset 0 0 0 3px var(--accent), 0 0 12px rgba(255,209,102,0.5); z-index: 3; }
.lc-cell.movetarget { cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,209,102,0.55); }
.lc-cell.movetarget::before { content: ""; width: 30%; height: 30%; border-radius: 50%; background: rgba(255,209,102,0.55); }
.lc-cell.movetarget:hover { transform: scale(1.05); background: rgba(255,209,102,0.16); }

/* quân cờ */
.lc-pc { position: relative; width: 78%; height: 78%; display: block; }
.lc-cell.p1 .lc-pc { --pcol: #ff5d73; --pcol2: #ff9aa8; }
.lc-cell.p2 .lc-pc { --pcol: #4dd0e1; --pcol2: #9af0fb; }
.lc-pc.cannon {
  border-radius: 8px;
  background: radial-gradient(circle at 38% 30%, var(--pcol2), var(--pcol) 60%, rgba(0,0,0,0.4));
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.35);
}
.lc-pc.cannon i {
  position: absolute; left: 50%; width: 26%; height: 46%; margin-left: -13%;
  background: #20242e; border-radius: 4px;
}
.lc-pc.cannon.aim-up i { top: -22%; }
.lc-pc.cannon.aim-down i { bottom: -22%; }
.lc-pc.core {
  display: flex; align-items: center; justify-content: center;
}
.lc-pc.core i {
  width: 70%; height: 70%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--pcol2) 45%, var(--pcol));
  transform: rotate(45deg);
  border-radius: 6px;
  box-shadow: 0 0 12px var(--pcol), inset 0 0 8px rgba(255,255,255,0.6);
  animation: lc-core 1.4s ease-in-out infinite alternate;
}
@keyframes lc-core { from { filter: brightness(1); } to { filter: brightness(1.4); box-shadow: 0 0 20px var(--pcol); } }
.lc-pc.mirror {
  border-radius: 4px;
}
.lc-pc.mirror::after {
  content: ""; position: absolute; left: 50%; top: 8%; height: 84%; width: 22%; margin-left: -11%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.25), #e8eefc 40%, #aab4d6 60%, rgba(255,255,255,0.15));
  box-shadow: 0 0 8px rgba(180,210,255,0.6), inset 0 0 4px rgba(0,0,0,0.3);
}
.lc-pc.mirror.m-slash::after { transform: rotate(-45deg); }
.lc-pc.mirror.m-back::after { transform: rotate(45deg); }

/* tia laser */
.lc-cell.preview::after {
  content: ""; position: absolute; width: 16%; height: 16%; border-radius: 50%;
  background: rgba(255,255,255,0.28);
}
.lc-cell.beam::after {
  content: ""; position: absolute; inset: 30%;
  border-radius: 999px;
  animation: lc-beam 0.5s ease-out;
  pointer-events: none;
}
.lc-cell.beam.b1::after { background: #ff5d73; box-shadow: 0 0 10px #ff5d73, 0 0 20px rgba(255,93,115,0.8); }
.lc-cell.beam.b2::after { background: #4dd0e1; box-shadow: 0 0 10px #4dd0e1, 0 0 20px rgba(77,208,225,0.8); }
@keyframes lc-beam { from { transform: scale(0.3); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.lc-cell.hit::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  box-shadow: 0 0 22px 6px rgba(255, 220, 120, 0.9);
  animation: lc-hit 0.6s ease-out infinite alternate;
  z-index: 2;
}
@keyframes lc-hit { from { transform: scale(0.7); opacity: 0.7; } to { transform: scale(1.15); opacity: 1; } }

/* Path Lock Duel */
.pld-wrap {
  width: min(620px, 94vw);
  display: grid;
  gap: 10px;
}
.pld-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.pld-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.pld-shape.active,
.pld-lock.active,
.pld-bomb.active {
  background: var(--accent);
  color: #11142b;
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.26);
}
.pld-gly { font-family: "Segoe UI Symbol","Noto Sans Symbols",sans-serif; font-size: 1.05em; }
.pld-info {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.pld-side {
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.82rem;
  background: rgba(255,255,255,0.05);
  border: 2px solid transparent;
}
.pld-side.p1 { color: #ff8c9c; }
.pld-side.p2 { color: #7fe2f0; }
.pld-side.p1.active { border-color: var(--p1); box-shadow: 0 0 10px rgba(255,93,115,0.4); }
.pld-side.p2.active { border-color: var(--p2); box-shadow: 0 0 10px rgba(77,208,225,0.4); }
.pld-board {
  display: grid;
  grid-template-columns: repeat(var(--pld-n, 7), 1fr);
  grid-template-rows: repeat(var(--pld-n, 7), 1fr);
  gap: 5px;
  width: min(560px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 10px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 93, 115, 0.14), transparent 14%, transparent 86%, rgba(255, 93, 115, 0.14)),
    linear-gradient(180deg, rgba(77, 208, 225, 0.14), transparent 14%, transparent 86%, rgba(77, 208, 225, 0.14)),
    linear-gradient(135deg, #121b36, #0f142d);
  box-shadow: var(--shadow);
}
.pld-cell {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
}
.pld-cell.edge-p1 { background: linear-gradient(90deg, rgba(255,93,115,0.12), rgba(255,255,255,0.05)); }
.pld-cell.edge-p2 { background: linear-gradient(180deg, rgba(77,208,225,0.12), rgba(255,255,255,0.05)); }
.pld-svg { width: 100%; height: 100%; display: block; }
.pld-cell:disabled { opacity: 1; }
.pld-cell.placeable, .pld-cell.lockable {
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.3);
}
.pld-cell.placeable:hover { transform: scale(1.05); background: rgba(255, 209, 102, 0.15); }
.pld-cell.lockable { box-shadow: inset 0 0 0 2px rgba(255, 93, 115, 0.42); }
.pld-cell.lockable:hover { transform: scale(1.05); background: rgba(255, 93, 115, 0.16); }
.pld-cell.tile { cursor: pointer; background: rgba(255,255,255,0.07); }
.pld-cell.tile:hover { transform: scale(1.05); filter: brightness(1.15); }
.pld-cell.tile.p1 { color: #ff7488; }
.pld-cell.tile.p2 { color: #4dd0e1; }
.pld-cell.tile.net1 { color: #ff5d73; box-shadow: inset 0 0 0 2px rgba(255,93,115,0.6); }
.pld-cell.tile.net2 { color: #4dd0e1; box-shadow: inset 0 0 0 2px rgba(77,208,225,0.6); }
.pld-cell.tile.net1.net2 { box-shadow: inset 0 0 0 2px rgba(255,209,102,0.85); }
.pld-cell.tile.net1 .pld-svg { filter: drop-shadow(0 0 4px rgba(255,93,115,0.9)); }
.pld-cell.tile.net2 .pld-svg { filter: drop-shadow(0 0 4px rgba(77,208,225,0.9)); }
.pld-cell.tile.lastmove { outline: 2px solid rgba(255,209,102,0.7); outline-offset: -2px; }
.pld-cell.locked {
  background:
    linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.22) 44%, rgba(255,255,255,0.22) 56%, transparent 60%),
    rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.55);
  font-weight: 900;
  font-size: 1.3rem;
}

/* Hunter vs Swarm */
.hs-wrap {
  width: min(620px, 94vw);
  display: grid;
  gap: 10px;
}
.hs-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.hs-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
}
.hs-stat span { color: var(--muted); font-weight: 700; font-size: 0.82rem; }
.hs-info b { color: var(--accent); }
.hs-bar { height: 6px; border-radius: 999px; background: rgba(0,0,0,0.3); overflow: hidden; }
.hs-bar > i { display: block; height: 100%; border-radius: inherit; transition: width 0.25s; }
.hs-bar.cap > i { background: linear-gradient(90deg, #ffd166, #ff5d73); }
.hs-bar.surv > i { background: linear-gradient(90deg, #8be6f0, #4dd0e1); }
.hs-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 5px;
  width: min(560px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 10px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(110, 231, 183, 0.1), transparent 40%),
    linear-gradient(135deg, #1c3a26, #14241c);
  box-shadow: var(--shadow);
}
.hs-cell {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(120, 180, 120, 0.06);
  color: var(--text);
  font-size: clamp(1rem, 6vw, 1.9rem);
  line-height: 1;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
}
.hs-cell.alt { background: rgba(120, 180, 120, 0.11); }
.hs-cell:disabled { opacity: 1; }
.hs-pc { line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)); }
.hs-cell.hunter { background: radial-gradient(circle at 38% 30%, rgba(255,226,154,0.45), rgba(255,93,115,0.32)); box-shadow: inset 0 0 0 2px rgba(255,209,102,0.4); }
.hs-cell.swarm { background: radial-gradient(circle at 38% 30%, rgba(145,239,255,0.25), rgba(77,208,225,0.18)); }
.hs-cell.swarm.guarded { box-shadow: inset 0 0 0 3px rgba(110,231,183,0.7), 0 0 10px rgba(110,231,183,0.4); }
.hs-cell.swarm.threat { box-shadow: inset 0 0 0 3px rgba(255,93,115,0.7); animation: hs-threat 0.9s ease-in-out infinite alternate; }
@keyframes hs-threat { from { box-shadow: inset 0 0 0 3px rgba(255,93,115,0.4); } to { box-shadow: inset 0 0 0 3px rgba(255,93,115,0.9), 0 0 10px rgba(255,93,115,0.5); } }
.hs-badge {
  position: absolute;
  top: 0; right: 1px;
  font-size: 0.62rem;
  font-style: normal;
  line-height: 1;
}
.hs-badge.danger { color: #ff5d73; }
.hs-cell.lastmove { outline: 2px solid rgba(255,209,102,0.55); outline-offset: -2px; }
.hs-cell.source { cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.44); }
.hs-cell.selected { transform: scale(1.06); box-shadow: inset 0 0 0 3px var(--accent), 0 0 16px rgba(255, 209, 102, 0.4); z-index: 2; }
.hs-cell.legal { cursor: pointer; background: rgba(255, 209, 102, 0.18); box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.55); }
.hs-cell.legal::after { content: ""; width: 26%; height: 26%; border-radius: 50%; background: rgba(255,209,102,0.7); position: absolute; }
.hs-cell.legal.capture { background: rgba(255, 93, 115, 0.24); box-shadow: inset 0 0 0 2px rgba(255, 93, 115, 0.62); }
.hs-cell.legal.capture::after { background: rgba(255,93,115,0.85); width: 40%; height: 40%; }
.hs-cell.legal:hover, .hs-cell.source:hover { transform: scale(1.06); }

/* Reversi */
.rv-root { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rv-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
}
.rv-side {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--surface, #1b2040);
  border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rv-side.active { border-color: var(--accent); box-shadow: 0 0 12px rgba(120, 160, 255, 0.5); }
.rv-chip { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.rv-chip.p1 { background: #1a1a1a; box-shadow: inset 0 2px 3px rgba(255,255,255,0.25); }
.rv-chip.p2 { background: #f5f5f5; box-shadow: inset 0 -2px 3px rgba(0,0,0,0.25); }
.rv-count { font-size: 1.3rem; font-weight: 700; min-width: 22px; text-align: center; }
.rv-name { font-size: 0.85rem; color: var(--muted); }
.rv-turnbadge {
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface, #1b2040);
  white-space: nowrap;
}
.rv-bar {
  width: 100%;
  max-width: 420px;
  height: 8px;
  border-radius: 6px;
  background: #f5f5f5;
  overflow: hidden;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}
.rv-bar-fill { height: 100%; width: 50%; background: #1a1a1a; transition: width 0.35s ease; }
.rv-board {
  display: grid;
  grid-template-columns: repeat(8, 48px);
  grid-template-rows: repeat(8, 48px);
  gap: 3px;
  background: linear-gradient(160deg, #0e6e38, #083f21);
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.06), inset 0 0 30px rgba(0,0,0,0.35);
}
.rv-cell {
  background: linear-gradient(150deg, #169a52, #11793f);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), inset 0 1px 2px rgba(255,255,255,0.08);
}
.rv-cell.legal { background: linear-gradient(150deg, #1cae5d, #169a52); }
.rv-cell.legal::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  animation: rv-hintspin 4s linear infinite;
}
@keyframes rv-hintspin { to { transform: rotate(360deg); } }
.rv-cell.legal:hover, .rv-cell.preview { background: linear-gradient(150deg, #27c873, #1cae5d); }
.rv-hint {
  position: relative;
  z-index: 2;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.rv-cell.lastmove { box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 12px rgba(255,209,102,0.4); }
.rv-disc { width: 38px; height: 38px; perspective: 240px; }
.rv-disc.ghost { opacity: 0.42; }
.rv-coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.rv-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; }
.rv-face.back { transform: rotateY(180deg); }
.rv-face.p1 { background: radial-gradient(circle at 38% 30%, #545454, #0a0a0a 78%); box-shadow: inset 0 2px 3px rgba(255,255,255,0.28), inset 0 -3px 6px rgba(0,0,0,0.7), 0 3px 5px rgba(0,0,0,0.55); }
.rv-face.p2 { background: radial-gradient(circle at 38% 30%, #ffffff, #ccd0db 80%); box-shadow: inset 0 2px 3px rgba(255,255,255,0.95), inset 0 -3px 6px rgba(0,0,0,0.28), 0 3px 5px rgba(0,0,0,0.5); }
.rv-coin.flip { animation: rv-flip 0.5s ease both; }
.rv-disc.placed { animation: rv-pop 0.32s cubic-bezier(0.2,1.6,0.4,1); }
.rv-cell.willflip .rv-coin { animation: rv-pulse 0.6s ease infinite; }
@keyframes rv-flip {
  from { transform: rotateY(180deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes rv-pop {
  0% { transform: scale(0.1); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes rv-pulse {
  0%, 100% { transform: scale(1) translateZ(0); }
  50% { transform: scale(1.1) translateZ(8px); }
}

/* Memory */
.mem-root { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mem-hud {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: min(520px, 94vw); flex-wrap: wrap;
}
.mem-score {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 10px;
  background: var(--panel-2); border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-size: 0.95rem;
}
.mem-score.p1 { color: var(--p1); }
.mem-score.p2 { color: var(--p2); }
.mem-score.p1.turn { border-color: var(--p1); box-shadow: 0 0 12px rgba(255,93,115,0.5); }
.mem-score.p2.turn { border-color: var(--p2); box-shadow: 0 0 12px rgba(77,208,225,0.5); }
.mem-pairs { font-size: 1.3rem; font-weight: 800; }
.mem-combo { font-size: 0.85rem; color: #ffb15c; }
.mem-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); }
.mem-time { font-size: 1.05rem; font-weight: 700; color: var(--text, #e8ecff); }
.mem-left { font-size: 0.75rem; }
.mem-board {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, #1d2750, #11172e 75%);
  box-shadow: inset 0 0 34px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.mem-card {
  width: 80px;
  height: 80px;
  perspective: 800px;
  cursor: pointer;
  user-select: none;
}
.mem-card.matched { cursor: default; }
.mem-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.4, 0.1, 0.35, 1.3);
}
.mem-card.flipped .mem-inner { transform: rotateY(180deg); }
.mem-card:not(.flipped):not(.matched):hover .mem-inner { transform: translateY(-5px) scale(1.04); }
.mem-back, .mem-front {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 5px 12px rgba(0,0,0,0.45);
}
.mem-back {
  font-size: 1.9rem;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0 7px, transparent 7px 14px),
    linear-gradient(135deg, #4a52a8, #232a52);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 12px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.14), inset 0 2px 6px rgba(255,255,255,0.12);
}
.mem-back::after {
  content: ""; position: absolute; inset: 6px; border-radius: 9px;
  border: 2px solid rgba(255, 255, 255, 0.18);
}
.mem-card:not(.flipped):not(.matched):hover .mem-back { box-shadow: 0 10px 18px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.25); filter: brightness(1.1); }
.mem-front {
  font-size: 2.5rem;
  background: linear-gradient(150deg, #fcfdff, #e6eaf6);
  box-shadow: 0 5px 12px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.85), inset 0 -4px 8px rgba(120,130,170,0.3);
  transform: rotateY(180deg);
}
.mem-card.matched .mem-front {
  background: linear-gradient(150deg, #7af0a6, #1f9d57);
  box-shadow: 0 0 18px 3px rgba(46,160,67,0.7), inset 0 0 0 2px rgba(255,255,255,0.6);
  animation: mem-matched 0.5s ease;
}
.mem-card.matched .mem-front::after {
  content: "✓"; position: absolute; top: 4px; right: 7px; font-size: 0.8rem; color: rgba(255,255,255,0.9); font-weight: 900;
}
@keyframes mem-matched {
  0% { transform: rotateY(180deg) scale(1); }
  45% { transform: rotateY(180deg) scale(1.2); }
  100% { transform: rotateY(180deg) scale(1); }
}

.winner-glow { animation: pop 0.5s ease; }
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.app-footer {
  text-align: center;
  padding: 18px;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .ttt-board { grid-template-columns: repeat(3, 84px); grid-template-rows: repeat(3, 84px); }
  .c4-cell { width: 40px; height: 40px; }
  .rv-board { grid-template-columns: repeat(8, 36px); grid-template-rows: repeat(8, 36px); }
  .rv-disc { width: 28px; height: 28px; }
  .mem-card { width: 64px; height: 64px; font-size: 1.8rem; }
}

/* ---------- Chọn chế độ & Sảnh online ---------- */
.mode-view, .lobby-view { position: relative; }

.mode-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  margin: 8px 0 24px;
  font-size: 1.5rem;
}

.mode-view .back-btn,
.lobby-view .back-btn { position: absolute; left: 0; top: 0; }

.mode-cards, .lobby-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

/* ---------- Panel tùy chỉnh ván chơi ---------- */
.options-panel {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-top: 24px;
  box-shadow: var(--shadow);
}
.options-title { margin: 0 0 14px; font-size: 1.05rem; }
.options-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 20px;
}
.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.option-label { color: var(--muted); font-size: 0.9rem; }
.option-select {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 110px;
}
.option-select:focus { outline: 2px solid var(--accent); }

.mode-card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow);
}
.mode-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.mode-icon {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 8px;
  background: #151936;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), var(--shadow);
}
.mode-icon::before,
.mode-icon::after {
  content: "";
  position: absolute;
}
.mode-icon-local::before {
  left: 13px;
  top: 24px;
  width: 38px;
  height: 19px;
  border-radius: 5px 5px 8px 8px;
  background: var(--accent);
}
.mode-icon-local::after {
  left: 18px;
  top: 17px;
  width: 28px;
  height: 16px;
  border-radius: 6px 6px 3px 3px;
  border: 4px solid var(--p2);
  border-bottom: 0;
}
.mode-icon-online::before {
  left: 14px;
  top: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 4px solid var(--p2);
}
.mode-icon-online::after {
  left: 30px;
  top: 9px;
  width: 4px;
  height: 46px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: -14px 18px 0 -1px var(--p2), 14px 18px 0 -1px var(--p2);
}
.mode-card h3 { margin: 12px 0 6px; }
.mode-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.mode-card.disabled { opacity: 0.4; pointer-events: none; filter: grayscale(1); }

.lobby-panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lobby-panel h3 { margin: 0; }
.lobby-panel p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.player-name-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}
.player-name-input:focus {
  outline: 2px solid var(--accent);
  border-color: transparent;
}
.lobby-game-select {
  width: 100%;
}

/* ---------- Phòng công khai ---------- */
.lobby-public {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 0;
}
.lobby-public input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.public-rooms {
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}
.public-rooms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 0.92rem;
}
.public-rooms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.public-empty {
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
  padding: 18px 10px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 12px;
}
.public-room {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(42,48,96,0.55), rgba(24,28,58,0.75));
  border: 1px solid rgba(255,255,255,0.07);
}
.pr-poster { flex: 0 0 auto; width: 56px; }
.pr-poster .game-poster { height: 40px; border-radius: 8px; }
.pr-poster .poster-emoji { font-size: 1.5rem; }
.pr-poster .poster-mark { display: none; }
.pr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pr-info b { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-info small { color: var(--muted); font-size: 0.76rem; }
.pr-wait {
  display: inline-block;
  margin-left: 4px;
  color: var(--accent);
  font-weight: 700;
  animation: bs-pending 1.2s ease-in-out infinite;
}
.pr-join { flex: 0 0 auto; }
body.theme-light .public-room { background: linear-gradient(160deg, #ffffff, #f1f4fd); border-color: rgba(20,30,80,0.08); }
.lobby-options {
  margin-top: 0;
  padding: 12px;
  box-shadow: none;
}
.lobby-options .options-title {
  font-size: 0.92rem;
}
.lobby-options .options-list {
  grid-template-columns: 1fr;
  gap: 10px;
}

.btn.primary { background: var(--grad-accent); color: #2a1606; font-weight: 700; border: none; box-shadow: 0 8px 22px rgba(255, 140, 90, 0.35); }
.btn.primary:hover { filter: brightness(1.06); color: #2a1606; box-shadow: 0 10px 28px rgba(255, 140, 90, 0.5); }
.btn.small { padding: 6px 12px; font-size: 0.85rem; }

.code-input {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: var(--text);
  font-size: 1.6rem;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 12px;
  width: 100%;
}
.code-input:focus { outline: 2px solid var(--accent); }

.room-code {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 16px;
}
.room-code-label { color: var(--muted); font-size: 0.85rem; }
.room-code-val {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--accent);
}
.waiting { color: var(--muted); font-size: 0.85rem; margin: 4px 0 0; }
.lobby-error { color: var(--p1); font-size: 0.9rem; min-height: 1.2em; }

.room-state {
  width: min(720px, 100%);
  margin: 0 auto 14px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
}
.room-state[data-state="waiting"] {
  border-color: rgba(255, 209, 102, 0.32);
  background: rgba(255, 209, 102, 0.1);
  color: var(--accent);
}
.room-state[data-state="live"] {
  border-color: rgba(110, 231, 183, 0.32);
  background: rgba(110, 231, 183, 0.09);
  color: var(--good);
}
.room-state[data-state="left"] {
  border-color: rgba(255, 93, 115, 0.32);
  background: rgba(255, 93, 115, 0.1);
  color: var(--p1);
}
.online-room-state {
  margin-top: -4px;
  margin-bottom: 14px;
}

.online-badge {
  text-align: center;
  margin: -8px auto 16px;
  background: var(--bg-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px 16px;
  width: fit-content;
  font-size: 0.85rem;
  color: var(--good);
}

.tag-local {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ---------- Gomoku (Caro 15x15) ---------- */
.gmk-board {
  display: grid;
  background: #d9a441;
  border: 3px solid #a9742a;
  border-radius: 8px;
  padding: 6px;
  box-shadow: var(--shadow);
  width: min(540px, 92vw);
  aspect-ratio: 1 / 1;
  container-type: inline-size;
}
.gmk-cell {
  position: relative;
  border: 1px solid #b9842f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gmk-stone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 900;
  line-height: 1;
  font-size: calc(64cqw / var(--n, 15));
  animation: gmk-pop 0.18s ease;
}
.gmk-stone.p1 { color: #d6273f; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.gmk-stone.p2 { color: #1180c4; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
@keyframes gmk-pop {
  0% { transform: scale(0.2); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.gmk-cell.last { background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 2px var(--accent); }
.gmk-cell.win { background: rgba(110, 231, 183, 0.7); }
.gmk-cell.win .gmk-stone { color: #0b3d2e; }

/* ---------- Dots and Boxes ---------- */
.dnb-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.dnb-header {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: min(460px, 94vw);
}
.dnb-score {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 2px solid transparent;
}
.dnb-score span { font-size: 0.78rem; color: var(--muted); }
.dnb-score b { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.dnb-score.p1 b { color: var(--p1); }
.dnb-score.p2 b { color: var(--p2); }
.dnb-score.p1.active { border-color: var(--p1); box-shadow: 0 0 10px rgba(255,93,115,0.4); }
.dnb-score.p2.active { border-color: var(--p2); box-shadow: 0 0 10px rgba(77,208,225,0.4); }
.dnb-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-width: 110px;
  text-align: center;
}
.dnb-mid span { font-size: 0.82rem; color: var(--text); }
.dnb-mid small { font-size: 0.72rem; color: var(--accent); }
.dnb-board {
  display: grid;
  align-items: center;
  justify-items: center;
  background: var(--panel);
  padding: 16px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-width: 96vw;
  overflow: auto;
  --dnb-u: 46px;
  --dnb-t: 10px;
}
.dnb-dot { width: calc(var(--dnb-t) + 4px); height: calc(var(--dnb-t) + 4px); border-radius: 50%; background: var(--muted); }
.dnb-h { width: var(--dnb-u); height: var(--dnb-t); border-radius: 5px; background: rgba(255,255,255,0.08); cursor: pointer; transition: background 0.12s; }
.dnb-v { width: var(--dnb-t); height: var(--dnb-u); border-radius: 5px; background: rgba(255,255,255,0.08); cursor: pointer; transition: background 0.12s; }
.dnb-h:hover, .dnb-v:hover { background: var(--accent); }
.dnb-h.on, .dnb-v.on { cursor: default; }
.dnb-h.on:hover, .dnb-v.on:hover { background: inherit; }
.dnb-h.p1, .dnb-v.p1 { background: var(--p1); }
.dnb-h.p2, .dnb-v.p2 { background: var(--p2); }
.dnb-h.last, .dnb-v.last { box-shadow: 0 0 0 2px var(--accent); }
.dnb-box {
  width: var(--dnb-u); height: var(--dnb-u);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: rgba(255,255,255,0.85);
  font-size: clamp(0.7rem, 2.4vw, 1rem);
}
.dnb-box.star { color: rgba(255,209,102,0.55); }
.dnb-box.own-p1 { background: rgba(255, 93, 115, 0.35); color: #fff; }
.dnb-box.own-p2 { background: rgba(77, 208, 225, 0.35); color: #fff; }
.dnb-box.claimed { animation: dnb-pop 0.25s ease-out; }
@keyframes dnb-pop { from { transform: scale(0.4); } to { transform: scale(1); } }

/* ---------- Chat panel ---------- */
.chat-panel {
  width: min(520px, 100%);
  margin: 8px auto 0;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--panel-2);
  font-weight: 600;
  font-size: 0.95rem;
}
.chat-panel.has-unread .chat-header {
  background: var(--accent);
  color: #1a1a1a;
  animation: chatPulse 1s ease-in-out infinite;
}
.chat-panel.has-unread .chat-header::after {
  content: "● tin mới";
  font-size: 0.75rem;
  font-weight: 700;
}
@keyframes chatPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}
.chat-toggle {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}
.chat-body { display: flex; flex-direction: column; }
.chat-panel.collapsed .chat-body { display: none; }

.chat-messages {
  height: 180px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-msg {
  max-width: 80%;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.35;
  word-break: break-word;
}
.chat-msg .chat-msg-who {
  display: block;
  font-size: 0.7rem;
  opacity: 0.75;
  margin-bottom: 2px;
}
.chat-msg.me { align-self: flex-end; background: var(--p2); color: #06222a; }
.chat-msg.them { align-self: flex-start; background: var(--panel-2); }
.chat-msg.sys {
  align-self: center;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 0.9rem;
}
.chat-input:focus { outline: 2px solid var(--accent); }

.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 12px;
}
.chat-quick-btn {
  background: var(--bg-soft);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--text);
  padding: 5px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-quick-btn:hover { background: var(--accent); color: #1a1a1a; }
.chat-emotes { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; margin-bottom: 6px; }
.chat-emote-btn {
  width: 38px; height: 38px;
  font-size: 1.3rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--bg-soft);
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.chat-emote-btn:hover { transform: scale(1.15); background: var(--panel-2); }

/* ---------- Nút hướng dẫn & bố cục game-bar ---------- */
.game-bar-right { display: flex; align-items: center; gap: 8px; }
.icon-btn { padding: 10px 12px; font-size: 1rem; line-height: 1; }

/* ---------- Modal hướng dẫn ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 24, 0.7);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

/* ---------- Tour hướng dẫn lần đầu ---------- */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: auto;
}
.tour-ring {
  position: fixed;
  border-radius: 12px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(6, 8, 20, 0.72), 0 0 18px rgba(255, 209, 102, 0.6);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
  pointer-events: none;
}
.tour-card {
  position: fixed;
  width: min(320px, 86vw);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: var(--glow);
  padding: 16px 18px;
  z-index: 201;
}
.tour-card h3 { margin: 0 0 6px; font-family: var(--font-head); font-size: 1.1rem; }
.tour-card p { margin: 0 0 14px; color: var(--muted); line-height: 1.5; font-size: 0.92rem; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-step { margin-right: auto; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
body.theme-light .tour-ring { box-shadow: 0 0 0 9999px rgba(20, 26, 50, 0.45), 0 0 18px rgba(255, 170, 90, 0.6); }

/* ---------- Overlay xem lại ván ---------- */
.replay-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 24, 0.82);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 320;
}
.replay-modal {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  box-shadow: var(--glow);
  width: min(640px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  animation: pop 0.25s ease;
}
.replay-head { display: flex; align-items: center; justify-content: space-between; }
.replay-head h3 { margin: 0; font-family: var(--font-head); font-size: 1.15rem; }
.replay-board {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  pointer-events: none;
}
.replay-status { text-align: center; color: var(--muted); font-size: 0.9rem; min-height: 1.2em; }
.replay-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.replay-progress {
  margin-left: 6px;
  font-weight: 700;
  color: var(--accent);
  font-size: 0.9rem;
  min-width: 52px;
  text-align: center;
}
.modal {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(520px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: pop 0.25s ease;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.modal-close:hover { background: var(--panel-2); color: var(--text); }
.modal-body { padding: 8px 20px; overflow-y: auto; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
}

.help-list {
  margin: 12px 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-list li { line-height: 1.55; color: var(--text); }
.help-list li::marker { color: var(--accent); font-weight: 700; }

/* ---------- Nim (Bốc Sỏi) ---------- */
.nim-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.nim-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.nim-turn {
  font-size: 1.05rem;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.nim-turn.p1 { color: #ff8a99; box-shadow: inset 0 0 0 1px rgba(255,108,127,0.45); }
.nim-turn.p2 { color: #7fe2f0; box-shadow: inset 0 0 0 1px rgba(85,214,232,0.45); }
.nim-rule { color: var(--muted); font-size: 0.82rem; }
.nim-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,209,102,0.08), transparent 60%),
    var(--panel);
  padding: 20px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: min(460px, 92vw);
}
.nim-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}
.nim-label {
  width: 64px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}
.nim-tray {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.32));
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35);
}
.nim-row.empty .nim-tray { opacity: 0.5; }
.nim-count {
  width: 28px;
  text-align: center;
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.nim-stone {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff, var(--sc, #9aa6e0) 42%, rgba(0,0,0,0.35));
  box-shadow: 0 3px 5px rgba(0,0,0,0.4), inset 0 -3px 6px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.4);
  cursor: default;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.12s, box-shadow 0.15s, opacity 0.2s, filter 0.12s;
}
.nim-stone::before {
  content: ""; position: absolute; top: 16%; left: 24%; width: 30%; height: 24%;
  border-radius: 50%; background: rgba(255,255,255,0.65); filter: blur(1px);
}
.nim-stone.pickable { cursor: pointer; }
.nim-stone.pickable:hover { transform: translateY(-4px) scale(1.08) rotate(var(--rot, 0deg)); filter: brightness(1.15); box-shadow: 0 7px 11px rgba(0,0,0,0.5), inset 0 -3px 6px rgba(0,0,0,0.3); }
.nim-stone.locked { opacity: 0.38; filter: grayscale(0.4); }
.nim-stone.taking {
  background: radial-gradient(circle at 34% 28%, #fff6d8, #ffd166 45%, #c98a1a);
  box-shadow: 0 0 0 3px var(--accent), 0 6px 10px rgba(0,0,0,0.5), 0 0 14px rgba(255,209,102,0.7);
  animation: nimTake 0.8s ease-in-out infinite;
}
@keyframes nimTake { 0%,100% { transform: translateY(-2px) scale(1.05) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-5px) scale(1.12) rotate(var(--rot, 0deg)); } }
.nim-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.nim-actions .nim-clear:disabled { opacity: 0.4; }

/* ---------- Hex ---------- */
.hex-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.hex-header {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: min(460px, 94vw);
}
.hex-side {
  flex: 1;
  text-align: center;
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 800;
  background: rgba(255,255,255,0.05);
  border: 2px solid transparent;
}
.hex-side.p1 { color: #ff8c9c; }
.hex-side.p2 { color: #7fe2f0; }
.hex-side.p1.active { border-color: var(--p1); box-shadow: 0 0 10px rgba(255,93,115,0.4); }
.hex-side.p2.active { border-color: var(--p2); box-shadow: 0 0 10px rgba(77,208,225,0.4); }
.hex-vs { display: flex; align-items: center; font-weight: 900; color: var(--muted); font-size: 0.85rem; }
.hex-wrap {
  overflow-x: auto;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,93,115,0.1), transparent 45%),
    radial-gradient(circle at 0% 50%, rgba(77,208,225,0.1), transparent 45%),
    var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 100%;
}
.hex-grid {
  display: inline-flex;
  flex-direction: column;
  font-size: 25px; /* điều khiển kích thước ô qua em (set lại bằng JS) */
}
.hex-row {
  display: flex;
  align-items: flex-start;
  height: 1.62em;        /* < chiều cao ô để các hàng chồng khít */
}
.hex-cell {
  width: 1.9em;
  height: 2.14em;
  flex-shrink: 0;
  background: #2a3060;
  cursor: pointer;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background 0.12s, filter 0.15s, transform 0.08s;
}
.hex-cell.edge-red { background: #4a2740; }
.hex-cell.edge-blue { background: #1f3a4a; }
.hex-cell.edge-red.edge-blue { background: #3a3048; }
.hex-cell:hover { filter: brightness(1.25); }
.hex-grid.turn-p1 .hex-cell:not(.p1):not(.p2):hover { background: rgba(255,93,115,0.5); }
.hex-grid.turn-p2 .hex-cell:not(.p1):not(.p2):hover { background: rgba(77,208,225,0.5); }
.hex-cell.p1 { background: radial-gradient(circle at 38% 30%, #ff9aa8, #d33049); }
.hex-cell.p2 { background: radial-gradient(circle at 38% 30%, #9af0fb, #1aa7bd); }
.hex-cell.p1.linked { filter: drop-shadow(0 0 4px rgba(255,93,115,0.95)); }
.hex-cell.p2.linked { filter: drop-shadow(0 0 4px rgba(77,208,225,0.95)); }
.hex-cell.last { filter: brightness(1.45) drop-shadow(0 0 5px rgba(255,209,102,0.9)); }
.hex-cell.win {
  background: radial-gradient(circle at 38% 30%, #d6ffe9, #2fd08a);
  animation: hex-win 0.7s ease-in-out infinite alternate;
}
@keyframes hex-win { from { filter: brightness(1); } to { filter: brightness(1.5) drop-shadow(0 0 6px rgba(110,231,183,0.9)); } }

/* ---------- Mancala ---------- */
.mnc-board {
  display: flex;
  align-items: stretch;
  max-width: 100%;
  gap: 14px;
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,0.05) 0 7px, rgba(255,255,255,0.028) 7px 14px),
    linear-gradient(135deg, #8a5a30, #573413);
  padding: 18px;
  border-radius: 26px;
  box-shadow: 0 16px 42px rgba(0,0,0,0.55), inset 0 0 0 3px rgba(255,255,255,0.08), inset 0 0 32px rgba(0,0,0,0.4);
}
.mnc-store {
  position: relative;
  width: 74px;
  min-height: 150px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 26%, rgba(255,255,255,0.1), transparent 55%),
    radial-gradient(ellipse at 50% 55%, #341f0d, #4a2e16 78%);
  border-radius: 30px;
  box-shadow: inset 0 9px 18px rgba(0, 0, 0, 0.6), inset 0 -3px 5px rgba(255,255,255,0.1), 0 1px 0 rgba(255,255,255,0.07);
  transition: box-shadow 0.2s, transform 0.2s;
}
.mnc-store.grab { box-shadow: inset 0 9px 18px rgba(0,0,0,0.6), 0 0 0 3px var(--accent), 0 0 20px rgba(255,209,102,0.65); transform: scale(1.04); }
.mnc-mid { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.mnc-row { display: flex; gap: 12px; }
.mnc-pit {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #3a2410, #57361a 68%, #6e4824);
  cursor: default;
  box-shadow: inset 0 7px 13px rgba(0, 0, 0, 0.6), inset 0 -3px 4px rgba(255,255,255,0.12), 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.1s, box-shadow 0.15s;
}
.mnc-pit.playable { cursor: pointer; box-shadow: inset 0 7px 13px rgba(0,0,0,0.6), 0 0 0 3px var(--accent), 0 0 16px rgba(255,209,102,0.5); animation: mncBob 1.5s ease-in-out infinite; }
.mnc-pit.playable:hover { transform: scale(1.08); animation: none; }
@keyframes mncBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.mnc-pit.empty { opacity: 0.85; }
.mnc-stones {
  position: absolute;
  inset: 0;
}
.mnc-pit-num, .mnc-store-num {
  position: absolute;
  z-index: 3;
  font-size: 0.72rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
}
.mnc-pit-num { right: 3px; bottom: 1px; }
.mnc-store-num { left: 0; right: 0; bottom: 4px; text-align: center; font-size: 0.9rem; }
.mnc-stone {
  position: absolute;
  width: 13px;
  height: 12px;
  border-radius: 48% 52% 50% 50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,0.92), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 65% 75%, rgba(0,0,0,0.35), transparent 50%),
    #d8d1bd;
  box-shadow: 0 2px 3px rgba(0,0,0,0.4), inset -1px -2px 3px rgba(0,0,0,0.3);
}
.mnc-stone.s1 { background: radial-gradient(circle at 33% 27%, rgba(255,255,255,0.9), transparent 42%), radial-gradient(circle at 65% 75%, rgba(0,0,0,0.35), transparent 50%), #b7c0c8; }
.mnc-stone.s2 { background: radial-gradient(circle at 33% 27%, rgba(255,255,255,0.9), transparent 42%), radial-gradient(circle at 65% 75%, rgba(0,0,0,0.35), transparent 50%), #d9c29a; border-radius: 52% 48% 54% 46%; }
.mnc-stone.s3 { background: radial-gradient(circle at 33% 27%, rgba(255,255,255,0.9), transparent 42%), radial-gradient(circle at 65% 75%, rgba(0,0,0,0.35), transparent 50%), #a9b0a0; }
.mnc-stone.s4 { background: radial-gradient(circle at 33% 27%, rgba(255,255,255,0.9), transparent 42%), radial-gradient(circle at 65% 75%, rgba(0,0,0,0.35), transparent 50%), #c8b7a7; border-radius: 50% 50% 46% 54%; }
.mnc-stone.s5 { background: radial-gradient(circle at 33% 27%, rgba(255,255,255,0.9), transparent 42%), radial-gradient(circle at 65% 75%, rgba(0,0,0,0.35), transparent 50%), #e6dfce; }
.mnc-stone.st { width: 11px; height: 10px; }
.mnc-pit-stones.many .mnc-stone { width: 10px; height: 9px; }
.mnc-store-stones.many .mnc-stone { width: 8px; height: 7px; }
.mnc-stone.drop {
  animation: mnc-drop 0.32s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
@keyframes mnc-drop {
  0% { transform: translate(-50%, -240%) rotate(var(--rot, 0deg)) scale(1.35); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
}

/* ---------- Order & Chaos ---------- */
.oc-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.oc-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(460px, 92vw);
}
.oc-role {
  font-size: 1rem;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.oc-role.order { color: #ffd166; box-shadow: inset 0 0 0 1px rgba(255,209,102,0.5); }
.oc-role.chaos { color: #c792ea; box-shadow: inset 0 0 0 1px rgba(199,146,234,0.5); }
.oc-meters {
  display: flex;
  gap: 12px;
  width: 100%;
}
.oc-meter {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.74rem;
  color: var(--muted);
}
.oc-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.3);
  overflow: hidden;
}
.oc-bar i { display: block; height: 100%; border-radius: inherit; transition: width 0.2s; }
.oc-bar.order i { background: linear-gradient(90deg, #ffd166, #ff8a5d); }
.oc-bar.chaos i { background: linear-gradient(90deg, #c792ea, #6e8bff); }
.oc-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.oc-picker.disabled { opacity: 0.5; pointer-events: none; }
.oc-picker-label { color: var(--muted); font-size: 0.9rem; }
.oc-picker-hint { color: var(--muted); font-size: 0.74rem; }
.oc-sym-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: var(--panel-2);
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.oc-sym-btn.x.active { border-color: var(--p1); background: var(--p1); color: #1a1a1a; }
.oc-sym-btn.o.active { border-color: var(--p2); background: var(--p2); color: #1a1a1a; }

.oc-board {
  display: grid;
  gap: 6px;
  background: var(--panel-2);
  padding: 8px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  width: min(460px, 92vw);
}
.oc-board.big { gap: 4px; padding: 6px; }
.oc-cell {
  background: var(--panel);
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 5vw, 1.8rem);
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}
.oc-board.big .oc-cell { border-radius: 6px; }
.oc-cell:hover { background: var(--panel-2); }
.oc-cell.x { color: var(--p1); }
.oc-cell.o { color: var(--p2); }
.oc-cell.ghost { opacity: 0.42; }
.oc-cell.pending {
  opacity: 0.85;
  box-shadow: inset 0 0 0 3px var(--accent);
  animation: oc-blink 0.7s ease-in-out infinite alternate;
}
@keyframes oc-blink { from { box-shadow: inset 0 0 0 3px rgba(255,209,102,0.5); } to { box-shadow: inset 0 0 0 3px rgba(255,209,102,1); } }
.oc-cell.last { box-shadow: inset 0 0 0 2px rgba(255,209,102,0.7); }
.oc-cell.win {
  background: var(--good);
  color: #0f1226;
  animation: oc-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes oc-pulse { from { filter: brightness(1); } to { filter: brightness(1.3); } }

/* ---------- Cờ Đam (Checkers) ---------- */
.chk-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.chk-hud {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: min(480px, 92vw);
}
.chk-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 2px solid transparent;
}
.chk-side span { font-size: 0.78rem; color: var(--muted); }
.chk-side b { font-size: 1rem; font-weight: 900; }
.chk-side.p1 b { color: #ff7d8f; }
.chk-side.p2 b { color: #cfd6e6; }
.chk-side.p1.active { border-color: var(--p1); box-shadow: 0 0 10px rgba(255,93,115,0.4); }
.chk-side.p2.active { border-color: #cfd6e6; box-shadow: 0 0 10px rgba(200,210,230,0.35); }
.chk-mid { display: flex; align-items: center; font-weight: 900; color: var(--muted); font-size: 0.82rem; }
.chk-tray { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; min-height: 10px; max-width: 120px; }
.chk-mini { width: 9px; height: 9px; border-radius: 50%; }
.chk-mini.p1 { background: radial-gradient(circle at 35% 30%, #ff7d8f, #d33049); }
.chk-mini.p2 { background: radial-gradient(circle at 35% 30%, #666, #111); }
.chk-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(480px, 92vw);
  aspect-ratio: 1 / 1;
  border: 6px solid #5a3a1a;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow), inset 0 0 30px rgba(0,0,0,0.4);
}
.chk-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chk-cell.light { background: linear-gradient(135deg, #efd9b4, #e2c79a); }
.chk-cell.dark { background: linear-gradient(135deg, #9a6b3b, #82592f); cursor: pointer; }
.chk-cell.lastfrom::before, .chk-cell.lastto::before {
  content: ""; position: absolute; inset: 0; background: rgba(255,209,102,0.28);
}
.chk-cell.lastto::before { background: rgba(255,209,102,0.4); }
.chk-cell.sel { box-shadow: inset 0 0 0 4px var(--accent); }
.chk-cell.hint::after {
  content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%;
  background: rgba(110, 231, 183, 0.75);
  box-shadow: 0 0 8px rgba(110,231,183,0.5);
}
.chk-cell.caphint::after {
  content: ""; position: absolute; width: 70%; height: 70%; border-radius: 50%;
  border: 3px solid rgba(255,93,115,0.85);
  box-shadow: 0 0 10px rgba(255,93,115,0.5);
}
.chk-cell.captarget::after {
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255,93,115,0.9), 0 0 12px rgba(255,93,115,0.6);
  animation: chk-cap 0.8s ease-in-out infinite alternate;
}
@keyframes chk-cap { from { opacity: 0.6; } to { opacity: 1; } }
.chk-piece {
  width: 74%;
  height: 74%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.45), inset 0 -5px 9px rgba(0,0,0,0.45), inset 0 3px 5px rgba(255,255,255,0.35);
  position: relative;
}
.chk-piece::before {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18);
}
.chk-piece.p1 { background: radial-gradient(circle at 36% 28%, #ff9aa8, #ff5d73 55%, #a8243a); }
.chk-piece.p2 { background: radial-gradient(circle at 36% 28%, #6a7180, #2a2e38 55%, #0c0e14); }
.chk-piece.king i { font-style: normal; font-size: 1.2rem; color: #ffe08a; text-shadow: 0 1px 2px rgba(0,0,0,0.6); z-index: 1; }
.chk-piece.king { box-shadow: 0 3px 6px rgba(0,0,0,0.45), inset 0 0 0 3px rgba(255,209,102,0.85), inset 0 -5px 9px rgba(0,0,0,0.45); }

/* ---------- Cờ Hawaii (Kōnane) ---------- */
.kon-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.kon-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}
.kon-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.kon-side b { font-size: 0.95rem; }
.kon-side.p2 { text-align: right; }
.kon-side.active { border-color: var(--accent); background: rgba(255,209,102,0.12); box-shadow: 0 0 14px rgba(255,209,102,0.28); }
.kon-mid { font-weight: 700; opacity: 0.7; padding: 0 6px; }
.kon-board {
  display: grid;
  gap: 0;
  width: min(92vw, 520px);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 8px solid #4a2f1a;
  background:
    repeating-linear-gradient(94deg, rgba(0,0,0,0.05) 0 3px, rgba(255,255,255,0.03) 3px 7px);
  box-shadow:
    var(--shadow),
    0 10px 28px rgba(0,0,0,0.45),
    inset 0 0 36px rgba(0,0,0,0.45);
}
.kon-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.kon-cell.l { background: linear-gradient(135deg, #f0dab5 0%, #e6cda0 100%); }
.kon-cell.d { background: linear-gradient(135deg, #caa066 0%, #b07c45 100%); }
.kon-cell.l::before, .kon-cell.d::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(78deg, rgba(120,80,40,0.06) 0 2px, transparent 2px 6px);
}
.kon-cell.lastfrom, .kon-cell.lastto { background-image: linear-gradient(rgba(255,209,102,0.26), rgba(255,209,102,0.26)); }
.kon-cell.lastto { background-image: linear-gradient(rgba(255,209,102,0.4), rgba(255,209,102,0.4)); }
.kon-cell.sel { box-shadow: inset 0 0 0 4px var(--accent), inset 0 0 18px rgba(255,209,102,0.45); }
.kon-cell.hint::after {
  content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #b8ffd8, #4fd99a);
  box-shadow: 0 0 12px rgba(110,231,183,0.7);
  animation: kon-pulse 1.2s ease-in-out infinite;
}
.kon-cell.remove::after {
  content: ""; position: absolute; inset: 16%; border-radius: 50%;
  border: 3px solid rgba(255,209,102,0.95);
  box-shadow: 0 0 12px rgba(255,209,102,0.6), inset 0 0 10px rgba(255,209,102,0.4);
  animation: kon-pulse 1.2s ease-in-out infinite;
}
@keyframes kon-pulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 1; } }
.kon-piece {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  position: relative;
  animation: kon-drop 0.22s ease-out;
}
@keyframes kon-drop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kon-piece::before {
  content: ""; position: absolute; inset: 18%; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16);
}
.kon-piece::after {
  content: ""; position: absolute; left: 24%; top: 16%; width: 28%; height: 22%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55), transparent 70%);
  pointer-events: none;
}
.kon-piece.p1 { background: radial-gradient(circle at 36% 28%, #7c8493, #2a2e38 52%, #05070b); box-shadow: 0 3px 7px rgba(0,0,0,0.55), inset 0 -3px 6px rgba(0,0,0,0.5); }
.kon-piece.p2 { background: radial-gradient(circle at 36% 28%, #ffffff, #ececed 52%, #b2b2bd); box-shadow: 0 3px 7px rgba(0,0,0,0.4), inset 0 -3px 6px rgba(0,0,0,0.2); }
.kon-piece.win { animation: kon-win 0.9s ease-in-out infinite; z-index: 2; }
@keyframes kon-win {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,209,102,0.9), 0 0 10px rgba(255,209,102,0.5); transform: scale(1); }
  50% { box-shadow: 0 0 0 4px rgba(255,209,102,1), 0 0 22px rgba(255,209,102,0.95); transform: scale(1.1); }
}

/* ---------- Tổ Ong (Hive) ---------- */
.hive-root { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.hive-hud {
  display: flex; align-items: stretch; justify-content: center; gap: 10px; width: 100%; max-width: 560px;
}
.hive-side {
  flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 12px;
  background: var(--card); box-shadow: var(--shadow); border: 2px solid transparent; font-size: 0.9rem;
}
.hive-side.active { border-color: var(--accent); }
.hive-side.p1 { color: #ff8c3b; }
.hive-side.p2 { color: #b07cff; }
.hive-side b { color: var(--text); font-size: 0.85rem; min-height: 1em; }
.hive-mid { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); padding: 0 4px; }

.hive-tray {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; max-width: 600px;
}
.hive-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; cursor: pointer;
  border: 2px solid rgba(0,0,0,0.15); background: var(--card); color: var(--text); line-height: 1.15;
  transition: transform 0.08s, box-shadow 0.12s; text-align: left;
}
.hive-chip:disabled { opacity: 0.45; cursor: default; }
.hive-chip:not(:disabled):hover { transform: translateY(-2px); }
.hive-chip.sel { box-shadow: 0 0 0 3px var(--accent); }
.hive-chip.pc-p1 { background: linear-gradient(135deg, #ffb778, #ff8c3b); color: #3a1d05; }
.hive-chip.pc-p2 { background: linear-gradient(135deg, #d2b3ff, #b07cff); color: #2a1147; }
.hive-chip .hive-emoji { font-size: 1.35rem; }
.hive-label { display: flex; flex-direction: column; }
.hive-label b { font-size: 0.78rem; font-weight: 700; }
.hive-label i { font-size: 0.64rem; font-style: normal; opacity: 0.78; max-width: 120px; }
.hive-cnt { font-size: 0.8rem; font-weight: 700; margin-left: 2px; }

.hive-wrap {
  width: 100%; max-width: 640px; overflow: auto; border-radius: 16px;
  background:
    radial-gradient(circle at 50% 35%, #2f3542, #14171f 75%),
    repeating-linear-gradient(60deg, rgba(255,255,255,0.012) 0 12px, transparent 12px 24px);
  box-shadow: var(--shadow), inset 0 0 50px rgba(0,0,0,0.5); padding: 12px;
}
.hive-stage { position: relative; margin: 0 auto; min-height: 120px; }
.hive-hex {
  position: absolute; width: 50px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; cursor: pointer;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: filter 0.12s, transform 0.1s;
  animation: hive-pop 0.2s ease-out;
}
@keyframes hive-pop { from { transform: scale(0.5); } to { transform: scale(1); } }
.hive-hex .hive-emoji { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.hive-hex.pc-p1 { background: linear-gradient(155deg, #ffcd9a 0%, #ff8c3b 55%, #e06d18 100%); }
.hive-hex.pc-p2 { background: linear-gradient(155deg, #e2c9ff 0%, #b07cff 55%, #8c4ee0 100%); }
.hive-hex.pc-p1::after, .hive-hex.pc-p2::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, rgba(255,255,255,0.35), transparent 45%);
}
.hive-hex.stacked { box-shadow: 0 0 0 2px #ffe08a, 0 4px 10px rgba(0,0,0,0.5); filter: brightness(1.08); }
.hive-hex.last { filter: drop-shadow(0 0 7px rgba(255,209,102,0.95)) brightness(1.12); z-index: 2; }
.hive-hex.sel { filter: drop-shadow(0 0 9px var(--accent)) brightness(1.15); transform: scale(1.06); z-index: 3; }
.hive-hex.win { animation: hive-win 0.85s ease-in-out infinite; z-index: 4; }
@keyframes hive-win {
  0%,100% { filter: drop-shadow(0 0 6px rgba(255,93,115,0.9)) brightness(1.05); transform: scale(1); }
  50% { filter: drop-shadow(0 0 16px rgba(255,93,115,1)) brightness(1.25); transform: scale(1.1); }
}
.hive-hex.target {
  background: rgba(110, 231, 183, 0.28); cursor: pointer;
  outline: 2px dashed rgba(110,231,183,0.85); outline-offset: -4px; font-size: 0;
  animation: hive-glow 1.3s ease-in-out infinite;
}
@keyframes hive-glow { 0%,100% { background: rgba(110,231,183,0.2); } 50% { background: rgba(110,231,183,0.42); } }
.hive-hex.target:hover { background: rgba(110, 231, 183, 0.55) !important; }
.hive-emoji { pointer-events: none; }
.hive-stack {
  position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 0.7rem; font-weight: 700;
  color: #fff; background: rgba(0,0,0,0.65); border-radius: 50%; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ---------- Tak (Đường Đá) ---------- */
.tak-root { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.tak-hud {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: 460px;
}
.tak-side {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; border-radius: 12px; background: var(--card); border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tak-side span { font-size: 0.85rem; opacity: 0.9; }
.tak-side b { font-size: 1.05rem; }
.tak-side.p1.active { border-color: #5b8cff; box-shadow: 0 0 12px rgba(91,140,255,0.5); }
.tak-side.p2.active { border-color: #ff9d4d; box-shadow: 0 0 12px rgba(255,157,77,0.5); }
.tak-mid { font-weight: 700; opacity: 0.6; }
.tak-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; max-width: 520px;
}
.tak-btn {
  padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border, #3a3f4b);
  background: var(--card); color: var(--text); cursor: pointer; font-size: 0.85rem;
}
.tak-btn.mini { padding: 4px 9px; min-width: 28px; }
.tak-btn.on { background: var(--accent); color: #08111f; border-color: var(--accent); font-weight: 700; }
.tak-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tak-hint { font-size: 0.82rem; opacity: 0.85; }
.tak-grp { font-size: 0.82rem; font-weight: 700; opacity: 0.9; margin-left: 4px; }
.tak-tip { flex-basis: 100%; text-align: center; color: var(--accent); opacity: 0.95; }
.tak-wrap { width: 100%; display: flex; justify-content: center; }
.tak-board {
  display: grid; gap: 5px; padding: 12px; border-radius: 16px;
  background:
    linear-gradient(135deg, #7a5a38, #4f3a24),
    repeating-linear-gradient(48deg, rgba(0,0,0,0.05) 0 4px, transparent 4px 9px);
  box-shadow: var(--shadow), 0 12px 30px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.45);
}
.tak-cell {
  width: min(15vw, 68px); height: min(15vw, 68px);
  border-radius: 9px;
  background:
    linear-gradient(135deg, #efdab4 0%, #ddc295 100%),
    repeating-linear-gradient(82deg, rgba(150,110,60,0.08) 0 2px, transparent 2px 7px);
  background-blend-mode: multiply;
  position: relative; cursor: pointer; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(120,85,45,0.25), inset 0 2px 4px rgba(255,255,255,0.3);
  transition: box-shadow 0.15s;
}
.tak-cell.last { box-shadow: inset 0 0 0 3px rgba(255,209,102,0.9), 0 0 12px rgba(255,209,102,0.4); }
.tak-cell.dragsrc { box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 16px rgba(255,209,102,0.4); }
.tak-cell.win { animation: tak-win 0.85s ease-in-out infinite; z-index: 2; }
@keyframes tak-win {
  0%,100% { box-shadow: inset 0 0 0 3px rgba(110,231,183,0.9), 0 0 12px rgba(110,231,183,0.5); }
  50% { box-shadow: inset 0 0 0 5px rgba(110,231,183,1), 0 0 26px rgba(110,231,183,0.95); }
}
.tak-cell.dragtgt::after {
  content: ""; position: absolute; inset: 30%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #b8ffd8, #4fd99a);
  box-shadow: 0 0 10px rgba(110,231,183,0.7);
  animation: tak-pulse 1.1s ease-in-out infinite; z-index: 5;
}
@keyframes tak-pulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.15); opacity: 1; } }
.tak-stack { position: absolute; inset: 0; }
.tak-pc {
  position: absolute; left: 12%; right: 12%;
  bottom: calc(8% + var(--o) * 7px);
  height: 22%; border-radius: 4px; font-style: normal;
  box-shadow: 0 2px 3px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  animation: tak-place 0.2s ease-out;
}
@keyframes tak-place { from { transform: translateY(-8px); opacity: 0.3; } to { transform: translateY(0); opacity: 1; } }
.tak-pc.p1 { background: linear-gradient(135deg, #9cbcff, #3f6fe0 60%, #2a52bf); }
.tak-pc.p2 { background: linear-gradient(135deg, #ffc890, #f0832f 60%, #d2630f); }
.tak-pc.wall { transform: rotate(38deg); left: 30%; right: 30%; height: 42%; bottom: 29%; border-radius: 3px; box-shadow: 0 3px 5px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.4); z-index: 3; }
.tak-pc.cap {
  left: 20%; right: 20%; height: 32%; border-radius: 50%; z-index: 4;
  box-shadow: 0 3px 5px rgba(0,0,0,0.65), inset 0 0 0 2px rgba(255,255,255,0.4), inset 0 -3px 5px rgba(0,0,0,0.4);
}
.tak-pc.cap::after {
  content: ""; position: absolute; left: 22%; top: 14%; width: 30%; height: 30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.6), transparent 70%);
}
.tak-more {
  position: absolute; right: 3px; top: 2px; font-style: normal; font-size: 0.7rem; font-weight: 700;
  color: #fff; background: rgba(0,0,0,0.65); border-radius: 8px; padding: 0 4px; z-index: 6;
}

/* ---------- Kamisado ---------- */
.kam-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.kam-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; max-width: 520px;
}
.kam-side {
  flex: 1; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,0.04);
  border: 2px solid transparent; transition: border-color 0.25s, box-shadow 0.25s; font-size: 0.9rem;
}
.kam-side.p2 { text-align: right; }
.kam-side.active { border-color: var(--accent); box-shadow: 0 0 14px rgba(255,209,102,0.3); }
.kam-mid { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.9rem; }
.kam-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.5); vertical-align: middle; }
.kam-wrap { width: 100%; display: flex; justify-content: center; }
.kam-board {
  display: grid; grid-template-columns: repeat(8, 1fr);
  width: min(94vw, 540px); aspect-ratio: 1/1;
  border-radius: 12px; overflow: hidden; border: 6px solid #1c1f29;
  box-shadow: var(--shadow), 0 10px 26px rgba(0,0,0,0.5);
}
.kam-cell { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kam-cell::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.0); transition: background 0.15s; }
.kam-cell.lastfrom::before { background: rgba(255,255,255,0.18); }
.kam-cell.lastto::before { background: rgba(255,255,255,0.28); }
.kam-cell.hint::after {
  content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%;
  background: rgba(255,255,255,0.85); box-shadow: 0 0 10px rgba(255,255,255,0.7);
  animation: kam-pulse 1.1s ease-in-out infinite;
}
@keyframes kam-pulse { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; } }
.kam-tower {
  width: 72%; height: 72%; border-radius: 14%; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl);
  box-shadow: 0 3px 6px rgba(0,0,0,0.5), inset 0 0 0 3px rgba(255,255,255,0.18);
  animation: kam-place 0.2s ease-out;
}
@keyframes kam-place { from { transform: scale(0.6); } to { transform: scale(1); } }
.kam-tower::after {
  content: ""; width: 42%; height: 42%; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.92);
}
.kam-tower.p1 { box-shadow: 0 3px 6px rgba(0,0,0,0.5), inset 0 0 0 3px #ffffff, 0 0 0 2px rgba(255,255,255,0.35); }
.kam-tower.p2 { box-shadow: 0 3px 6px rgba(0,0,0,0.6), inset 0 0 0 3px #111319, 0 0 0 2px rgba(0,0,0,0.45); }
.kam-tower.p2::after { border-color: #111319; }
.kam-tower.pickable { animation: kam-glow 1s ease-in-out infinite; cursor: pointer; }
@keyframes kam-glow {
  0%,100% { outline: 3px solid rgba(255,209,102,0.6); outline-offset: 1px; }
  50% { outline: 3px solid rgba(255,209,102,1); outline-offset: 3px; }
}
.kam-tower.sel { outline: 4px solid var(--accent) !important; outline-offset: 2px; transform: scale(1.06); }
.kam-tower.win { animation: kam-win 0.85s ease-in-out infinite; }
@keyframes kam-win {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,209,102,0.9), 0 0 14px rgba(255,209,102,0.6); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px #ffd166, 0 0 26px rgba(255,209,102,1); transform: scale(1.12); }
}

/* ---------- Cờ Amazon (Amazons) ---------- */
.amz-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.amz-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; max-width: 540px;
}
.amz-side {
  flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 2px solid transparent; transition: border-color 0.25s, box-shadow 0.25s;
}
.amz-side.p2 { text-align: right; }
.amz-side b { font-size: 0.8rem; opacity: 0.85; }
.amz-side.active { border-color: var(--accent); box-shadow: 0 0 14px rgba(255,209,102,0.28); }
.amz-mid { font-weight: 700; opacity: 0.8; }
.amz-wrap { width: 100%; display: flex; justify-content: center; }
.amz-board {
  display: grid; width: min(94vw, 560px); aspect-ratio: 1/1;
  grid-auto-rows: 1fr;
  border-radius: 10px; overflow: hidden; border: 6px solid #3a2c1c;
  box-shadow: var(--shadow), 0 10px 26px rgba(0,0,0,0.5);
}
.amz-cell { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.amz-cell.l { background: linear-gradient(135deg, #e9d3ad, #dcc196); }
.amz-cell.d { background: linear-gradient(135deg, #b78a56, #a3793f); }
.amz-cell.movedto { box-shadow: inset 0 0 0 3px var(--accent); animation: amz-moved 1.1s ease-in-out infinite; }
@keyframes amz-moved { 0%,100% { box-shadow: inset 0 0 0 3px rgba(255,209,102,0.7); } 50% { box-shadow: inset 0 0 0 4px rgba(255,209,102,1), inset 0 0 14px rgba(255,209,102,0.5); } }
.amz-cell.lastfrom { background-image: linear-gradient(rgba(255,209,102,0.22), rgba(255,209,102,0.22)); }
.amz-cell.lastto { background-image: linear-gradient(rgba(255,209,102,0.34), rgba(255,209,102,0.34)); }
.amz-cell.lastarrow { background-image: linear-gradient(rgba(255,93,115,0.3), rgba(255,93,115,0.3)); }
.amz-cell.hint::after {
  content: ""; position: absolute; width: 34%; height: 34%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #b8ffd8, #4fd99a);
  box-shadow: 0 0 9px rgba(110,231,183,0.65);
}
.amz-cell.hint.shoot::after { background: radial-gradient(circle at 40% 35%, #ffd1b8, #ff7a4f); box-shadow: 0 0 9px rgba(255,122,79,0.7); }
.amz-queen {
  width: 80%; height: 80%; display: flex; align-items: center; justify-content: center;
  font-size: min(7vw, 2rem); line-height: 1; border-radius: 50%;
  animation: amz-place 0.2s ease-out;
}
@keyframes amz-place { from { transform: scale(0.6); } to { transform: scale(1); } }
.amz-queen.p1 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 0 5px rgba(0,0,0,0.5); }
.amz-queen.p2 { color: #15171e; text-shadow: 0 1px 1px rgba(255,255,255,0.45); }
.amz-queen.sel { outline: 4px solid var(--accent); outline-offset: -2px; border-radius: 50%; transform: scale(1.05); }
.amz-queen.win { animation: kam-win 0.85s ease-in-out infinite; border-radius: 50%; }
.amz-arrow {
  width: 56%; height: 56%; border-radius: 4px;
  background: repeating-linear-gradient(45deg, #3a3f4b 0 5px, #2a2e38 5px 10px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.5);
}

/* ---------- Pong ---------- */
.pong-canvas {
  width: min(700px, 96vw);
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  background: #0f1226;
  touch-action: none;
}

/* ---------- Pool Battle ---------- */
.pool-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 6px 0 18px;
}
.pool-hud {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(250px, 1.35fr) minmax(180px, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 920px;
}
.pool-player,
.pool-mid {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    var(--panel);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.pool-player {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  min-height: 72px;
  padding: 11px 12px;
}
.pool-player span {
  font-weight: 850;
}
.pool-player b {
  color: var(--text);
}
.pool-player em {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-style: normal;
  font-size: 0.82rem;
}
.pool-player::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--p1);
}
.pool-player.p2::after {
  background: var(--p2);
}
.pool-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12), var(--shadow);
}
.pool-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  color: #101422;
  font-size: 0.68rem;
  font-weight: 900;
  font-style: normal;
}
.pool-mini.bomb { background: #ff9f5d; }
.pool-mini.power { background: #ffd166; }
.pool-mini.widen { background: #8be6f0; }
.pool-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  width: 100%;
  max-width: 820px;
  margin: 10px auto 0;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  font-size: 0.82rem;
  color: var(--muted);
}
.pool-legend b { color: var(--text); font-size: 0.82rem; }
.pool-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.pool-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  min-width: 0;
  padding: 10px 14px;
  text-align: center;
}
.pool-mid b {
  color: var(--accent);
}
.pool-mid span {
  color: var(--text);
  font-size: 0.86rem;
  min-width: 0;
}
.pool-mid small {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}
.pool-table-wrap {
  width: 100%;
  max-width: 820px;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.38);
}
.pool-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #0a1020;
  touch-action: none;
}
.pool-controls {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 940px;
}
.pool-field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
}
.pool-field label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}
.pool-field input {
  width: 100%;
  accent-color: var(--accent);
}
.pool-field input:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.pool-val {
  min-width: 38px;
  color: var(--accent);
  font-weight: 850;
  text-align: right;
}
.pool-modes {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(138px, 1fr));
  gap: 8px;
}
.pool-mode {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 7px;
  min-height: 50px;
  padding: 7px 8px;
  text-align: left;
  white-space: normal;
}
.pool-mode span {
  grid-row: 1 / -1;
  min-width: 34px;
  padding: 5px 6px;
  border-radius: 7px;
  background: rgba(255,255,255,0.09);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 900;
  text-align: center;
}
.pool-mode b {
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.05;
}
.pool-mode small {
  color: var(--muted);
  font-size: 0.68rem;
}
.pool-mode.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12);
}
.pool-mode:disabled,
.pool-shoot:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pool-shoot {
  grid-column: 3;
  grid-row: 1;
  min-width: 108px;
  min-height: 50px;
}
@media (max-width: 880px) {
  .pool-hud {
    grid-template-columns: 1fr 1fr;
  }
  .pool-mid {
    grid-column: 1 / -1;
    order: -1;
  }
  .pool-controls {
    grid-template-columns: 1fr 1fr;
  }
  .pool-modes,
  .pool-shoot {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}
@media (max-width: 560px) {
  .pool-hud,
  .pool-controls {
    grid-template-columns: 1fr;
  }
  .pool-modes {
    grid-template-columns: 1fr 1fr;
  }
  .pool-field {
    grid-template-columns: 58px 1fr 42px;
  }
  .pool-player {
    grid-template-columns: 1fr;
    gap: 5px;
    min-height: 82px;
  }
  .pool-player b {
    justify-self: start;
  }
  .pool-player em {
    grid-column: 1;
  }
  .pool-mode {
    min-height: 48px;
  }
}

/* ---------- Slingshot Battle ---------- */
.sling-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 6px 0 18px;
}
.sling-hud {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(260px, 1.35fr) minmax(190px, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 940px;
}
.sling-player,
.sling-mid {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
    var(--panel);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.sling-player {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  min-height: 88px;
  padding: 11px 12px 13px;
}
.sling-player span {
  font-weight: 850;
}
.sling-player b {
  color: var(--text);
}
.sling-player em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}
.sling-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12), var(--shadow);
}
.sling-meter {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  background: rgba(0,0,0,0.34);
  border-radius: 999px;
}
.sling-meter i {
  display: block;
  height: 100%;
  background: var(--p1);
  border-radius: inherit;
}
.sling-player.p2 .sling-meter i {
  background: var(--p2);
}
.sling-mana {
  grid-column: 1 / -1;
  display: flex;
  gap: 5px;
}
.sling-mana i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
}
.sling-mana i.on {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255,209,102,0.4);
}
.sling-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 88px;
  padding: 10px 14px;
  text-align: center;
}
.sling-mid b {
  color: var(--accent);
}
.sling-mid span {
  color: var(--text);
  font-size: 0.86rem;
}
.sling-mid small {
  display: block;
  max-width: 100%;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.sling-stage-wrap {
  width: 100%;
  max-width: 820px;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.38);
}
.sling-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #101426;
  touch-action: none;
}
.sling-controls {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(480px, 1.8fr) auto;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 940px;
}
.sling-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
}
.sling-info b {
  color: var(--accent);
  font-size: 0.9rem;
}
.sling-info span {
  color: var(--muted);
  font-size: 0.82rem;
}
.sling-spells {
  display: grid;
  grid-template-columns: repeat(4, minmax(104px, 1fr));
  gap: 8px;
}
.sling-spell {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 7px;
  min-height: 56px;
  padding: 7px 8px;
  text-align: left;
  white-space: normal;
}
.sling-spell span {
  grid-row: 1 / -1;
  min-width: 36px;
  padding: 5px 6px;
  border-radius: 7px;
  background: rgba(255,255,255,0.09);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 900;
  text-align: center;
}
.sling-spell b {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.05;
}
.sling-spell small {
  color: var(--muted);
  font-size: 0.68rem;
}
.sling-spell.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12);
}
.sling-spell:disabled,
.sling-fire:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sling-fire {
  min-width: 104px;
  min-height: 56px;
}
@media (max-width: 900px) {
  .sling-hud {
    grid-template-columns: 1fr 1fr;
  }
  .sling-mid {
    grid-column: 1 / -1;
    order: -1;
  }
  .sling-controls {
    grid-template-columns: 1fr auto;
  }
  .sling-spells {
    grid-column: 1 / -1;
    order: 2;
  }
}
@media (max-width: 560px) {
  .sling-hud,
  .sling-controls {
    grid-template-columns: 1fr;
  }
  .sling-player {
    grid-template-columns: 1fr;
    min-height: 96px;
  }
  .sling-player b {
    justify-self: start;
  }
  .sling-spells {
    grid-template-columns: 1fr 1fr;
    order: 0;
  }
  .sling-fire {
    width: 100%;
  }
}

/* ---------- Base Defense Duel ---------- */
.bd-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 6px 0 18px;
}
.bd-arena {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "center center"
    "attack defense";
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 1280px;
}
.bd-center-col { grid-area: center; }
.bd-attack-panel { grid-area: attack; }
.bd-defense-panel { grid-area: defense; }
.bd-center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bd-command-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
    rgba(32,37,74,0.9);
  box-shadow: var(--shadow);
}
.bd-panel-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 2px 4px;
}
.bd-panel-head b {
  color: var(--accent);
  font-size: 0.92rem;
}
.bd-panel-head span,
.bd-group-title {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}
.bd-group-title {
  margin-top: 2px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}
.bd-action-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.bd-hud {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.15fr) minmax(210px, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 1280px;
}
.bd-player,
.bd-mid {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
    var(--panel);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.bd-player {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  min-height: 94px;
  padding: 11px 12px 13px;
}
.bd-player span {
  font-weight: 850;
}
.bd-player b {
  color: var(--text);
}
.bd-player em,
.bd-player small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}
.bd-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12), var(--shadow);
}
.bd-hp {
  grid-column: 1 / -1;
  display: block;
  height: 7px;
  overflow: hidden;
  background: rgba(0,0,0,0.34);
  border-radius: 999px;
}
.bd-hp i {
  display: block;
  height: 100%;
  background: var(--p1);
  border-radius: inherit;
}
.bd-player.p2 .bd-hp i {
  background: var(--p2);
}
.bd-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 94px;
  padding: 10px 14px;
  text-align: center;
}
.bd-mid b {
  color: var(--accent);
}
.bd-mid span {
  color: var(--text);
  font-size: 0.86rem;
}
.bd-mid small {
  display: block;
  max-width: 100%;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.bd-stage-wrap {
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.38);
}
.bd-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  border-radius: 10px;
  background: #111629;
  touch-action: none;
}
.bd-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 1280px;
}
.bd-sidebox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.bd-side-btn,
.bd-action,
.bd-online-side {
  min-height: 54px;
}
.bd-side-btn.active,
.bd-action.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12);
}
.bd-online-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 174px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
}
.bd-online-side b {
  color: var(--accent);
}
.bd-online-side span {
  color: var(--muted);
  font-size: 0.78rem;
}
.bd-action {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 1px 7px;
  min-height: 64px;
  padding: 7px 8px;
  text-align: left;
  white-space: normal;
}
.bd-action span {
  grid-row: 1 / 4;
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ac, #ffd166) 38%, transparent), transparent 70%),
    rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac, #ffffff) 35%, transparent);
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 900;
  text-align: center;
}
.bd-action b {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.05;
}
.bd-action small {
  color: var(--muted);
  font-size: 0.68rem;
}
.bd-action em {
  color: var(--accent);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}
.bd-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 1180px) {
  .bd-root,
  .bd-arena,
  .bd-hud,
  .bd-controls,
  .bd-command-panel,
  .bd-stage-wrap {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
  .bd-hud {
    grid-template-columns: 1fr 1fr;
  }
  .bd-mid {
    grid-column: 1 / -1;
    order: -1;
  }
  .bd-side-btn,
  .bd-action {
    min-width: 0;
  }
}
@media (max-width: 620px) {
  .bd-arena {
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "attack"
      "defense";
  }
}
@media (max-width: 560px) {
  .bd-hud,
  .bd-arena,
  .bd-controls {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
  .bd-command-panel {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
  .bd-stage-wrap {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
  .bd-player {
    grid-template-columns: 1fr;
    min-height: 106px;
  }
  .bd-player b {
    justify-self: start;
  }
  .bd-action-group {
    grid-template-columns: 1fr 1fr;
  }
}
/* ---------- Robot Factory War ---------- */
.rf-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(100%, calc(100vw - 32px));
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  padding: 6px 0 18px;
}
.rf-hud {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.12fr) minmax(220px, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 1180px;
}
.rf-player,
.rf-mid,
.rf-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
    var(--panel);
  box-shadow: var(--shadow);
}
.rf-player {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  min-height: 96px;
  padding: 11px 12px 13px;
}
.rf-player span { font-weight: 850; }
.rf-player b { color: var(--text); }
.rf-player em,
.rf-player small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}
.rf-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12), var(--shadow);
}
.rf-hp {
  grid-column: 1 / -1;
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,0.34);
}
.rf-hp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--p1);
}
.rf-player.p2 .rf-hp i { background: var(--p2); }
.rf-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 96px;
  padding: 10px 14px;
  text-align: center;
}
.rf-mid b { color: var(--accent); }
.rf-mid span { color: var(--text); font-size: 0.86rem; }
.rf-mid small {
  display: block;
  max-width: 100%;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.rf-arena {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 1180px;
}
.rf-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}
.rf-panel-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 2px 4px;
}
.rf-panel-head b {
  color: var(--accent);
  font-size: 0.94rem;
}
.rf-panel-head span {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}
.rf-current {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.rf-current span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 7px;
  min-width: 0;
  padding: 7px;
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.rf-current b {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--accent);
  font-size: 0.66rem;
  text-transform: uppercase;
}
.rf-current em {
  color: var(--text);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}
.rf-current small {
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.1;
}
.rf-pause-btn {
  min-height: 54px;
  border-color: rgba(255,209,102,0.34);
  color: var(--accent);
  font-weight: 900;
}
.rf-pause-btn.active {
  border-color: var(--good);
  background: rgba(110,231,183,0.14);
  color: #c9ffe8;
  box-shadow: 0 0 0 2px rgba(110,231,183,0.12);
}
.rf-module-list,
.rf-action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rf-group-title {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.rf-module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.rf-module-btn,
.rf-action {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 7px;
  min-height: 58px;
  padding: 7px;
  text-align: left;
  white-space: normal;
}
.rf-module-btn span,
.rf-action span {
  grid-row: 1 / 3;
  min-width: 36px;
  padding: 5px 6px;
  border-radius: 7px;
  color: var(--accent);
  background: rgba(255,255,255,0.09);
  font-size: 0.58rem;
  font-weight: 950;
  text-align: center;
}
.rf-module-btn b,
.rf-action b {
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.08;
}
.rf-module-btn small,
.rf-action small {
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.15;
}
.rf-module-btn.active,
.rf-side-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12);
}
.rf-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1 / -1;
  order: 1;
  gap: 10px;
  min-width: 0;
}
.rf-module-panel { order: 2; }
.rf-factory-panel { order: 3; }
.rf-canvas-wrap {
  width: 100%;
  max-width: 1040px;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.38);
}
.rf-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  border-radius: 10px;
  background: #111629;
  touch-action: none;
}
.rf-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 1040px;
}
.rf-sidebox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.rf-side-btn,
.rf-online-side {
  min-height: 52px;
}
.rf-online-side span {
  color: var(--muted);
  font-size: 0.68rem;
}
.rf-online-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 174px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}
.rf-online-side b { color: var(--accent); }
.rf-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rf-build-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  padding: 9px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}
.rf-build-meter b,
.rf-build-meter span {
  color: var(--text);
  font-size: 0.78rem;
}
.rf-build-meter i {
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
}
.rf-build-meter i i {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--p2));
}
.rf-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.rf-stat-grid span {
  min-width: 0;
  padding: 8px;
  border-radius: 7px;
  background: rgba(255,255,255,0.055);
}
.rf-stat-grid b {
  display: block;
  color: var(--text);
  font-size: 0.82rem;
}
.rf-stat-grid small {
  color: var(--muted);
  font-size: 0.63rem;
}
.rf-action {
  grid-template-rows: auto auto auto;
  min-height: 64px;
}
.rf-action span { grid-row: 1 / 4; }
.rf-action em {
  color: var(--accent);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
}
.rf-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 1180px) {
  .rf-root,
  .rf-hud,
  .rf-arena,
  .rf-controls,
  .rf-panel,
  .rf-canvas-wrap {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
  .rf-arena {
    grid-template-columns: 1fr;
  }
  .rf-center { order: 1; }
  .rf-module-panel { order: 2; }
  .rf-factory-panel { order: 3; }
  .rf-hud {
    grid-template-columns: 1fr 1fr;
  }
  .rf-mid {
    grid-column: 1 / -1;
    order: -1;
  }
  .rf-module-grid,
  .rf-action-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .rf-hud,
  .rf-arena,
  .rf-controls {
    grid-template-columns: 1fr;
  }
  .rf-player {
    grid-template-columns: 1fr;
    min-height: 108px;
  }
  .rf-player b {
    justify-self: start;
  }
  .rf-controls,
  .rf-module-grid,
  .rf-action-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- Battleship (Bắn Tàu) ---------- */
.bs-root { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.bs-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bs-controls.bs-hidden, .bs-place.bs-hidden, .bs-abilities.bs-hidden { display: none; }

.bs-place {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: min(680px, 96vw);
}
.bs-place-hint {
  font-size: 0.84rem;
  color: var(--muted);
  text-align: center;
}
.bs-place-hint b { color: var(--accent); }
.bs-fleet {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.bs-ship-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 92px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent), var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.bs-ship-btn:hover { transform: translateY(-2px); }
.bs-ship-btn .bs-ship-ic { font-size: 1.3rem; line-height: 1; }
.bs-ship-btn b { font-size: 0.78rem; }
.bs-ship-btn small { font-size: 0.66rem; color: var(--muted); letter-spacing: 1px; }
.bs-ship-btn.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,209,102,0.25); }
.bs-ship-btn.done { opacity: 0.62; }
.bs-ship-btn.done small { color: var(--good); }

.bs-boards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.bs-board-wrap {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bs-board-wrap.bs-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,209,102,0.16), var(--shadow);
}
.bs-board-title { text-align: center; margin-bottom: 8px; font-size: 0.9rem; color: var(--muted); }
.bs-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 2px;
  width: min(300px, 78vw);
  aspect-ratio: 1 / 1;
}
.bs-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #14306b;
  border-radius: 3px;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 900;
  color: #cfe;
  transition: background 0.12s;
}
.bs-active .bs-cell:hover { cursor: crosshair; }
.bs-cell.ship {
  background: linear-gradient(180deg, #7c8696, #5a6472);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
/* --- Trúng đạn: nổ lửa --- */
.bs-cell.hit {
  background: radial-gradient(circle at 50% 45%, #ffe66a 0%, #ff7a3c 38%, #d6243f 72%, #7a0f25 100%);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}
.bs-cell.hit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,230,140,0.95) 0%, rgba(255,140,60,0.6) 40%, transparent 70%);
  border-radius: 50%;
  animation: bs-blast 0.5s ease-out;
  pointer-events: none;
}
.bs-cell.hit::after { content: "✸"; color: #fff; font-size: 0.85rem; text-shadow: 0 0 6px #ffae57; animation: bs-pop 0.4s cubic-bezier(0.3,1.6,0.5,1); z-index: 1; }
@keyframes bs-blast {
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes bs-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
/* --- Đánh chìm: cháy âm ỉ --- */
.bs-cell.hit.sunk {
  background: radial-gradient(circle at 50% 45%, #ff9d5c 0%, #b91c3c 55%, #5a0a1c 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25), 0 0 10px rgba(255,90,60,0.6);
  animation: bs-smolder 1.4s ease-in-out infinite;
}
@keyframes bs-smolder {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25), 0 0 8px rgba(255,90,60,0.45); }
  50% { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 0 16px rgba(255,120,80,0.85); }
}
/* --- Trượt: gợn sóng nước --- */
.bs-cell.miss { background: #0c1a3a; }
.bs-cell.miss::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 70%; height: 70%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(120,190,255,0.7);
  border-radius: 50%;
  animation: bs-ripple 0.6s ease-out;
  pointer-events: none;
}
.bs-cell.miss::after { content: "•"; color: rgba(150,200,255,0.65); font-size: 0.9rem; }
@keyframes bs-ripple {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}
.bs-cell.pending { background: var(--accent); animation: bs-pending 0.7s ease-in-out infinite; }
@keyframes bs-pending {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
/* --- Radar quét --- */
.bs-cell.scan {
  background: linear-gradient(135deg, #133f49, #1b4a55);
  box-shadow: inset 0 0 0 1px rgba(110,231,183,0.4);
}
.bs-cell.scan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(110,231,183,0.5) 50%, transparent 60%);
  animation: bs-sweep 1.8s linear infinite;
  pointer-events: none;
}
@keyframes bs-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.bs-cell.badge { background: #135e52; color: #aef5dd; text-shadow: 0 0 6px rgba(110,231,183,0.7); }
/* --- Tâm ngắm động --- */
.bs-cell.aim {
  box-shadow: inset 0 0 0 2px rgba(255,209,102,0.9);
  animation: bs-aim 0.9s ease-in-out infinite;
}
.bs-cell.aim::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255,209,102,0.8);
  border-radius: 50%;
  pointer-events: none;
}
@keyframes bs-aim {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,209,102,0.55); }
  50% { box-shadow: inset 0 0 0 3px rgba(255,209,102,1), 0 0 8px rgba(255,209,102,0.5); }
}
.bs-cell.preview.ok { background: rgba(110,231,183,0.55); }
.bs-cell.preview.bad { background: rgba(255,93,115,0.55); }

.bs-abilities {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: min(680px, 96vw);
}
.bs-ability {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 96px;
  padding: 8px 10px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent), var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.bs-ability:hover:not(:disabled) { transform: translateY(-2px); }
.bs-ability .bs-ab-ic { font-size: 1.35rem; line-height: 1; }
.bs-ability b { font-size: 0.8rem; }
.bs-ability small { font-size: 0.66rem; color: var(--muted); }
.bs-ability.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,209,102,0.25); }
.bs-ability:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.bs-ab-left {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #16121d;
  font-size: 0.66rem;
  font-weight: 900;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bs-torp-axis {
  align-self: center;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.22);
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
}
.bs-torp-axis b { color: var(--accent); }
.bs-torp-axis.dim { opacity: 0.45; }
.bs-torp-axis:disabled { cursor: not-allowed; }

/* ---------- Sea Battle Nang Cap ---------- */
.sbx-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.sbx-hidden { display: none !important; }
.sbx-setup,
.sbx-actions,
.sbx-resource {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.sbx-actions .btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.18);
}
.sbx-setup { gap: 10px 16px; }
.sbx-modes, .sbx-setup-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sbx-mode.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.22);
}
.sbx-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(880px, 96vw);
}
.sbx-tray-hint {
  width: 100%;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.sbx-tray-hint b { color: var(--accent); }
.sbx-ship-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 96px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent), var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.sbx-ship-btn:hover { transform: translateY(-2px); }
.sbx-ship-btn .sbx-ship-ic { font-size: 1.3rem; line-height: 1; }
.sbx-ship-btn b { font-size: 0.76rem; }
.sbx-ship-btn small { font-size: 0.64rem; color: var(--muted); letter-spacing: 1px; }
.sbx-ship-btn.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,209,102,0.25); }
.sbx-ship-btn.done { opacity: 0.6; }
.sbx-ship-btn.done small { color: var(--good); }

.sbx-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  width: min(880px, 96vw);
}
.sbx-ability {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 92px;
  padding: 7px 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent), var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.sbx-ability:hover:not(:disabled) { transform: translateY(-2px); }
.sbx-ability .sbx-ab-ic { font-size: 1.3rem; line-height: 1; }
.sbx-ability b { font-size: 0.78rem; }
.sbx-ability small { font-size: 0.64rem; color: var(--muted); }
.sbx-ability.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,209,102,0.25); }
.sbx-ability:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.sbx-ab-left {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #16121d;
  font-size: 0.64rem;
  font-weight: 900;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sbx-torp-axis {
  align-self: center;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.22);
  background: transparent;
  color: var(--text);
  font-size: 0.76rem;
  cursor: pointer;
}
.sbx-torp-axis b { color: var(--accent); }
.sbx-torp-axis.dim { opacity: 0.45; }
.sbx-torp-axis:disabled { cursor: not-allowed; }
.sbx-info {
  width: min(880px, 96vw);
  background: rgba(26, 30, 58, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--shadow);
}
.sbx-resource {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 10px;
}
.sbx-resource span {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 5px 10px;
}
.sbx-resource b { color: var(--accent); }
.sbx-fleet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sbx-fleet li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.82rem;
}
.sbx-fleet li.sunk {
  opacity: 0.55;
  text-decoration: line-through;
}
.sbx-ship-code {
  min-width: 28px;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.75rem;
}
.sbx-fleet b {
  color: var(--text);
  font-size: 0.75rem;
}
.sbx-last {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}
.sbx-boards {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.sbx-board-wrap {
  background: var(--panel);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.sbx-board-wrap.sbx-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.12), var(--shadow);
}
.sbx-board-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
}
.sbx-board-title strong {
  font-size: 0.95rem;
  color: var(--text);
}
.sbx-board-title span {
  font-size: 0.76rem;
  color: var(--muted);
}
.sbx-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 2px;
  width: min(340px, 86vw);
  aspect-ratio: 1 / 1;
}
.sbx-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: #16396d;
  color: #e9ecff;
  font-size: clamp(0.48rem, 1.8vw, 0.72rem);
  font-weight: 800;
  user-select: none;
  transition: background 0.1s, transform 0.1s;
}
.sbx-active .sbx-cell:hover {
  background: #24599e;
  cursor: crosshair;
  transform: translateY(-1px);
}
.sbx-cell.ship { background: #5d6678; }
.sbx-cell.ship.carrier { background: #687083; }
.sbx-cell.ship.battleship { background: #7a695b; }
.sbx-cell.ship.submarine { background: #435d5f; }
.sbx-cell.ship.minelayer { background: #70604a; }
.sbx-cell.ship.scout { background: #4c6988; }
.sbx-cell.mine {
  box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.65);
  color: #ffd166;
}
.sbx-cell.scanned::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed rgba(110, 231, 183, 0.65);
  border-radius: 3px;
  pointer-events: none;
}
.sbx-cell.hit {
  background: radial-gradient(circle at 50% 45%, #ffe66a 0%, #ff7a3c 38%, #d6243f 72%, #7a0f25 100%);
  color: white;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}
.sbx-cell.hit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,230,140,0.95) 0%, rgba(255,140,60,0.6) 40%, transparent 70%);
  border-radius: 50%;
  animation: bs-blast 0.5s ease-out;
  pointer-events: none;
}
.sbx-cell.hit.sunk {
  background: radial-gradient(circle at 50% 45%, #ff9d5c 0%, #ad1f3c 55%, #5a0a1c 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 10px rgba(255,90,60,0.6);
  animation: bs-smolder 1.4s ease-in-out infinite;
}
.sbx-cell.miss {
  background: #0d1e39;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.14);
}
.sbx-cell.miss::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 70%; height: 70%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(120,190,255,0.7);
  border-radius: 50%;
  animation: bs-ripple 0.6s ease-out;
  pointer-events: none;
}
.sbx-cell.pending {
  background: var(--accent);
  color: #0f1226;
  animation: bs-pending 0.7s ease-in-out infinite;
}
.sbx-cell.armor {
  background: #8a7b45;
  color: #fff4bf;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.24);
}
.sbx-cell.mine-hit {
  background: radial-gradient(circle at 50% 45%, #ffd166 0%, #b1325f 55%, #4a0f2c 100%);
  color: #ffd166;
  box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.55);
  animation: bs-pop 0.45s cubic-bezier(0.3,1.6,0.5,1);
}
.sbx-cell.scanned::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(110,231,183,0.32) 50%, transparent 58%);
  animation: bs-sweep 2.2s linear infinite;
  pointer-events: none;
}
.sbx-cell.radar {
  outline: 2px solid rgba(110, 231, 183, 0.65);
  outline-offset: -3px;
}
.sbx-cell.preview.ok { background: rgba(110, 231, 183, 0.55); }
.sbx-cell.preview.bad { background: rgba(255, 93, 115, 0.55); }
.sbx-cell.aim {
  box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.85);
  animation: bs-aim 0.9s ease-in-out infinite;
}
@media (max-width: 760px) {
  .sbx-info { padding: 10px; }
  .sbx-fleet { grid-template-columns: 1fr; }
  .sbx-grid { width: min(330px, 92vw); }
}

/* ---------- Pentago ---------- */
.ptg-root { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ptg-board {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  background: #1a1e3a;
  padding: 10px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.ptg-quad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: #2a3060;
  padding: 8px;
  border-radius: 10px;
  transform-origin: center center;
  will-change: transform;
}
.ptg-quad.ptg-spin {
  z-index: 5;
  background: #344080;
  box-shadow: 0 0 22px 4px var(--accent), inset 0 0 12px rgba(255, 255, 255, 0.15);
}
.ptg-quad.ptg-spin .ptg-marble { box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); }
.ptg-cell {
  width: 46px;
  height: 46px;
  background: #161a36;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.ptg-cell:hover { background: #20254a; }
.ptg-cell.just { box-shadow: 0 0 0 3px var(--accent); }
.ptg-marble {
  width: 78%;
  height: 78%;
  border-radius: 50%;
}
.ptg-marble.p1 { background: radial-gradient(circle at 35% 30%, #ff8c9c, #d33049); }
.ptg-marble.p2 { background: radial-gradient(circle at 35% 30%, #8be6f0, #1aa7bd); }
.ptg-cell.win { background: var(--good); }

.ptg-rotbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.ptg-rotbar.ptg-armed { opacity: 1; }
.ptg-rotgroup { display: flex; align-items: center; gap: 4px; }
.ptg-rotgroup span { font-size: 0.8rem; color: var(--muted); margin-right: 2px; }

/* ---------- Cờ Ba Quân (Morris) ---------- */
.mor-root { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.mor-hud {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: min(420px, 90vw);
}
.mor-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 2px solid transparent;
  font-size: 0.78rem;
}
.mor-side small { color: var(--muted); font-size: 0.72rem; }
.mor-side.p1 { color: #ff8c9c; }
.mor-side.p2 { color: #7fe2f0; }
.mor-side.p1.active { border-color: var(--p1); box-shadow: 0 0 10px rgba(255,93,115,0.4); }
.mor-side.p2.active { border-color: var(--p2); box-shadow: 0 0 10px rgba(77,208,225,0.4); }
.mor-phase {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.82rem; color: var(--accent); min-width: 96px;
}
.mor-phase i { font-style: normal; font-size: 0.66rem; color: var(--muted); font-weight: 600; }
.mor-wrap { display: flex; justify-content: center; }
.mor-board {
  position: relative;
  width: min(360px, 84vw);
  height: min(360px, 84vw);
  background:
    radial-gradient(circle at 50% 40%, #e8cfa0, #d3b380 70%, #b9925f);
  border: 8px solid #6b4421;
  border-radius: 16px;
  box-shadow: var(--shadow), inset 0 0 24px rgba(90,50,20,0.4);
  padding: 32px;
  box-sizing: content-box;
}
.mor-lines { position: absolute; inset: 32px; width: calc(100% - 64px); height: calc(100% - 64px); pointer-events: none; }
.mor-spot {
  position: absolute;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #6b4421 0 32%, transparent 36%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.12s, transform 0.1s;
}
.mor-spot.hint { box-shadow: 0 0 0 3px rgba(110,231,183,0.7), 0 0 12px rgba(110,231,183,0.5); }
.mor-spot.hint:hover { transform: translate(-50%, -50%) scale(1.08); }
.mor-spot.sel { box-shadow: 0 0 0 4px var(--accent), 0 0 14px rgba(255,209,102,0.6); }
.mor-spot.last { box-shadow: 0 0 0 3px rgba(255,209,102,0.55); }
.mor-piece {
  width: 74%;
  height: 74%;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4), inset 0 -4px 7px rgba(0,0,0,0.4), inset 0 3px 5px rgba(255,255,255,0.4);
}
.mor-piece.p1 { background: radial-gradient(circle at 36% 28%, #ffb3c0, #ff5d73 58%, #b3263c); }
.mor-piece.p2 { background: radial-gradient(circle at 36% 28%, #b3f3ff, #4dd0e1 58%, #1c8a99); }
.mor-piece.ghost { opacity: 0.4; box-shadow: none; }
.mor-spot.win {
  box-shadow: 0 0 0 4px var(--good), 0 0 18px rgba(110,231,183,0.8);
  animation: mor-win 0.7s ease-in-out infinite alternate;
}
@keyframes mor-win { from { filter: brightness(1); } to { filter: brightness(1.4); } }

/* ---------- Bắn Tăng (Artillery) ---------- */
.art-canvas {
  width: min(880px, 96vw);
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  background: #1a1e3a;
  display: block;
  margin: 0 auto;
}
.art-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 20px;
  box-shadow: var(--shadow);
}
.art-field { display: flex; align-items: center; gap: 8px; }
.art-field label { color: var(--muted); font-size: 0.9rem; min-width: 32px; }
.art-field input[type="range"] { width: 140px; cursor: pointer; accent-color: var(--accent); }
.art-val {
  min-width: 40px;
  text-align: center;
  font-weight: 700;
  color: var(--accent);
}
.art-controls input:disabled { opacity: 0.4; cursor: not-allowed; }
.art-move button { min-width: 38px; padding: 6px 10px; }
.art-move button:disabled { opacity: 0.4; cursor: not-allowed; }
.art-weapon-row { display: flex; gap: 6px; }
.art-weapon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 62px;
  padding: 5px 7px;
  line-height: 1.1;
}
.art-weapon-btn span { font-size: 1rem; }
.art-weapon-btn b { font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.art-weapon-btn .art-ammo { font-size: 0.66rem; color: var(--muted); font-weight: 800; }
.art-weapon-btn.active {
  background: var(--accent);
  color: #1a1a1a;
}
.art-weapon-btn.active .art-ammo { color: rgba(26,26,26,0.7); }
.art-weapon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Dò Mìn Đối Kháng ---------- */
.ms-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ms-scores {
  display: flex; align-items: center; gap: 16px;
  font-weight: 700; font-size: 0.95rem;
}
.ms-s.p1 { color: var(--p1); }
.ms-s.p2 { color: var(--p2); }
.ms-need { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.ms-grid {
  display: grid;
  gap: 2px;
  background: var(--panel-2);
  padding: 6px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  width: min(540px, 94vw);
}
.ms-cell {
  aspect-ratio: 1 / 1;
  background: #3a4180;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.ms-cell:hover { background: #4a52a0; }
.ms-cell.open { background: var(--bg); cursor: default; }
.ms-cell.mine { background: #2a3060; cursor: default; }
.ms-cell.mine.p1 { background: rgba(255, 93, 115, 0.4); }
.ms-cell.mine.p2 { background: rgba(77, 208, 225, 0.4); }

/* ---------- Đoán Số (Bulls & Cows) ---------- */
.bc-root { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.bc-setbox, .bc-playbox {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  width: min(520px, 96vw);
  text-align: center;
}
.bc-setbox h3 { margin: 0 0 14px; font-size: 1.05rem; }
.bc-input {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: var(--text);
  font-size: 1.6rem;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 10px;
  width: 180px;
}
.bc-setbox .bc-input { margin-bottom: 10px; }
.bc-input:focus { outline: 2px solid var(--accent); }
.bc-guessrow { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 6px; }
.bc-err { color: var(--p1); font-size: 0.9rem; min-height: 1.2em; margin: 8px 0 0; }
.bc-wait { color: var(--muted); }
.bc-cols { display: flex; gap: 16px; margin-top: 16px; }
.bc-col { flex: 1; }
.bc-col h4 { margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; }
.bc-log {
  background: var(--bg);
  border-radius: 10px;
  padding: 8px;
  height: 180px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.bc-guess {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px;
  background: var(--panel-2);
  font-size: 0.9rem;
}
.bc-rd { color: var(--muted); font-size: 0.75rem; min-width: 24px; }
.bc-digits { font-weight: 700; letter-spacing: 0.15em; flex: 1; }
.bc-note { color: var(--muted); font-size: 0.82rem; margin: 10px 0 0; }

/* thanh đo thời gian/điểm + trợ giúp */
.bc-meters { display: flex; gap: 12px; width: 100%; justify-content: center; margin-bottom: 4px; }
.bc-meter {
  flex: 1 1 0; min-width: 0; max-width: 240px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 12px; border-radius: 12px; background: var(--bg-soft);
  border: 2px solid rgba(255,255,255,0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bc-meter-name { font-size: 0.82rem; color: var(--muted); }
.bc-meter-main { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bc-meter small { font-size: 0.72rem; color: var(--muted); }
.bc-meter.bc-p1 .bc-meter-main { color: var(--p1); }
.bc-meter.bc-p2 .bc-meter-main { color: var(--p2); }
.bc-meter.ticking {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(255,209,102,0.4);
}
.bc-meter.ticking.bc-p1 { border-color: var(--p1); box-shadow: 0 0 12px rgba(255,93,115,0.45); }
.bc-meter.ticking.bc-p2 { border-color: var(--p2); box-shadow: 0 0 12px rgba(77,208,225,0.45); }
.bc-hints { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.bc-hint-btn { font-size: 0.82rem; background: rgba(255,209,102,0.15); color: var(--accent); }
.bc-hint-btn:hover:not(:disabled) { background: var(--accent); color: #1a1a1a; }
.bc-hint-btn:disabled { opacity: 0.4; }
.bc-hint-res {
  background: rgba(255,209,102,0.14);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 4px 8px; font-size: 0.85rem;
}
.bc-hint-res b { color: var(--accent); }

/* bàn phím số bấm chuột */
.bc-keypad {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 5px;
  width: min(440px, 96vw);
  margin: 10px auto 0;
}
.bc-key {
  padding: 9px 0;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bc-key-back { color: var(--p1); }
@media (max-width: 460px) {
  .bc-keypad { grid-template-columns: repeat(6, 1fr); }
}

/* bảng ghi chú suy luận */
.bc-notepad {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid rgba(255,255,255,0.08);
}
.bc-np-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
}
.bc-np-title span {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.72rem;
}
.bc-np-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}
.bc-np-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.bc-np-cell b { font-size: 1.05rem; font-weight: 800; }
.bc-np-cell i {
  position: absolute;
  top: 1px;
  right: 4px;
  font-size: 0.7rem;
  font-style: normal;
}
.bc-np-cell:hover { transform: translateY(-1px); }
.bc-np-cell.yes {
  background: rgba(110,231,183,0.22);
  border-color: #6ee7b7;
  color: #d6ffe9;
}
.bc-np-cell.no {
  background: rgba(255,93,115,0.18);
  border-color: rgba(255,93,115,0.6);
  color: #ffd2d8;
  opacity: 0.85;
}
.bc-np-cell.no b { text-decoration: line-through; }
@media (max-width: 460px) {
  .bc-np-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Cờ Quân Úp (Stratego) ---------- */
.st-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.st-info {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(240px, 1.15fr) minmax(160px, 1fr);
  gap: 10px;
  width: min(760px, 100%);
  max-width: 100%;
}
.st-player,
.st-mid,
.st-legend {
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    var(--panel);
  box-shadow: var(--shadow);
}
.st-player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 70px;
  padding: 10px 12px;
}
.st-player b {
  color: var(--text);
}
.st-player span {
  color: var(--muted);
  font-size: 0.8rem;
}
.st-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,209,102,0.14), var(--shadow);
}
.st-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 70px;
  padding: 10px 14px;
  text-align: center;
}
.st-mid b {
  color: var(--accent);
}
.st-mid span,
.st-mid small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}
.st-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.st-grid {
  display: grid;
  gap: 2px;
  background:
    radial-gradient(circle at 50% 45%, rgba(72, 160, 255, 0.18), transparent 35%),
    #3e2a15;
  padding: 9px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  width: min(760px, 100%);
  max-width: 100%;
}
.st-cell {
  appearance: none;
  -webkit-appearance: none;
  aspect-ratio: 1 / 1;
  border: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 55%),
    #d8b987;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  color: #111827;
  font-size: clamp(0.92rem, 2.7vw, 1.48rem);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14);
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
}
.st-cell:not(:disabled):hover {
  transform: translateY(-1px);
  background: #f0cd95;
}
.st-cell:disabled {
  cursor: default;
  opacity: 1;
}
.st-cell.st-p1 {
  box-shadow: inset 0 0 0 3px rgba(255,93,115,0.82);
}
.st-cell.st-p2 {
  box-shadow: inset 0 0 0 3px rgba(77,208,225,0.82);
}
.st-cell.st-hidden {
  color: rgba(15,23,42,0.62);
  font-size: clamp(0.88rem, 2.4vw, 1.25rem);
  font-weight: 900;
}
.st-cell.st-lake {
  color: rgba(233,236,255,0.75);
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.24), transparent 26%),
    linear-gradient(135deg, #1f8ccf, #124b73);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
  font-size: clamp(0.8rem, 2.2vw, 1.2rem);
}
.st-cell.st-sel {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  z-index: 2;
}
.st-cell.st-target {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.2), transparent 55%),
    #c9f27d;
}
.st-cell.st-lastfrom {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), transparent 55%),
    rgba(110,231,183,0.26);
  outline: 2px dashed rgba(34,197,94,0.9);
  outline-offset: -4px;
}
.st-cell.st-lastto {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.24), transparent 55%),
    #84e08a;
  box-shadow: inset 0 0 0 3px #16a34a, 0 0 16px rgba(34,197,94,0.55);
  animation: st-lastpulse 1.5s ease-in-out infinite;
}
@keyframes st-lastpulse {
  0%, 100% { box-shadow: inset 0 0 0 3px #16a34a, 0 0 10px rgba(34,197,94,0.4); }
  50% { box-shadow: inset 0 0 0 3px #22c55e, 0 0 20px rgba(34,197,94,0.7); }
}
.st-cell.st-lastbattle {
  outline: 2px solid rgba(255,209,102,0.86);
  outline-offset: -6px;
}
.st-icon {
  transform: translateY(-2px);
}
.st-power {
  position: absolute;
  left: 3px;
  top: 3px;
  max-width: calc(100% - 8px);
  border-radius: 5px;
  padding: 2px 4px;
  background: rgba(255, 255, 255, 0.72);
  color: #1f2937;
  font-size: clamp(0.42rem, 1.15vw, 0.62rem);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}
.st-rank {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 16px;
  border-radius: 4px;
  padding: 1px 2px;
  background: rgba(15,23,42,0.78);
  color: #fff;
  font-size: clamp(0.44rem, 1.25vw, 0.65rem);
  font-weight: 900;
  letter-spacing: 0;
}
.st-revealed {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: clamp(0.5rem, 1.3vw, 0.68rem);
}
.st-legend {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: 10px;
  width: min(760px, 100%);
  max-width: 100%;
  padding: 10px;
}
.st-piece-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 6px;
}
.st-piece-list span,
.st-log span {
  display: block;
  border-radius: 6px;
  background: rgba(255,255,255,0.055);
  padding: 6px 7px;
}
.st-piece-list b {
  display: block;
  color: var(--text);
  font-size: 0.74rem;
}
.st-piece-list small,
.st-log span {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.2;
}
.st-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 760px) {
  .st-info,
  .st-legend {
    grid-template-columns: 1fr;
  }
  .st-mid {
    order: -1;
  }
}
@media (max-width: 520px) {
  .st-grid {
    gap: 1px;
    padding: 6px;
  }
  .st-piece-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-player,
  .st-mid,
  .st-legend {
    border-radius: 7px;
  }
}

/* ---------- Quoridor (Đặt Tường) ---------- */
.qd-wrap {
  --qd-unit: 46px;
  --qd-wall: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.qd-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.qd-mode.active { background: var(--accent); color: #1a1a1a; }
.qd-walls { color: var(--muted); font-size: 0.9rem; margin-left: 6px; }
.qd-info {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: min(440px, 94vw);
}
.qd-player {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 2px solid transparent;
}
.qd-player span { font-size: 0.74rem; color: var(--muted); }
.qd-player b { font-size: 1.05rem; font-weight: 900; }
.qd-player small { font-size: 0.68rem; color: var(--muted); letter-spacing: -1px; }
.qd-player.p1 b { color: var(--p1); }
.qd-player.p2 b { color: var(--p2); }
.qd-player.p1.active { border-color: var(--p1); box-shadow: 0 0 10px rgba(255,93,115,0.4); }
.qd-player.p2.active { border-color: var(--p2); box-shadow: 0 0 10px rgba(77,208,225,0.4); }
.qd-vs { display: flex; align-items: center; font-weight: 900; color: var(--muted); font-size: 0.8rem; }

.qd-board {
  display: grid;
  /* cột ô = --qd-unit, cột khe = --qd-wall: ghi đè bằng JS grid-template */
  background: #243b8a;
  padding: 8px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-width: 96vw;
  overflow: auto;
}
/* ô và khe: dùng nth-child không tiện, nên set kích thước theo class */
.qd-cell {
  width: var(--qd-unit); height: var(--qd-unit);
  background: #cda86b;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.qd-cell.goal-p1 { background: linear-gradient(180deg, rgba(255,93,115,0.4), #cda86b 70%); }
.qd-cell.goal-p2 { background: linear-gradient(0deg, rgba(77,208,225,0.4), #cda86b 70%); }
.qd-cell.qd-hint { box-shadow: inset 0 0 0 4px var(--good); cursor: pointer; }
.qd-cell.qd-lastcell { box-shadow: inset 0 0 0 3px rgba(255,209,102,0.85); }
.qd-hslot { width: var(--qd-unit); height: var(--qd-wall); border-radius: 3px; }
.qd-vslot { width: var(--qd-wall); height: var(--qd-unit); border-radius: 3px; }
.qd-inter { width: var(--qd-wall); height: var(--qd-wall); }
.qd-hslot.on, .qd-vslot.on {
  background: linear-gradient(180deg, #e8b96a, #9a6a30);
  box-shadow: 0 0 6px rgba(255,209,102,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.qd-hslot.wall-last, .qd-vslot.wall-last { box-shadow: 0 0 0 2px #ffd166, 0 0 8px rgba(255,209,102,0.8); }
.qd-board.qd-wallmode .qd-hslot:hover,
.qd-board.qd-wallmode .qd-vslot:hover { background: rgba(255,209,102,0.5); cursor: pointer; }
.qd-hslot.preview-ok, .qd-vslot.preview-ok { background: var(--good); }
.qd-hslot.preview-bad, .qd-vslot.preview-bad { background: var(--p1); }

.qd-pawn {
  width: 74%; height: 74%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.3);
}
.qd-pawn i { font-style: normal; font-size: 0.7em; color: rgba(255,255,255,0.85); line-height: 1; }
.qd-pawn.p1 { background: radial-gradient(circle at 35% 30%, #ff8c9c, #d33049); }
.qd-pawn.p2 { background: radial-gradient(circle at 35% 30%, #8be6f0, #1aa7bd); }
.qd-pawn.active { animation: qd-bob 1s ease-in-out infinite alternate; box-shadow: inset 0 -3px 6px rgba(0,0,0,0.35), 0 0 0 3px rgba(255,209,102,0.9), 0 0 12px rgba(255,209,102,0.6); }
@keyframes qd-bob { from { transform: translateY(1px); } to { transform: translateY(-2px); } }

@media (max-width: 560px) {
  .qd-wrap { --qd-unit: 30px; --qd-wall: 8px; }
}

/* ---------- Auction War ---------- */
.aw-root {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
/* --- giao diện món đấu giá nâng cấp (emoji) --- */
.aw-lot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aw-type-tag {
  font-size: 0.78rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.aw-tag-land { color: #6ee7b7; }
.aw-tag-resource { color: #ffd166; }
.aw-tag-relic { color: #c792ea; }
.aw-tag-contract { color: #8be6f0; }
.aw-tag-intel { color: #ff9f8a; }
.aw-item-emoji {
  width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem;
  border-radius: 16px;
  background: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.14), rgba(0,0,0,0.25));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), var(--shadow);
}
.aw-emoji-land { background: radial-gradient(circle at 40% 30%, rgba(110,231,183,0.25), rgba(0,0,0,0.25)); }
.aw-emoji-resource { background: radial-gradient(circle at 40% 30%, rgba(255,209,102,0.25), rgba(0,0,0,0.25)); }
.aw-emoji-relic { background: radial-gradient(circle at 40% 30%, rgba(199,146,234,0.28), rgba(0,0,0,0.25)); }
.aw-emoji-contract { background: radial-gradient(circle at 40% 30%, rgba(139,230,240,0.25), rgba(0,0,0,0.25)); }
.aw-emoji-intel { background: radial-gradient(circle at 40% 30%, rgba(255,159,138,0.25), rgba(0,0,0,0.25)); }
.aw-estimate { color: var(--muted); }
.aw-estimate b { color: var(--text); }
.aw-value {
  margin: 12px 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 12px;
}
.aw-value.hidden-val { background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.2); }
.aw-val-q { font-size: 1.8rem; font-weight: 900; color: var(--muted); }
.aw-val-hint { color: var(--muted); font-size: 0.9rem; }
.aw-value.revealed {
  background: linear-gradient(90deg, rgba(255,209,102,0.25), rgba(110,231,183,0.18));
  border: 1px solid var(--accent);
  animation: awReveal 0.5s cubic-bezier(0.2,1.4,0.4,1);
}
@keyframes awReveal {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.aw-val-label { color: var(--muted); font-size: 0.9rem; }
.aw-val-num { font-size: 1.8rem; font-weight: 900; color: var(--accent); }
.aw-mini-emoji { font-style: normal; margin-right: 3px; }
.aw-bonus-note { line-height: 1.5; }
.aw-clue {
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(255,209,102,0.1);
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.aw-clue i { color: var(--text); font-style: italic; }
.aw-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.aw-player {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.aw-player span,
.aw-player small {
  display: block;
  color: var(--muted);
}
.aw-player b {
  display: block;
  margin: 3px 0;
  font-size: 1.35rem;
}
.aw-player.aw-p1 b { color: var(--p1); }
.aw-player.aw-p2 b { color: var(--p2); }
.aw-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,209,102,0.16), var(--shadow);
}
.aw-stage {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(260px, 0.95fr);
  gap: 14px;
  align-items: stretch;
}
.aw-item,
.aw-bid-panel,
.aw-portfolio,
.aw-history {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    var(--panel);
  box-shadow: var(--shadow);
}
.aw-item,
.aw-bid-panel {
  padding: 16px;
}
.aw-round {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,209,102,0.15);
  color: var(--accent);
  font-weight: 800;
  font-size: 0.82rem;
}
.aw-item-main {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 16px 0 12px;
}
.aw-item-icon {
  position: relative;
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #151936;
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
}
.aw-item-icon::before,
.aw-item-icon::after {
  content: "";
  position: absolute;
}
.aw-icon-land::before {
  left: 14px;
  right: 14px;
  bottom: 16px;
  height: 18px;
  border-radius: 50% 50% 6px 6px;
  background: var(--good);
}
.aw-icon-land::after {
  left: 24px;
  top: 18px;
  width: 27px;
  height: 22px;
  border-radius: 50% 50% 4px 4px;
  background: var(--p2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.aw-icon-resource::before {
  left: 17px;
  top: 17px;
  width: 40px;
  height: 40px;
  background: var(--accent);
  clip-path: polygon(50% 0, 88% 22%, 100% 64%, 50% 100%, 0 64%, 12% 22%);
}
.aw-icon-resource::after {
  left: 30px;
  top: 15px;
  width: 7px;
  height: 44px;
  border-radius: 999px;
  background: #151936;
  transform: rotate(42deg);
  opacity: 0.8;
}
.aw-icon-relic::before {
  left: 18px;
  top: 15px;
  width: 38px;
  height: 44px;
  background: linear-gradient(135deg, #a9f7ff, var(--p2));
  clip-path: polygon(20% 0, 80% 0, 100% 32%, 50% 100%, 0 32%);
}
.aw-icon-relic::after {
  left: 30px;
  top: 18px;
  width: 14px;
  height: 36px;
  border-left: 2px solid rgba(255,255,255,0.55);
  border-right: 2px solid rgba(255,255,255,0.25);
  transform: skewX(-12deg);
}
.aw-icon-contract::before {
  left: 19px;
  top: 14px;
  width: 36px;
  height: 46px;
  border-radius: 4px;
  background: #f0d79c;
}
.aw-icon-contract::after {
  left: 27px;
  top: 26px;
  width: 20px;
  height: 4px;
  background: #7a5a2a;
  box-shadow: 0 9px 0 #7a5a2a, 0 18px 0 #7a5a2a;
}
.aw-icon-intel::before {
  left: 19px;
  top: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 45% 45%;
  background: #c6a7ff;
}
.aw-icon-intel::after {
  left: 18px;
  top: 26px;
  width: 38px;
  height: 13px;
  border-radius: 999px;
  background: #151936;
  box-shadow: 10px -14px 0 -6px var(--accent), -10px -14px 0 -6px var(--accent);
}
.aw-icon-bank::before {
  left: 15px;
  top: 24px;
  width: 44px;
  height: 29px;
  background: var(--p2);
  clip-path: polygon(0 28%, 100% 28%, 100% 100%, 0 100%);
}
.aw-icon-bank::after {
  left: 15px;
  top: 14px;
  width: 44px;
  height: 19px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.aw-mini-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.aw-mini-icon::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 4px;
  background: var(--accent);
}
.aw-mini-land::before {
  border-radius: 50% 50% 4px 4px;
  background: var(--good);
}
.aw-mini-resource::before {
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%);
}
.aw-mini-relic::before {
  background: var(--p2);
  clip-path: polygon(20% 0, 80% 0, 100% 34%, 50% 100%, 0 34%);
}
.aw-mini-contract::before {
  background: #f0d79c;
  border-radius: 2px;
}
.aw-mini-intel::before {
  background: #c6a7ff;
  border-radius: 50%;
}
.aw-item h3 {
  margin: 0 0 4px;
  font-size: 1.35rem;
}
.aw-item p,
.aw-note,
.aw-bonus-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}
.aw-value {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}
.aw-value.revealed {
  color: var(--text);
  border: 1px solid rgba(110,231,183,0.28);
}
.aw-value b { color: var(--good); }
.aw-bonus-note {
  margin-top: 12px;
  font-size: 0.82rem;
}
.aw-bid-panel h3 {
  margin: 0 0 12px;
  color: var(--accent);
}
.aw-locks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.aw-locks span,
.aw-quick button,
.aw-type-row span {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.aw-locks span {
  padding: 6px 9px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}
.aw-locks span.ready {
  color: #10231e;
  background: var(--good);
}
.aw-bid-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}
.aw-range {
  width: 100%;
  accent-color: var(--accent);
}
.aw-bid-row {
  display: grid;
  grid-template-columns: 88px auto auto;
  gap: 8px;
  margin-top: 10px;
}
.aw-number {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: #151936;
  color: var(--text);
  font-weight: 800;
}
.aw-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.aw-quick button {
  padding: 6px 9px;
  color: var(--text);
  cursor: pointer;
}
.aw-quick button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.aw-wait,
.aw-result {
  padding: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  line-height: 1.35;
}
.aw-bid-reveal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.aw-bid-reveal span,
.aw-final-line {
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}
.aw-portfolios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.aw-portfolio {
  padding: 12px;
}
.aw-portfolio-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.aw-portfolio-head span {
  color: var(--muted);
  font-size: 0.86rem;
}
.aw-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.aw-type-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  color: var(--muted);
  font-size: 0.8rem;
}
.aw-items {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 32px;
}
.aw-items em {
  color: var(--muted);
  font-size: 0.86rem;
}
.aw-owned {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.82rem;
}
.aw-owned small {
  color: var(--muted);
  font-weight: 800;
}
.aw-owned.good { border-color: rgba(110,231,183,0.35); }
.aw-owned.bad { border-color: rgba(255,93,115,0.42); }
.aw-final {
  display: grid;
  gap: 8px;
}
.aw-final-line b,
.aw-final-line span {
  display: block;
}
.aw-final-line span {
  color: var(--muted);
  margin-top: 3px;
}
.aw-history {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  color: var(--muted);
  font-size: 0.86rem;
}
.aw-history b { color: var(--text); }

@media (max-width: 720px) {
  .aw-top,
  .aw-stage,
  .aw-portfolios {
    grid-template-columns: 1fr;
  }
  .aw-bid-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Thủ Thành Hợp Tác ---------- */
.cd-root {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.cd-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cd-stat {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.cd-stat b,
.cd-stat span,
.cd-stat small {
  display: block;
}
.cd-stat span {
  margin: 3px 0;
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 900;
}
.cd-stat small { color: var(--muted); }
.cd-stat i {
  display: block;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.cd-stat i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--p1), var(--accent));
}
.cd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
.cd-map {
  position: relative;
  min-height: 430px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.13);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,159,122,0.16), transparent 32%),
    radial-gradient(circle at 82% 70%, rgba(77,208,225,0.14), transparent 35%),
    linear-gradient(180deg, #17213d, #10152b);
  box-shadow: var(--shadow);
}
.cd-castle {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 6;
  width: 78px;
  min-height: 132px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent),
    #3d2e47;
  border: 1px solid rgba(255,209,102,0.32);
  text-align: center;
}
.cd-castle b {
  color: var(--accent);
  font-size: 0.9rem;
}
.cd-castle span {
  color: var(--text);
  font-weight: 900;
}
.cd-portal {
  position: absolute;
  right: 12px;
  top: 50%;
  z-index: 5;
  width: 72px;
  height: 154px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,167,255,0.38), rgba(77,208,225,0.13) 56%, transparent 68%);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}
.cd-lane {
  position: absolute;
  left: 86px;
  right: 78px;
  height: 76px;
  transform: translateY(-50%);
}
.cd-lane-road {
  position: absolute;
  left: 0;
  right: 0;
  top: 31px;
  height: 24px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0 18px, transparent 18px 36px),
    rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.cd-lane-label {
  position: absolute;
  left: 4px;
  top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}
.cd-slot {
  position: absolute;
  top: 2px;
  z-index: 8;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 8px;
  border: 2px dashed rgba(255,255,255,0.22);
  background: rgba(12,16,38,0.7);
  color: var(--text);
  cursor: pointer;
}
.cd-slot::before {
  content: "+";
  color: rgba(255,255,255,0.45);
  font-weight: 900;
}
.cd-slot:hover {
  border-color: var(--accent);
  background: rgba(255,209,102,0.12);
}
.cd-slot.disabled {
  pointer-events: none;
  opacity: 0.45;
}
.cd-slot.has-tower {
  border-style: solid;
  background: #151936;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}
.cd-slot.has-tower::before { display: none; }
.cd-slot.has-tower span,
.cd-slot.has-tower small {
  display: block;
  line-height: 1;
}
.cd-slot.has-tower span {
  font-size: 0.82rem;
  font-weight: 900;
}
.cd-slot.has-tower small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
}
.cd-slot.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,209,102,0.18), 0 8px 18px rgba(0,0,0,0.28);
}
.tower-rifle { border-color: #ffd166 !important; color: #ffd166; }
.tower-cannon { border-color: #ff8d7a !important; color: #ff8d7a; }
.tower-frost { border-color: #7fe7ff !important; color: #7fe7ff; }
.tower-laser { border-color: #c6a7ff !important; color: #c6a7ff; }
.cd-monster {
  position: absolute;
  top: 33px;
  z-index: 7;
  width: 30px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 999px 999px 8px 8px;
  background: var(--p1);
  box-shadow: 0 7px 16px rgba(0,0,0,0.3);
}
.cd-monster b {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 6px;
  height: 5px;
  border-radius: 999px;
  background: rgba(10,13,30,0.62);
}
.cd-monster i {
  position: absolute;
  left: 1px;
  right: 1px;
  top: -8px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.cd-monster i em {
  display: block;
  height: 100%;
  background: var(--good);
}
.cd-monster.slowed {
  filter: drop-shadow(0 0 8px rgba(127,231,255,0.7));
}
.mon-runner {
  width: 25px;
  height: 20px;
  background: #ffd166;
}
.mon-brute {
  width: 38px;
  height: 30px;
  background: #ff8d7a;
}
.mon-shield {
  background: #c6a7ff;
  border: 2px solid rgba(255,255,255,0.45);
}
.mon-boss {
  width: 54px;
  height: 40px;
  background: linear-gradient(135deg, #ff5d73, #c6a7ff);
}
.cd-shot {
  position: absolute;
  top: 44px;
  z-index: 9;
  height: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: #ffd166;
  box-shadow: 0 0 10px currentColor;
}
.shot-cannon {
  height: 8px;
  background: #ff8d7a;
}
.shot-frost {
  background: #7fe7ff;
}
.shot-laser {
  height: 3px;
  background: #c6a7ff;
}
.cd-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cd-panel-section {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.cd-panel-section h3 {
  margin: 0 0 10px;
  color: var(--accent);
}
.cd-tower-list {
  display: grid;
  gap: 8px;
}
.cd-tower-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.cd-tower-card:hover,
.cd-tower-card.active {
  border-color: var(--accent);
  background: rgba(255,209,102,0.1);
}
.cd-tower-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tower-chip {
  grid-row: span 2;
  width: 42px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 2px solid currentColor;
  font-weight: 900;
  background: #151936;
}
.cd-tower-card b {
  font-size: 0.9rem;
}
.cd-tower-card small {
  color: var(--muted);
  font-size: 0.78rem;
}
.cd-empty-select,
.cd-selected {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  line-height: 1.35;
}
.cd-selected b,
.cd-selected span {
  display: block;
}
.cd-selected b {
  color: var(--text);
}
.cd-action-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.cd-start,
.cd-repair {
  width: 100%;
  margin-top: 8px;
}
.cd-log {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font-size: 0.86rem;
}
@media (max-width: 820px) {
  .cd-hud,
  .cd-layout {
    grid-template-columns: 1fr;
  }
  .cd-map {
    min-height: 390px;
  }
  .cd-layout {
    gap: 12px;
  }
}

.cd-map {
  min-height: 560px;
  border: 3px solid rgba(67, 104, 45, 0.65);
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 12%, rgba(255,255,255,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 84%, rgba(255,255,255,0.12) 0 1px, transparent 2px),
    linear-gradient(135deg, #7caf45, #5f963c 48%, #4e8436);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.08), var(--shadow);
}
.cd-paths {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.cd-path-shadow,
.cd-path-main,
.cd-path-edge {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cd-path-shadow {
  stroke: rgba(89, 63, 30, 0.42);
  stroke-width: 12;
}
.cd-path-main {
  stroke: #d9bd71;
  stroke-width: 8.5;
}
.cd-path-edge {
  stroke: rgba(93, 74, 36, 0.3);
  stroke-width: 10;
  stroke-dasharray: 0.1 8.5;
}
.cd-forest {
  position: absolute;
  left: -5%;
  right: -5%;
  z-index: 1;
  height: 54px;
  background:
    radial-gradient(circle at 12px 36px, #2e6e2d 0 14px, transparent 15px),
    radial-gradient(circle at 34px 24px, #3f8732 0 18px, transparent 19px),
    radial-gradient(circle at 62px 36px, #2f7430 0 15px, transparent 16px);
  background-size: 72px 54px;
  filter: drop-shadow(0 5px 0 rgba(37,72,28,0.42));
}
.cd-forest-top { top: -4px; }
.cd-forest-bottom {
  bottom: -4px;
  transform: rotate(180deg);
}
.cd-scenery {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.cd-deco {
  position: absolute;
  transform: translate(-50%, -50%);
}
.cd-deco-rock {
  width: 14px;
  height: 10px;
  border-radius: 50%;
  background: #96a078;
  box-shadow: 9px 4px 0 -2px #c5c28b;
}
.cd-deco-stump {
  width: 18px;
  height: 14px;
  border-radius: 50%;
  background: #8b6234;
  box-shadow: inset 0 0 0 4px #b88742;
}
.cd-deco-crate {
  width: 22px;
  height: 18px;
  border-radius: 4px;
  background: #8f6734;
  box-shadow: inset 0 0 0 2px rgba(50,32,12,0.35);
}
.cd-deco-tent {
  width: 34px;
  height: 25px;
  background: #e8d09b;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cd-deco-flag {
  width: 24px;
  height: 30px;
  border-left: 4px solid #6b5630;
}
.cd-deco-flag::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 18px;
  height: 11px;
  background: #7fe7ff;
  clip-path: polygon(0 0, 100% 22%, 0 100%);
}
.cd-deco-hut {
  width: 38px;
  height: 28px;
  border-radius: 6px;
  background: #d8bd6d;
  box-shadow: inset 0 10px 0 rgba(90,64,24,0.2);
}
.cd-deco-hut::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -14px;
  width: 48px;
  height: 21px;
  background: #8a6a32;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cd-deco-well {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #8d8f83;
  box-shadow: inset 0 0 0 7px #4e5a5a;
}
.cd-castle {
  left: 16px;
  top: 51%;
  width: 92px;
  min-height: 118px;
  border-color: rgba(255,255,255,0.32);
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(255,255,255,0.12) 16% 28%, transparent 28% 72%, rgba(255,255,255,0.12) 72% 84%, transparent 84%),
    linear-gradient(180deg, #8d9290, #555b63);
  color: #151936;
  text-shadow: none;
}
.cd-castle::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: -17px;
  height: 24px;
  background: #737a80;
  clip-path: polygon(0 100%, 0 28%, 14% 28%, 14% 0, 30% 0, 30% 28%, 44% 28%, 44% 0, 60% 0, 60% 28%, 74% 28%, 74% 0, 90% 0, 90% 28%, 100% 28%, 100% 100%);
}
.cd-castle b {
  color: #f7f0cf;
}
.cd-castle span {
  color: #fff;
}
.cd-portal {
  right: 10px;
  width: 86px;
  height: 186px;
  border: 3px solid rgba(198,167,255,0.36);
  background:
    radial-gradient(circle, rgba(198,167,255,0.56), rgba(75,40,112,0.46) 44%, rgba(17,20,43,0.1) 68%, transparent 72%);
  color: #f3e8ff;
  text-shadow: 0 2px 5px #000;
}
.cd-lane-tags {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.cd-lane-tags span {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(88,61,28,0.72);
  color: #ffe4a0;
  font-size: 0.72rem;
  font-weight: 900;
}
.cd-slot {
  z-index: 9;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(90,70,43,0.65);
  border-style: solid;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.22), transparent 55%),
    #b39b6b;
  box-shadow: 0 8px 0 rgba(80,59,35,0.45), 0 12px 18px rgba(0,0,0,0.22);
}
.cd-slot::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px dashed rgba(74,53,29,0.5);
}
.cd-slot.has-tower {
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent),
    #5d6570;
  box-shadow: 0 8px 0 #373d44, 0 12px 20px rgba(0,0,0,0.28);
}
.cd-slot.has-tower span {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  text-shadow: 0 2px 2px rgba(0,0,0,0.45);
}
.cd-slot.has-tower small {
  position: relative;
  z-index: 2;
  color: #f5f0d6;
}
.cd-slot.has-tower::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 28px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 8px 8px 3px 3px;
  background: currentColor;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.18);
}
.cd-slot.selected {
  box-shadow: 0 0 0 4px rgba(255,209,102,0.28), 0 8px 0 rgba(80,59,35,0.45), 0 12px 18px rgba(0,0,0,0.22);
}
.cd-monster {
  top: auto;
  z-index: 10;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(61,35,24,0.35);
}
.cd-monster::before,
.cd-monster::after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(39,27,20,0.7);
}
.cd-monster::before { left: 6px; }
.cd-monster::after { right: 6px; }
.cd-shot {
  top: auto;
  transform-origin: left center;
}
.cd-map::before,
.cd-map::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.cd-map::before {
  inset: 44px 0;
  z-index: 0;
  background:
    radial-gradient(circle at 10% 28%, rgba(34,105,35,0.22) 0 24px, transparent 25px),
    radial-gradient(circle at 74% 64%, rgba(43,115,42,0.2) 0 34px, transparent 35px),
    radial-gradient(circle at 44% 40%, rgba(245,233,155,0.11) 0 30px, transparent 31px),
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.08) 0 1px, transparent 2px 21px);
}
.cd-map::after {
  inset: 0;
  z-index: 20;
  box-shadow: inset 0 0 34px rgba(27,55,22,0.45);
}
.cd-path-shadow {
  stroke-width: 14;
}
.cd-path-main {
  stroke: #e6c97c;
  stroke-width: 9.8;
}
.cd-path-edge {
  stroke: rgba(96,70,30,0.38);
  stroke-width: 11.4;
  stroke-dasharray: 0.1 7.4;
}
.cd-deco-crate::before,
.cd-deco-crate::after {
  content: "";
  position: absolute;
  background: rgba(52,34,16,0.28);
}
.cd-deco-crate::before {
  left: 3px;
  right: 3px;
  top: 8px;
  height: 2px;
}
.cd-deco-crate::after {
  top: 2px;
  bottom: 2px;
  left: 10px;
  width: 2px;
}
.cd-deco-tent::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 9px;
  width: 4px;
  height: 16px;
  background: rgba(98,70,35,0.35);
}
.cd-slot {
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.cd-slot:hover {
  transform: translate(-50%, -53%);
  filter: brightness(1.08);
}
.cd-slot.disabled:hover {
  transform: translate(-50%, -50%);
}
.cd-slot.has-tower {
  overflow: visible;
  color: #ffd166;
}
.cd-slot.has-tower::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 13px;
  z-index: 3;
  width: 38px;
  height: 8px;
  transform: translateX(-2px) rotate(-14deg);
  transform-origin: left center;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18), 16px 1px 0 -4px rgba(45,35,24,0.4);
}
.cd-slot.has-tower::after {
  top: -6px;
  width: 30px;
  height: 24px;
  border-radius: 10px 10px 5px 5px;
}
.cd-slot.has-tower span {
  margin-top: 18px;
  font-size: 0.72rem;
  letter-spacing: 0;
}
.cd-slot.has-tower small {
  font-size: 0.68rem;
}
.cd-slot.has-tower.tower-rifle::before {
  width: 38px;
}
.cd-slot.has-tower.tower-cannon::before {
  top: 14px;
  width: 42px;
  height: 12px;
  transform: translateX(-1px) rotate(-9deg);
}
.cd-slot.has-tower.tower-frost::before {
  box-shadow: 0 0 12px rgba(127,231,255,0.6), inset 0 -2px 0 rgba(0,0,0,0.18);
}
.cd-slot.has-tower.tower-laser::before {
  top: 12px;
  width: 46px;
  height: 5px;
  box-shadow: 0 0 14px rgba(198,167,255,0.7);
}
.cd-monster {
  animation: cdMonsterBob .46s ease-in-out infinite alternate;
}
.cd-monster b {
  left: 6px;
  right: 6px;
  top: 7px;
  height: 8px;
  background: transparent;
}
.cd-monster b::before,
.cd-monster b::after {
  content: "";
  position: absolute;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #111421;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.cd-monster b::before { left: 2px; }
.cd-monster b::after { right: 2px; }
.cd-monster i {
  top: -11px;
  height: 5px;
  border: 1px solid rgba(48,35,22,0.35);
  background: rgba(40,30,19,0.36);
}
.mon-grunt {
  background: linear-gradient(180deg, #5a7042, #2f4f34);
}
.mon-runner {
  background: linear-gradient(180deg, #d4a945, #8d6730);
}
.mon-brute {
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(180deg, #9a573f, #59352d);
}
.mon-shield {
  background: linear-gradient(180deg, #6b5b93, #3a345f);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3), inset 0 0 0 4px rgba(215,203,255,0.34);
}
.mon-boss {
  border-radius: 18px 18px 9px 9px;
  background: linear-gradient(180deg, #b74a58, #503062);
  box-shadow: 0 10px 22px rgba(0,0,0,0.34), 0 0 0 3px rgba(255,209,102,0.25);
}
.cd-shot::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.shot-cannon::after {
  width: 15px;
  height: 15px;
}
.shot-frost::after {
  box-shadow: 0 0 16px #7fe7ff;
}
.cd-panel-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
    var(--panel);
}
.cd-tower-card {
  min-height: 58px;
}
.tower-chip {
  position: relative;
  color: inherit;
  overflow: hidden;
}
.tower-chip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 28px;
  height: 6px;
  transform: rotate(-16deg);
  transform-origin: left center;
  border-radius: 999px;
  background: currentColor;
  opacity: .75;
}
@keyframes cdMonsterBob {
  from { margin-top: 0; }
  to { margin-top: -2px; }
}
@media (max-width: 820px) {
  .cd-map {
    min-height: 460px;
  }
  .cd-slot {
    width: 44px;
    height: 44px;
  }
}

/* ---------- Thủ Thành Hợp Tác: map rộng & kho súng mở rộng ---------- */
.cd-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
}
.cd-map-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 8px;
  scrollbar-color: rgba(255,209,102,0.5) rgba(255,255,255,0.06);
}
.cd-map {
  min-width: 1120px;
  min-height: 650px;
  --cd-path: #e6c97c;
  --cd-path-shadow: rgba(92, 67, 33, 0.48);
  --cd-path-edge: rgba(86, 62, 28, 0.42);
}
.cd-map.map-forest {
  border-color: rgba(67,104,45,0.72);
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.13) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 12%, rgba(255,255,255,0.13) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 84%, rgba(255,255,255,0.13) 0 1px, transparent 2px),
    linear-gradient(135deg, #82b74b, #5f963c 50%, #4d8135);
}
.cd-map.map-coast {
  --cd-path: #e8c27b;
  --cd-path-shadow: rgba(93,72,42,0.48);
  border-color: rgba(75,157,154,0.72);
  background:
    radial-gradient(circle at 8% 92%, rgba(69,189,209,0.72) 0 95px, transparent 98px),
    radial-gradient(circle at 84% 12%, rgba(82,190,210,0.54) 0 78px, transparent 80px),
    linear-gradient(135deg, #9bcf5c, #72aa45 46%, #588f3d);
}
.cd-map.map-canyon {
  --cd-path: #e1b66d;
  --cd-path-shadow: rgba(80,43,26,0.5);
  --cd-path-edge: rgba(78,43,26,0.45);
  border-color: rgba(168,99,51,0.72);
  background:
    radial-gradient(circle at 18% 20%, rgba(104,58,38,0.28) 0 70px, transparent 74px),
    radial-gradient(circle at 78% 82%, rgba(100,52,34,0.25) 0 88px, transparent 92px),
    linear-gradient(135deg, #b86f43, #8e5637 50%, #6b3f31);
}
.cd-map.map-ruins {
  --cd-path: #d9cfad;
  --cd-path-shadow: rgba(46,52,82,0.48);
  --cd-path-edge: rgba(40,44,68,0.45);
  border-color: rgba(143,125,204,0.72);
  background:
    radial-gradient(circle at 26% 18%, rgba(127,231,255,0.22) 0 60px, transparent 64px),
    radial-gradient(circle at 74% 78%, rgba(198,167,255,0.24) 0 82px, transparent 86px),
    linear-gradient(135deg, #64705d, #4b5f62 48%, #3b4359);
}
.cd-map.map-canyon .cd-forest {
  opacity: 0.25;
  filter: sepia(1) saturate(1.4) drop-shadow(0 5px 0 rgba(74,38,27,0.45));
}
.cd-map.map-ruins .cd-forest {
  opacity: 0.35;
  filter: hue-rotate(70deg) saturate(0.7) drop-shadow(0 5px 0 rgba(35,45,48,0.45));
}
.cd-path-shadow {
  stroke: var(--cd-path-shadow);
  stroke-width: 10;
}
.cd-path-main {
  stroke: var(--cd-path);
  stroke-width: 7;
}
.cd-path-edge {
  stroke: var(--cd-path-edge);
  stroke-width: 8.4;
  stroke-dasharray: 0.1 7.2;
}
.cd-exit,
.cd-spawn {
  position: absolute;
  z-index: 11;
  transform: translateY(-50%);
  text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,0.42);
}
.cd-exit {
  left: 8px;
  top: 52%;
  width: 78px;
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  border: 3px solid rgba(255,209,102,0.78);
  background:
    linear-gradient(90deg, rgba(43,30,16,0.36), rgba(255,244,190,0.18), rgba(43,30,16,0.36)),
    #78623a;
  box-shadow: 0 12px 24px rgba(0,0,0,0.28), inset 0 0 0 4px rgba(255,255,255,0.12);
}
.cd-exit::before,
.cd-exit::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 24px;
  height: 24px;
  border-radius: 5px 5px 0 0;
  background: #6c6f64;
  box-shadow: inset 0 0 0 4px rgba(0,0,0,0.12);
}
.cd-exit::before { left: 7px; }
.cd-exit::after { right: 7px; }
.cd-exit b {
  color: #fff4bb;
  font-size: 1rem;
  font-weight: 900;
}
.cd-exit span {
  color: #f7f0cf;
  font-size: 0.68rem;
  font-weight: 900;
}
.cd-spawn {
  right: 10px;
  top: 52%;
  width: 88px;
  height: 188px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid rgba(198,167,255,0.42);
  background:
    radial-gradient(circle, rgba(198,167,255,0.62), rgba(77,36,113,0.5) 44%, rgba(17,20,43,0.12) 68%, transparent 72%);
  color: #f3e8ff;
  font-size: 0.78rem;
  font-weight: 900;
}
.cd-spawn {
  display: none;
}
.cd-route-gates {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}
.cd-gate {
  position: absolute;
  width: 34px;
  height: 28px;
  transform: translate(-82%, -50%);
  border-radius: 50% 50% 9px 9px;
  background:
    radial-gradient(circle at 50% 58%, #271b18 0 31%, transparent 33%),
    linear-gradient(180deg, #c94f3f, #7d2f2a);
  border: 3px solid rgba(69,37,25,0.48);
  box-shadow: 0 7px 0 rgba(68,43,27,0.28), 0 12px 18px rgba(0,0,0,0.22);
}
.cd-gate::before,
.cd-gate::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 11px;
  height: 15px;
  border-radius: 50%;
  background: #e6d8b9;
}
.cd-gate::before {
  left: 1px;
  transform: rotate(-28deg);
}
.cd-gate::after {
  right: 1px;
  transform: rotate(28deg);
}
.cd-map.map-coast .cd-gate {
  background:
    radial-gradient(circle at 50% 58%, #17202a 0 31%, transparent 33%),
    linear-gradient(180deg, #7fb7bd, #3f7480);
}
.cd-map.map-canyon .cd-gate {
  background:
    radial-gradient(circle at 50% 58%, #261914 0 31%, transparent 33%),
    linear-gradient(180deg, #9a563c, #5a3029);
}
.cd-map.map-ruins .cd-gate {
  background:
    radial-gradient(circle at 50% 58%, #171928 0 31%, transparent 33%),
    linear-gradient(180deg, #8d79c7, #4f4b79);
  box-shadow: 0 7px 0 rgba(35,37,59,0.35), 0 0 14px rgba(198,167,255,0.32);
}
.cd-map-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cd-map-card {
  min-height: 66px;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    var(--panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.cd-map-card b,
.cd-map-card small {
  display: block;
}
.cd-map-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
}
.cd-map-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,209,102,0.14);
}
.cd-map-card:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
.cd-map-card.map-forest { background: linear-gradient(135deg, rgba(102,171,70,0.28), rgba(255,255,255,0.04)); }
.cd-map-card.map-coast { background: linear-gradient(135deg, rgba(73,190,206,0.24), rgba(255,255,255,0.04)); }
.cd-map-card.map-canyon { background: linear-gradient(135deg, rgba(203,115,66,0.26), rgba(255,255,255,0.04)); }
.cd-map-card.map-ruins { background: linear-gradient(135deg, rgba(176,148,255,0.22), rgba(255,255,255,0.04)); }
.cd-tower-list {
  grid-template-columns: 1fr;
}
.cd-tower-card {
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 66px;
  gap: 6px 10px;
}
.cd-tower-card .tower-chip {
  color: var(--tower);
}
.tower-rifle { border-color: #ffd166 !important; color: #ffd166; }
.tower-cannon { border-color: #ff8d7a !important; color: #ff8d7a; }
.tower-frost { border-color: #7fe7ff !important; color: #7fe7ff; }
.tower-laser { border-color: #c6a7ff !important; color: #c6a7ff; }
.tower-sniper { border-color: #f6f0a8 !important; color: #f6f0a8; }
.tower-tesla { border-color: #8afff1 !important; color: #8afff1; }
.tower-flame { border-color: #ffb15c !important; color: #ffb15c; }
.tower-mortar { border-color: #b7c1a1 !important; color: #b7c1a1; }
.tower-chip,
.tower-model {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 44px;
  border: 2px solid currentColor;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.2), transparent 42%),
    #272d3d;
  box-shadow: inset 0 -7px 0 rgba(0,0,0,0.2), 0 8px 12px rgba(0,0,0,0.22);
  overflow: visible;
}
.tower-chip::before {
  content: none;
}
.tower-chip i,
.tower-model i {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 24px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 9px 9px 5px 5px;
  background: currentColor;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);
}
.tower-chip em,
.tower-model em {
  position: absolute;
  left: 50%;
  top: 15px;
  width: 31px;
  height: 6px;
  transform: rotate(-15deg);
  transform-origin: left center;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 9px currentColor, inset 0 -2px 0 rgba(0,0,0,0.22);
}
.tower-cannon i,
.tower-mortar i {
  width: 28px;
  height: 20px;
  top: 10px;
}
.tower-cannon em,
.tower-mortar em {
  width: 36px;
  height: 11px;
  top: 17px;
  transform: rotate(-8deg);
}
.tower-frost em,
.tower-tesla em {
  box-shadow: 0 0 14px currentColor;
}
.tower-laser em,
.tower-sniper em {
  width: 42px;
  height: 5px;
  top: 14px;
}
.tower-flame em {
  width: 32px;
  height: 9px;
  box-shadow: 0 0 16px currentColor;
}
.cd-slot.has-tower::before,
.cd-slot.has-tower::after {
  display: none;
}
.cd-slot.has-tower {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.2), transparent 45%),
    #59606b;
  box-shadow: 0 9px 0 #363b42, 0 15px 22px rgba(0,0,0,0.32);
}
.cd-slot.has-tower .tower-model {
  position: absolute;
  left: 50%;
  top: -19px;
  z-index: 4;
  width: 44px;
  height: 39px;
  margin: 0;
  transform: translateX(-50%);
  line-height: normal;
}
.cd-slot.has-tower .tower-code {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 14px;
  z-index: 5;
  margin: 0;
  color: #f6f1d3;
  font-size: 0.69rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(0,0,0,0.55);
}
.cd-slot.has-tower small {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  z-index: 5;
  margin: 0;
  color: #f6f1d3;
  font-size: 0.64rem;
  line-height: 1;
}
.cd-slot.selected {
  box-shadow: 0 0 0 4px rgba(255,209,102,0.32), 0 9px 0 #514428, 0 15px 22px rgba(0,0,0,0.32);
}
.cd-slot.disabled {
  cursor: not-allowed;
}
.cd-deco-tree {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2f7c34;
  box-shadow: -14px 8px 0 -4px #3f913b, 12px 8px 0 -5px #276b2e, 0 21px 0 -14px #6b5630;
}
.cd-deco-water {
  width: 58px;
  height: 34px;
  border-radius: 50%;
  background: rgba(86,196,218,0.62);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.16);
}
.cd-deco-bridge {
  width: 64px;
  height: 24px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(80,50,20,0.32) 0 5px, transparent 5px 12px),
    linear-gradient(180deg, #b88444, #7b532d);
  box-shadow: 0 5px 0 rgba(65,43,22,0.32);
  transform: translate(-50%, -50%) rotate(-16deg);
}
.cd-deco-bones {
  width: 34px;
  height: 16px;
  border-radius: 999px;
  background: #e6d8b9;
  box-shadow: 13px 0 0 -3px #e6d8b9, -13px 0 0 -3px #e6d8b9;
  transform: translate(-50%, -50%) rotate(-18deg);
}
.cd-deco-crystal {
  width: 25px;
  height: 38px;
  background: linear-gradient(135deg, #7fe7ff, #c6a7ff);
  clip-path: polygon(50% 0, 100% 30%, 76% 100%, 24% 100%, 0 30%);
  filter: drop-shadow(0 0 10px rgba(127,231,255,0.55));
}
.cd-deco-fire {
  width: 24px;
  height: 32px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 70%, #ffe082 0 18%, #ff8d4d 42%, #d94835 70%, transparent 72%);
  filter: drop-shadow(0 0 10px rgba(255,141,77,0.65));
}
.cd-deco-barrel {
  width: 24px;
  height: 28px;
  border-radius: 8px;
  background: #8a5f30;
  box-shadow: inset 0 5px 0 rgba(255,255,255,0.14), inset 0 -5px 0 rgba(0,0,0,0.18);
}
.cd-deco-ruin {
  width: 38px;
  height: 34px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(0,0,0,0.18) 20% 30%, transparent 30% 70%, rgba(0,0,0,0.18) 70% 80%, transparent 80%),
    #8b8f85;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.1);
}
.mon-swarm {
  width: 21px;
  height: 18px;
  background: linear-gradient(180deg, #7d8d42, #40522e);
}
.mon-shaman {
  width: 31px;
  height: 27px;
  background: linear-gradient(180deg, #4eb8a6, #2f5d5c);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3), 0 0 0 3px rgba(127,231,255,0.24);
}
.mon-bomber {
  width: 34px;
  height: 28px;
  background: linear-gradient(180deg, #544741, #29252b);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,141,122,0.28);
}
.mon-ghost {
  width: 30px;
  height: 25px;
  opacity: 0.78;
  background: linear-gradient(180deg, #d8efff, #87a6ce);
  filter: drop-shadow(0 0 8px rgba(198,231,255,0.45));
}
.mon-splitter {
  width: 36px;
  height: 30px;
  background: linear-gradient(180deg, #8e7255, #49372f);
}
.cd-monster.burning {
  filter: drop-shadow(0 0 9px rgba(255,141,77,0.75));
}
.cd-monster.burning::after {
  background: rgba(120,45,24,0.78);
}
.shot-tesla {
  height: 5px;
  background: #8afff1;
  box-shadow: 0 0 15px #8afff1;
}
.shot-flame {
  height: 7px;
  background: #ffb15c;
}
.shot-sniper,
.shot-laser {
  height: 3px;
}
.shot-mortar {
  height: 9px;
  background: #b7c1a1;
}
@media (max-width: 820px) {
  .cd-layout {
    grid-template-columns: 1fr;
  }
  .cd-map {
    min-width: 960px;
    min-height: 560px;
  }
  .cd-map-list {
    grid-template-columns: 1fr;
  }
}

/* Fix layout: map phải hiện trọn trong khung, không cần cuộn ngang. */
.cd-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
}
.cd-map-scroll {
  overflow: visible;
}
.cd-map {
  width: 100%;
  min-width: 0;
  min-height: clamp(560px, 48vw, 680px);
}
.cd-exit {
  display: none;
}
@media (max-width: 1180px) {
  .cd-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .cd-map {
    min-width: 0;
    min-height: 520px;
  }
}

/* Panel xuống dưới để bản đồ chiếm full chiều ngang. */
.cd-layout {
  grid-template-columns: 1fr;
  gap: 14px;
}
.cd-map {
  min-height: clamp(640px, 58vw, 790px);
}
.cd-panel {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
}
.cd-panel-section {
  height: auto;
  min-width: 0;
}
.cd-map-list {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}
.cd-tower-list {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}
.cd-tower-card {
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 66px;
  overflow: visible;
}
.cd-tower-card b,
.cd-tower-card small {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cd-panel-section:nth-child(3) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
.cd-panel-section:nth-child(3) h3 {
  grid-column: 1 / -1;
}
.cd-panel-section:nth-child(3) .cd-empty-select,
.cd-panel-section:nth-child(3) .cd-selected {
  margin-bottom: 0;
}
.cd-panel-section:nth-child(3) .cd-start {
  align-self: stretch;
  min-height: 62px;
  margin-top: 0;
}
.cd-route-gates,
.cd-gate {
  display: none;
}
@media (max-width: 1180px) {
  .cd-tower-list {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
  .cd-map-list {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
@media (max-width: 680px) {
  .cd-map {
    min-height: 540px;
  }
  .cd-tower-list,
  .cd-map-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pig (xúc xắc) ---------- */
.pig-root { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 10px; }
.pig-scores { display: flex; gap: 40px; }
.pig-p { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pig-p span { font-size: 0.85rem; color: var(--muted); }
.pig-p b { font-size: 2rem; }
.pig-p.p1 b { color: var(--p1); }
.pig-p.p2 b { color: var(--p2); }

/* viên xúc xắc phẳng (giống Yahtzee, to hơn) */
.pig-die-stage {
  perspective: 800px; padding: 22px 30px; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 38%, #1f7a4d, #0c4429 78%);
  box-shadow: inset 0 0 34px rgba(0,0,0,0.5), inset 0 0 0 3px rgba(255,255,255,0.06), 0 10px 26px rgba(0,0,0,0.4);
}
.pig-die-stage::after {
  content: ""; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 16px; border-radius: 50%;
  background: rgba(0,0,0,0.45); filter: blur(6px); z-index: 0;
}
.pig-die {
  width: 110px; height: 110px;
  background: linear-gradient(150deg, #ffffff 0%, #eef0f8 42%, #c9cee0 100%);
  border-radius: 22px;
  box-shadow: 0 6px 0 #aab0cc, 0 10px 0 #9298ba, 0 17px 24px rgba(0,0,0,0.5),
              inset 0 4px 5px rgba(255,255,255,0.95), inset 0 -7px 10px rgba(120,126,165,0.55);
  padding: 14px;
  position: relative; z-index: 1;
  user-select: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.pig-die-face {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}
.pig-pip-slot { display: flex; align-items: center; justify-content: center; }
.pig-pip-slot.on::after {
  content: ""; width: 19px; height: 19px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #5a5f80, #14172a 75%);
  box-shadow: inset 0 -2px 2px rgba(255,255,255,0.35), inset 0 2px 3px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.4);
}
.pig-die.rolling { animation: pigTumble 0.5s ease-in-out infinite; }
@keyframes pigTumble {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(-10deg) translateY(0); }
  25%  { transform: rotateX(36deg) rotateY(-32deg) rotateZ(9deg) translateY(-14px); }
  50%  { transform: rotateX(-26deg) rotateY(30deg) rotateZ(-9deg) translateY(0); }
  75%  { transform: rotateX(30deg) rotateY(22deg) rotateZ(11deg) translateY(-10px); }
  100% { transform: rotateX(0deg) rotateY(0deg) rotateZ(-10deg) translateY(0); }
}
.pig-die.landed { animation: pigLand 0.34s cubic-bezier(0.2,1.6,0.4,1); }
@keyframes pigLand {
  0% { transform: translateY(-16px) scale(1.22) rotate(-5deg); }
  55% { transform: translateY(0) scale(0.9, 1.12) rotate(3deg); }
  75% { transform: scale(1.05, 0.95); }
  100% { transform: scale(1) rotate(0); }
}
.pig-die.bust {
  animation: pigBust 0.6s ease;
  background: linear-gradient(150deg, #ffe3e8, #ff5d73);
  box-shadow: 0 6px 0 #b73347, 0 10px 0 #9c2b3c, 0 0 28px rgba(255,93,115,0.85);
}
@keyframes pigBust {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px) rotate(-5deg); }
  40% { transform: translateX(9px) rotate(5deg); }
  60% { transform: translateX(-7px) rotate(-3deg); }
  80% { transform: translateX(7px) rotate(3deg); }
}

.pig-temp { font-size: 1.1rem; color: var(--muted); }
.pig-temp b { color: var(--accent); font-size: 1.4rem; }
.pig-actions { display: flex; gap: 12px; }

/* ---------- Yahtzee ---------- */
.yz-root { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }

/* xúc xắc dạng chấm 3D */
.yz-dice {
  display: flex; gap: 12px; perspective: 700px; flex-wrap: wrap; justify-content: center;
  padding: 16px 20px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 40%, #1f7a4d, #0c4429 80%);
  box-shadow: inset 0 0 26px rgba(0,0,0,0.45), inset 0 0 0 3px rgba(255,255,255,0.06);
}
.yz-die {
  width: 62px; height: 62px;
  background: linear-gradient(150deg, #ffffff 0%, #eef0f8 42%, #c9cee0 100%);
  border-radius: 14px;
  box-shadow: 0 4px 0 #aab0cc, 0 7px 0 #9298ba, 0 11px 14px rgba(0,0,0,0.45),
              inset 0 3px 4px rgba(255,255,255,0.95), inset 0 -5px 7px rgba(120,126,165,0.5);
  padding: 8px;
  position: relative;
  cursor: default; user-select: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.yz-die-face {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 2px;
}
.yz-pip-slot { display: flex; align-items: center; justify-content: center; }
.yz-pip-slot.on::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #5a5f80, #14172a 75%);
  box-shadow: inset 0 -1px 1px rgba(255,255,255,0.35), inset 0 1px 2px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.4);
}
.yz-die.yz-blank { opacity: 0.4; }
.yz-die.rollable { cursor: pointer; }
.yz-die.rollable:hover { transform: translateY(-4px); box-shadow: 0 6px 0 #aab0cc, 0 9px 0 #9298ba, 0 15px 18px rgba(0,0,0,0.5), inset 0 3px 4px rgba(255,255,255,0.95), inset 0 -5px 7px rgba(120,126,165,0.5); }
.yz-die.held {
  background: linear-gradient(150deg, #fff8e0, #ffd166);
  box-shadow: 0 4px 0 #c79a3a, 0 7px 0 #a87f2b, 0 0 16px rgba(255,209,102,0.75), inset 0 3px 4px rgba(255,255,255,0.9);
}
.yz-die-lock {
  position: absolute; top: -8px; right: -6px;
  font-size: 0.85rem; opacity: 0; transform: scale(0.5);
  transition: opacity 0.15s, transform 0.15s;
}
.yz-die.held .yz-die-lock { opacity: 1; transform: scale(1); }
.yz-die.rolling { animation: yzTumble 0.16s linear infinite; }
@keyframes yzShake {
  0% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(8deg) translateY(-3px); }
  100% { transform: rotate(-8deg) translateY(0); }
}
@keyframes yzTumble {
  0% { transform: rotate(-14deg) translateY(0) scale(1); }
  30% { transform: rotate(10deg) translateY(-7px) scale(1.06); }
  60% { transform: rotate(-6deg) translateY(-3px) scale(1.03); }
  100% { transform: rotate(14deg) translateY(0) scale(1); }
}

.yz-actions { display: flex; align-items: center; gap: 12px; }
.yz-rollbtn { font-size: 1.05rem; padding: 12px 26px; border-radius: 12px; }
.yz-rollbtn b { font-size: 1.15rem; }
.yz-rollbtn .yz-rollicon { display: inline-block; }
.yz-rollbtn:not(:disabled):hover .yz-rollicon { animation: yzShake 0.18s linear 3; }
.yz-rollbtn.yz-spent { opacity: 0.5; }

.yz-hint {
  font-size: 0.9rem; color: var(--muted); max-width: 340px; text-align: center;
  min-height: 1.3em;
}
.yz-hint.yz-celebrate {
  color: #1a1a1a; background: var(--accent); border-radius: 999px;
  padding: 6px 16px; font-weight: 700;
  animation: yzPulse 0.6s ease-in-out infinite;
}
@keyframes yzPulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }

.yz-table {
  width: min(460px, 96vw);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-radius: var(--radius);
  padding: 8px; box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.07);
}
.yz-row {
  display: grid; grid-template-columns: 1fr 62px 62px; align-items: center;
  padding: 5px 10px; border-radius: 7px;
}
.yz-row:not(.yz-head):not(.yz-total):nth-child(odd) { background: rgba(255,255,255,0.03); }
.yz-head { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 6px; }
.yz-head .yz-v { font-weight: 800; border-radius: 6px; transition: background 0.2s; }
.yz-head .yz-h1 { color: var(--p1); }
.yz-head .yz-h2 { color: var(--p2); }
.yz-head .yz-v.active { background: var(--bg-soft); box-shadow: 0 0 0 2px currentColor inset; }
.yz-upper .yz-cat { color: #cfe0ff; }
.yz-cat { font-size: 0.88rem; display: flex; align-items: center; gap: 7px; }
.yz-ic { font-size: 1rem; width: 1.3em; text-align: center; }
.yz-v {
  text-align: center; font-weight: 700; height: 30px; line-height: 30px;
  border-radius: 6px; font-size: 0.95rem;
}
.yz-v.filled { color: var(--text); background: rgba(255,255,255,0.06); }
.yz-v.zero { color: var(--muted); }
.yz-v.preview { color: var(--accent); opacity: 0.75; font-style: italic; }
.yz-v.pickable { cursor: pointer; outline: 2px dashed rgba(255,209,102,0.5); }
.yz-v.pickable:hover { background: var(--accent); color: #1a1a1a; opacity: 1; outline-style: solid; }
.yz-v.yz-pop-good { animation: yzPopGood 0.6s ease; }
.yz-v.yz-pop-zero { animation: yzPopZero 0.6s ease; }
@keyframes yzPopGood {
  0% { transform: scale(1.6); background: var(--good); color: #0f1226; }
  100% { transform: scale(1); }
}
@keyframes yzPopZero {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); } 75% { transform: translateX(4px); }
}
.yz-bonus { font-size: 0.82rem; color: var(--muted); border-top: 1px dashed rgba(255,255,255,0.12); margin-top: 4px; padding-top: 7px; }
.yz-bonus .yz-v.filled { color: var(--good); background: rgba(110,231,183,0.15); }
.yz-total { border-top: 2px solid rgba(255,255,255,0.12); margin-top: 4px; font-size: 1.15rem; padding-top: 8px; }
.yz-total .yz-cat { font-weight: 800; }
.yz-total .p1 { color: var(--p1); }
.yz-total .p2 { color: var(--p2); }

/* ---------- Domino ---------- */
.dom-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.dom-info { font-size: 0.85rem; color: var(--muted); text-align: center; }
.dom-line-wrap { width: 100%; display: flex; justify-content: center; }
.dom-line {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; min-height: 120px; max-height: 360px; overflow: auto;
  background: #14532d;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 16px 16px;
  border: 3px solid #0d3b20;
  border-radius: 14px; box-shadow: var(--shadow), inset 0 0 30px rgba(0,0,0,0.4);
  width: fit-content; min-width: min(640px, 92vw); max-width: 96vw;
  align-items: stretch;
  justify-content: center;
}
.dom-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; justify-content: flex-start; min-height: 64px; }
/* hàng ngược: rẽ xuống ở mép phải rồi chạy sang trái -> căn về bên phải */
.dom-row.reverse { flex-direction: row-reverse; }

.dom-hand-label { font-size: 0.85rem; color: var(--muted); align-self: flex-start; }
.dom-hand { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Quân domino dạng chấm tròn */
.dom-tile {
  --pip-cell: 9px;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, #fffefb 0%, #f3efe2 55%, #ddd6c4 100%);
  border-radius: 8px;
  box-shadow: 0 3px 7px rgba(0,0,0,0.45), inset 0 2px 2px rgba(255,255,255,0.95), inset 0 -3px 5px rgba(120,108,84,0.4), inset 0 0 0 1px rgba(0,0,0,0.13);
  padding: 5px;
  gap: 3px;
  user-select: none;
  transition: transform 0.1s, box-shadow 0.12s;
}
/* quân dọc: 2 mặt xếp trên-dưới, vạch ngăn ngang */
.dom-tile.dom-v { flex-direction: column; }
.dom-tile.dom-v .dom-divider { width: 80%; height: 2px; box-shadow: 0 1px 0 rgba(255,255,255,0.7); }
/* quân ngang: 2 mặt cạnh nhau, vạch ngăn dọc */
.dom-tile.dom-h { flex-direction: row; }
.dom-tile.dom-h .dom-divider { width: 2px; height: 80%; box-shadow: 1px 0 0 rgba(255,255,255,0.7); }

.dom-face {
  display: grid;
  grid-template-columns: repeat(3, var(--pip-cell));
  grid-template-rows: repeat(3, var(--pip-cell));
  gap: 1px;
}
.dom-pip-slot { display: flex; align-items: center; justify-content: center; }
.dom-pip {
  width: 6.5px; height: 6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #4a4a4a, #0a0a0a 72%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.85), inset 0 -1px 1px rgba(255,255,255,0.45), 0 1px 0 rgba(255,255,255,0.55);
}
.dom-divider { background: linear-gradient(90deg, rgba(0,0,0,0.42), rgba(0,0,0,0.22)); border-radius: 2px; }

/* ---------- Submarine Hunt ---------- */
.sh-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 6px 0 20px;
}
.sh-hud {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(260px, 1.1fr) minmax(190px, 1fr);
  gap: 10px;
  width: min(900px, 100%);
  max-width: 100%;
}
.sh-panel,
.sh-mid,
.sh-board-wrap,
.sh-intel {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% -20%, rgba(77,208,225,0.13), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent),
    var(--panel);
  box-shadow: var(--shadow);
}
.sh-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  min-height: 82px;
  padding: 12px;
}
.sh-panel span {
  color: var(--text);
  font-weight: 900;
}
.sh-panel b {
  color: var(--accent);
}
.sh-panel small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}
.sh-panel.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,209,102,0.14), var(--shadow);
}
.sh-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 82px;
  padding: 12px 14px;
  text-align: center;
}
.sh-mid b {
  color: var(--accent);
}
.sh-mid span {
  color: var(--text);
  font-size: 0.86rem;
}
.sh-mid small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.28;
}
.sh-board-wrap {
  width: min(720px, 100%);
  max-width: 100%;
  padding: 9px;
  background:
    radial-gradient(circle at 18% 12%, rgba(110,231,183,0.18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(77,208,225,0.17), transparent 26%),
    #061426;
}
.sh-grid {
  display: grid;
  gap: 3px;
  aspect-ratio: 1 / 1;
}
.sh-cell {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.09), transparent 55%),
    #0d3c63;
  color: #e9ecff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: clamp(0.62rem, 1.75vw, 0.95rem);
  font-weight: 900;
  line-height: 1;
  user-select: none;
  transition: background 0.12s, box-shadow 0.12s, transform 0.08s;
}
.sh-cell:not(:disabled):hover {
  transform: translateY(-1px);
  background: #145986;
}
.sh-cell:disabled {
  cursor: default;
  opacity: 1;
}
.sh-cell.sh-exit {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 55%),
    #125f78;
}
.sh-cell.sh-exit::before {
  content: "";
  position: absolute;
  top: 3px;
  width: 34%;
  height: 3px;
  border-radius: 999px;
  background: rgba(110,231,183,0.72);
}
.sh-cell.sh-reef {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), transparent 30%),
    #27364d;
  color: #8b9ab8;
}
.sh-reef-ic {
  font-size: clamp(0.7rem, 2vw, 1.05rem);
  filter: grayscale(0.25) brightness(0.95);
  line-height: 1;
}
.sh-cell.sh-target {
  box-shadow: inset 0 0 0 3px rgba(255,209,102,0.72), 0 0 12px rgba(255,209,102,0.2);
  animation: bs-aim 1s ease-in-out infinite;
}
.sh-cell.sh-selected {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}
.sh-cell.sh-sub {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), transparent 55%),
    #0e4f7a;
  box-shadow: inset 0 0 0 2px rgba(245,197,66,0.7), 0 0 16px rgba(245,197,66,0.3);
  animation: sh-bob 2.4s ease-in-out infinite;
}
@keyframes sh-bob {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(245,197,66,0.6), 0 0 12px rgba(245,197,66,0.25); }
  50% { box-shadow: inset 0 0 0 2px rgba(245,197,66,0.85), 0 0 22px rgba(245,197,66,0.5); }
}
.sh-sub-svg {
  width: 88%;
  height: 88%;
  overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.sh-cell.sh-final {
  background: radial-gradient(circle at 50% 45%, #ff9d5c 0%, #3a0d18 70%);
  box-shadow: inset 0 0 0 2px #ffd166, 0 0 18px rgba(239,68,68,0.5);
  animation: bs-smolder 1.4s ease-in-out infinite;
}
.sh-noise-zone {
  background:
    linear-gradient(135deg, rgba(255,209,102,0.22), transparent 55%),
    #145986;
  animation: sh-zone 1.6s ease-in-out infinite;
}
.sh-decoy-zone {
  background:
    linear-gradient(135deg, rgba(196,181,253,0.26), transparent 55%),
    #234878;
  animation: sh-zone 1.6s ease-in-out infinite;
}
@keyframes sh-zone {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
.sh-mark-ic {
  font-size: clamp(0.72rem, 2.2vw, 1.15rem);
  line-height: 1;
}
.sh-mark-txt {
  font-size: clamp(0.4rem, 1.15vw, 0.58rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.05;
  margin-top: 1px;
  opacity: 0.95;
}
.sh-cell.sh-mark {
  flex-direction: column;
  gap: 0;
}
.sh-mark.sh-pending {
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}
.sh-mark.sh-hit {
  background: radial-gradient(circle at 50% 45%, #ffe66a 0%, #ef4444 60%, #7a0f25 100%);
  box-shadow: inset 0 0 0 3px #ffd166, 0 0 14px rgba(239,68,68,0.45);
  animation: bs-pop 0.45s cubic-bezier(0.3,1.6,0.5,1);
}
.sh-mark.sh-hot {
  background: #f97316;
  box-shadow: inset 0 0 0 3px rgba(255,209,102,0.75);
  animation: bs-pending 0.9s ease-in-out infinite;
}
.sh-mark.sh-mid {
  background: #2563eb;
}
.sh-mark.sh-miss {
  background: #172554;
  color: #9aa0d0;
}
.sh-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: min(900px, 100%);
  max-width: 100%;
}
.sh-mode {
  display: grid;
  grid-template-rows: auto auto;
  min-width: 160px;
  max-width: 220px;
  min-height: 58px;
  white-space: normal;
  text-align: left;
}
.sh-mode b {
  font-size: 0.86rem;
}
.sh-mode small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.15;
}
.sh-mode.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,209,102,0.14);
}
.sh-help {
  width: min(620px, 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: rgba(255,255,255,0.055);
  text-align: center;
}
.sh-intel {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr);
  gap: 10px;
  width: min(900px, 100%);
  max-width: 100%;
  padding: 12px;
}
.sh-log,
.sh-legend {
  display: grid;
  gap: 7px;
}
.sh-log b {
  color: var(--accent);
  font-size: 0.9rem;
}
.sh-log span,
.sh-legend span {
  display: block;
  border-radius: 7px;
  background: rgba(255,255,255,0.055);
  padding: 7px 8px;
}
.sh-log span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.28;
}
.sh-legend {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sh-legend b {
  display: block;
  color: var(--text);
  font-size: 0.76rem;
}
.sh-legend small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
}
@media (max-width: 760px) {
  .sh-hud,
  .sh-intel {
    grid-template-columns: 1fr;
  }
  .sh-mid {
    order: -1;
  }
}
@media (max-width: 520px) {
  .sh-board-wrap {
    padding: 6px;
  }
  .sh-grid {
    gap: 2px;
  }
  .sh-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .sh-mode {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
  .sh-legend {
    grid-template-columns: 1fr;
  }
}
.dom-tile.playable { cursor: pointer; outline: 3px solid var(--good); outline-offset: 1px; box-shadow: 0 3px 7px rgba(0,0,0,0.45), 0 0 14px rgba(46,160,67,0.45), inset 0 2px 2px rgba(255,255,255,0.95); }
.dom-tile.playable:hover { transform: translateY(-5px) scale(1.04); transition: transform 0.1s; box-shadow: 0 9px 14px rgba(0,0,0,0.5), 0 0 18px rgba(46,160,67,0.6), inset 0 2px 2px rgba(255,255,255,0.95); }
.dom-actions { display: flex; gap: 10px; }
.dom-glow {
  animation: domGlow 1s ease-in-out infinite;
  background: var(--accent) !important;
  color: #1a1a1a !important;
  border-color: var(--accent) !important;
}
@keyframes domGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,209,102,0.5); }
  50% { box-shadow: 0 0 18px rgba(255,209,102,0.95); }
}

/* ---------- Nối Từ ---------- */
.nt-root { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(520px, 96vw); }
.nt-need {
  font-size: 1.05rem; padding: 10px 18px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.nt-need b { color: var(--accent); text-shadow: 0 0 8px rgba(255,209,102,0.4); }
.nt-timer {
  font-size: 1.25rem; font-weight: 900; color: #0f1226;
  background: linear-gradient(160deg, #7af0a6, #1f9d57);
  padding: 6px 18px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.4);
}
.nt-timer.low { background: linear-gradient(160deg, #ff97a6, #d6243f); color: #fff; animation: ntPulse 0.6s ease infinite; }
@keyframes ntPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.nt-inputrow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
.nt-input {
  flex: 1; min-width: 160px;
  background: var(--bg); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; color: var(--text); padding: 10px 14px; font-size: 1.1rem;
  transition: outline 0.1s, box-shadow 0.15s;
}
.nt-input:focus { outline: 2px solid var(--accent); box-shadow: 0 0 14px rgba(255,209,102,0.3); }
.nt-input:disabled { opacity: 0.55; }
.nt-err { color: var(--p1); font-size: 0.9rem; min-height: 1.2em; margin: 0; text-align: center; }
.nt-give { font-size: 0.85rem; }
.nt-challenge { font-size: 0.85rem; background: rgba(255,209,102,0.18); color: var(--accent); }
.nt-challenge:hover:not(:disabled) { background: var(--accent); color: #1a1a1a; }
.nt-challenge:disabled { opacity: 0.4; }
.nt-judge-bad {
  color: #1a1a1a !important; background: var(--p1); font-weight: 700;
  padding: 8px 12px; border-radius: 8px;
}
.nt-judge-warn {
  color: #1a1a1a !important; background: var(--accent); font-weight: 700;
  padding: 8px 12px; border-radius: 8px;
}
.nt-chain {
  display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 0%, #1d2750, #11172e 80%); border-radius: 14px; padding: 14px;
  max-height: 220px; overflow-y: auto; width: 100%;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.nt-word {
  position: relative; padding: 5px 12px; border-radius: 999px; font-size: 0.92rem; font-weight: 700;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.15);
  animation: ntPop 0.28s cubic-bezier(0.3,1.6,0.5,1);
}
.nt-word:not(:first-child)::before {
  content: "→"; color: var(--muted); margin-right: 7px; font-weight: 400; opacity: 0.7;
}
.nt-word.p1 { background: linear-gradient(160deg, rgba(255,93,115,0.5), rgba(255,93,115,0.28)); box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,93,115,0.5); }
.nt-word.p2 { background: linear-gradient(160deg, rgba(77,208,225,0.5), rgba(77,208,225,0.28)); box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(77,208,225,0.5); }
.nt-word.sys { background: rgba(255,255,255,0.12); color: var(--muted); font-style: italic; }
@keyframes ntPop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Đoán Chữ (Hangman) ---------- */
.hm-root { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(560px, 96vw); }
.hm-setbox { text-align: center; background: var(--panel); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); width: 100%; }
.hm-setbox h3 { margin: 0 0 14px; }
.hm-setinput {
  background: var(--bg); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; color: var(--text); padding: 10px 14px; font-size: 1.1rem;
  width: 240px; margin-right: 8px;
}
.hm-setinput:focus { outline: 2px solid var(--accent); }
.hm-note { color: var(--muted); font-size: 0.85rem; margin: 12px 0 0; }
.hm-err { color: var(--p1); font-size: 0.9rem; min-height: 1.2em; }
.hm-gallows { width: 150px; height: 184px; }
.hm-svg { width: 100%; height: 100%; overflow: visible; }
.hm-struct { stroke: #8a5a2b; stroke-width: 6; stroke-linecap: round; }
.hm-brace { stroke: #8a5a2b; stroke-width: 4; stroke-linecap: round; }
.hm-rope { stroke: #c9a06a; stroke-width: 3; stroke-linecap: round; }
.hm-part { stroke: #e8ecff; stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s ease, stroke 0.3s; }
.hm-part.on { stroke-dashoffset: 0; }
.hm-gallows.danger .hm-part.on { stroke: #ffb15c; }
.hm-gallows.dead .hm-part.on { stroke: #ff5d73; }
.hm-eyes { opacity: 0; transition: opacity 0.3s; }
.hm-eyes line { stroke: #ff5d73; stroke-width: 2.6; stroke-linecap: round; }
.hm-gallows.dead .hm-eyes { opacity: 1; }
.hm-gallows.dead { animation: hmShake 0.5s ease; }
@keyframes hmShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.hm-word { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hm-ch {
  min-width: 30px; height: 40px;
  display: inline-flex; align-items: flex-end; justify-content: center;
  font-size: 1.7rem; font-weight: 800;
  border-bottom: 3px solid rgba(255,255,255,0.3); padding-bottom: 3px;
  color: var(--accent); text-shadow: 0 2px 6px rgba(255,209,102,0.4);
}
.hm-status { color: var(--muted); font-size: 0.95rem; }
.hm-keys { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; width: 100%; max-width: 460px; }
.hm-key {
  aspect-ratio: 1 / 1; border-radius: 9px;
  background: linear-gradient(160deg, #2c3656, #1f2742); color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 800; cursor: pointer; font-size: 0.98rem;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.12);
  transition: background 0.1s, transform 0.06s, box-shadow 0.1s;
}
.hm-key:hover:not(:disabled) { background: linear-gradient(160deg, #ffe08a, #f0b429); color: #1a1a1a; transform: translateY(-2px); }
.hm-key:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,0.35); }
.hm-key:disabled { cursor: default; opacity: 0.55; box-shadow: none; }
.hm-key.hit { background: linear-gradient(160deg, #6ff0a0, #1f9d57); color: #0f1226; opacity: 1; box-shadow: 0 0 10px rgba(46,160,67,0.5); }
.hm-key.miss { background: rgba(255,93,115,0.42); opacity: 1; box-shadow: inset 0 0 0 1px rgba(255,93,115,0.6); }

/* ---------- Màn hình chúc mừng chiến thắng ---------- */
.win-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 24, 0.78);
  backdrop-filter: blur(4px);
}
.win-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.win-card {
  position: relative;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 36px 44px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: winPop 0.45s cubic-bezier(0.18, 0.9, 0.32, 1.4);
  max-width: 90vw;
}
@keyframes winPop {
  0% { transform: scale(0.4) translateY(40px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.win-emoji {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 0 auto;
  border-radius: 50%;
  background: #151936;
  border: 1px solid rgba(255,255,255,0.16);
  animation: winBounce 1.2s ease-in-out infinite;
}
.win-emoji::before,
.win-emoji::after {
  content: "";
  position: absolute;
}
.win-emoji.win-win::before {
  left: 19px;
  top: 16px;
  width: 40px;
  height: 34px;
  background: var(--accent);
  clip-path: polygon(0 12%, 28% 32%, 50% 0, 72% 32%, 100% 12%, 88% 100%, 12% 100%);
}
.win-emoji.win-win::after {
  left: 28px;
  top: 54px;
  width: 22px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
}
.win-emoji.win-draw::before {
  left: 16px;
  top: 35px;
  width: 46px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
}
.win-emoji.win-draw::after {
  left: 21px;
  top: 22px;
  width: 36px;
  height: 36px;
  border: 5px solid var(--p2);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
}
.win-emoji.win-lose::before {
  left: 20px;
  top: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 45% 45%;
  background: var(--p1);
}
.win-emoji.win-lose::after {
  left: 27px;
  top: 31px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #151936;
  box-shadow: 16px 0 0 #151936, 8px 15px 0 -2px #151936;
}
@keyframes winBounce {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}
.win-title {
  margin: 12px 0 6px;
  font-size: 2rem;
  background: linear-gradient(90deg, var(--accent), var(--good));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.win-sub { margin: 0 0 22px; color: var(--text); font-size: 1.15rem; }
.win-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Trộm Kho Báu ---------- */
.tr-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.tr-info { color: var(--muted); font-size: 0.9rem; text-align: center; min-height: 1.2em; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.tr-prog { font-weight: 700; letter-spacing: 0.08em; }
.tr-prog.tr-p1 { color: var(--p1); }
.tr-prog.tr-p2 { color: var(--p2); }
.tr-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.tr-place-info { color: var(--accent); font-weight: 700; font-size: 0.9rem; }
.tr-controls.tr-hidden { display: none; }
.tr-boards { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.tr-board-wrap {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.tr-board-wrap.tr-active { border-color: var(--accent); }
.tr-board-title { text-align: center; margin-bottom: 8px; font-size: 0.85rem; color: var(--muted); }
.tr-grid {
  display: grid;
  gap: 3px;
  width: min(300px, 80vw);
  aspect-ratio: 1 / 1;
}
.tr-cell {
  background: #2a3a6b;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.tr-active .tr-cell:hover { background: #3a4a8b; }
.tr-cell.treasure { background: #4a3a16; }
.tr-cell.dug { cursor: default; }
.tr-cell.dug.hit, .tr-cell.hit { background: var(--good); color: #0f1226; }
.tr-cell.hot { background: #d33049; color: #fff; }
.tr-cell.warm { background: #e8804a; color: #fff; }
.tr-cell.mild { background: #c9a13b; color: #1a1a1a; }
.tr-cell.cold { background: #2f6f8f; color: #cfe; }
.tr-cell.dug:not(.hot):not(.warm):not(.mild):not(.cold):not(.hit) { background: #1a2447; color: var(--muted); }

/* ---------- Tank Arena Theo Luot ---------- */
.ta-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.ta-hud {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.25fr) minmax(170px, 1fr);
  gap: 10px;
  width: min(900px, 96vw);
  align-items: stretch;
}
.ta-player,
.ta-mid {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.ta-player {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}
.ta-player span,
.ta-player b {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
}
.ta-player b { color: var(--text); }
.ta-player > i {
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--good);
  transition: width 0.15s;
}
.ta-player.p1 > i { background: var(--p1); }
.ta-player.p2 > i { background: var(--p2); }
.ta-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.12), var(--shadow);
}
.ta-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 3px;
}
.ta-mid b {
  color: var(--accent);
  font-size: 1rem;
}
.ta-mid span {
  color: var(--text);
  font-size: 0.86rem;
}
.ta-mid small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}
.ta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ta-actions .btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.18);
}
.ta-board {
  --ta-cell: clamp(28px, 6.5vw, 46px);
  display: grid;
  grid-template-columns: repeat(var(--ta-n), var(--ta-cell));
  grid-template-rows: repeat(var(--ta-n), var(--ta-cell));
  gap: 3px;
  background: #11172f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--shadow);
  max-width: 96vw;
  overflow: auto;
}
.ta-cell {
  position: relative;
  width: var(--ta-cell);
  height: var(--ta-cell);
  border: 0;
  border-radius: 5px;
  background: #24305c;
  color: var(--text);
  font-weight: 800;
  font-size: clamp(0.58rem, 1.7vw, 0.78rem);
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  user-select: none;
  transition: background 0.1s, box-shadow 0.1s, transform 0.1s;
}
.ta-cell.wall {
  background: #111827;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.ta-cell.crate {
  background: #6b573a;
  color: #f7d9a0;
}
.ta-cell.item {
  background: #1f4f64;
  color: #bff7ff;
  box-shadow: inset 0 0 0 2px rgba(139, 230, 240, 0.35);
}
.ta-cell.mine {
  background: #5c2748;
  color: #ffd166;
  box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.5);
}
.ta-cell.tank {
  color: white;
  font-size: clamp(0.58rem, 1.8vw, 0.78rem);
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.22);
}
.ta-cell.tank.p1 { background: linear-gradient(145deg, #ff7d8f, #c92745); }
.ta-cell.tank.p2 { background: linear-gradient(145deg, #6addeb, #168aa0); }
.ta-cell.active-tank {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.ta-cell.hl-move,
.ta-cell.hl-aim,
.ta-cell.hl-danger,
.ta-cell.hl-mine {
  cursor: pointer;
}
.ta-cell.hl-move {
  background: #2f5d57;
  box-shadow: inset 0 0 0 2px rgba(110, 231, 183, 0.45);
}
.ta-cell.hl-aim {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}
.ta-cell.hl-danger {
  background: #67364a;
  box-shadow: inset 0 0 0 2px rgba(255, 93, 115, 0.5);
}
.ta-cell.hl-mine {
  background: #604325;
  box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.48);
}
.ta-cell.hl-move:hover,
.ta-cell.hl-aim:hover,
.ta-cell.hl-danger:hover,
.ta-cell.hl-mine:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}
@media (max-width: 760px) {
  .ta-hud {
    grid-template-columns: 1fr;
  }
  .ta-mid { order: -1; }
}

/* Tank Arena visual pass */
.ta-root {
  padding: 8px 0 18px;
}
.ta-hud {
  grid-template-columns: minmax(190px, 1fr) minmax(260px, 1.35fr) minmax(190px, 1fr);
}
.ta-player {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  min-height: 74px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
    var(--panel);
}
.ta-player span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
}
.ta-player em {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  color: var(--muted);
  font-style: normal;
  font-size: 0.76rem;
}
.ta-mini-tank,
.ta-legend-tank {
  display: inline-block;
  width: 22px;
  height: 15px;
  border-radius: 4px;
  background: var(--tank-main);
  box-shadow:
    inset 0 -4px 0 var(--tank-dark),
    0 0 0 2px rgba(0, 0, 0, 0.18);
}
.ta-player span .ta-mini-tank {
  position: static;
  inset: auto;
  flex: 0 0 auto;
}
.ta-mini-tank.p1,
.ta-legend-tank.p1 { --tank-main: #e94e66; --tank-dark: #7e1d30; }
.ta-mini-tank.p2,
.ta-legend-tank.p2 { --tank-main: #37b8cf; --tank-dark: #116b80; }
.ta-mid {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.16), transparent 60%),
    var(--panel);
}
.ta-ap-pips {
  display: flex;
  justify-content: center;
  gap: 5px;
  min-height: 9px;
}
.ta-ap-pips i {
  width: 20px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
.ta-ap-pips i.on {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.45);
}
.ta-actions {
  align-items: stretch;
}
.ta-action-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-width: 126px;
  text-align: left;
  padding: 8px 10px;
}
.ta-action-card > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ta-action-card b {
  font-size: 0.86rem;
  line-height: 1.05;
}
.ta-action-card small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.05;
}
.ta-action-card:hover small,
.ta-action-card.active small {
  color: rgba(10, 12, 24, 0.72);
}
.ta-action-icon {
  min-width: 38px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.ta-action-card.active .ta-action-icon,
.ta-action-card:hover .ta-action-icon {
  background: rgba(10, 12, 24, 0.2);
  color: #161a36;
}
.ta-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  width: min(900px, 96vw);
  color: var(--muted);
  font-size: 0.78rem;
}
.ta-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
}
.ta-legend i {
  flex: 0 0 auto;
}
.ta-legend-wall,
.ta-legend-crate,
.ta-legend-item,
.ta-legend-mine {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.ta-legend-wall {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 3px, transparent 3px 7px),
    #2e3442;
}
.ta-legend-crate {
  background:
    linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.28) 46% 54%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(0,0,0,0.28) 46% 54%, transparent 55%),
    #8b6235;
}
.ta-legend-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1f6f69;
  color: #dffcff;
  font-style: normal;
  font-weight: 900;
}
.ta-legend-mine {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffe6a1, #9b355a 34%, #301724 70%);
}
.ta-board {
  --ta-cell: clamp(34px, 6.3vw, 52px);
  gap: 4px;
  padding: 10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    #11172f;
  background-size: 24px 24px;
}
.ta-cell {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.06), transparent 45%),
    linear-gradient(135deg, #263461, #1a2447);
  border: 1px solid rgba(255, 255, 255, 0.045);
}
.ta-cell::after {
  content: attr(data-coord);
  position: absolute;
  right: 3px;
  bottom: 2px;
  color: rgba(255,255,255,0.17);
  font-size: 0.48rem;
  font-weight: 800;
  pointer-events: none;
}
.ta-cell.wall,
.ta-cell.crate,
.ta-cell.item,
.ta-cell.mine,
.ta-cell.tank {
  color: transparent;
}
.ta-cell.wall {
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.13), transparent 24%),
    linear-gradient(145deg, #4b5261, #242936);
}
.ta-wall-asset,
.ta-crate-asset,
.ta-obstacle {
  position: relative;
  display: block;
  width: 78%;
  height: 78%;
}
.ta-wall-asset {
  border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(0,0,0,0.18) 8px 10px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 13px),
    linear-gradient(145deg, #707784, #343a46);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -5px 0 rgba(0,0,0,0.28),
    0 2px 5px rgba(0,0,0,0.28);
}
.ta-wall-asset::before,
.ta-wall-asset::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  background: rgba(0,0,0,0.22);
}
.ta-wall-asset::before { top: 34%; }
.ta-wall-asset::after { top: 65%; }
.ta-cell.crate {
  background: linear-gradient(145deg, #53361f, #2b1b12);
}
.ta-crate-asset {
  border-radius: 5px;
  background:
    linear-gradient(45deg, transparent 42%, rgba(255,255,255,0.24) 43% 52%, transparent 53%),
    linear-gradient(-45deg, transparent 42%, rgba(0,0,0,0.32) 43% 52%, transparent 53%),
    linear-gradient(90deg, rgba(255,255,255,0.16) 0 8px, transparent 8px calc(100% - 8px), rgba(0,0,0,0.24) calc(100% - 8px)),
    linear-gradient(#9b6a35, #6c4425);
  box-shadow:
    inset 0 0 0 2px rgba(58, 34, 18, 0.75),
    0 2px 5px rgba(0,0,0,0.28);
}
.ta-cell.item {
  background: radial-gradient(circle at 50% 45%, rgba(139,230,240,0.25), #17324a 70%);
}
.ta-cell.item-repair { --item-color: #6ee7b7; }
.ta-cell.item-armor { --item-color: #8be6f0; }
.ta-cell.item-rocket { --item-color: #ff8c9c; }
.ta-cell.item-mine { --item-color: #ffd166; }
.ta-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: var(--item-color);
  color: #11172f;
  font-size: clamp(0.72rem, 2vw, 1rem);
  font-weight: 900;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.18),
    0 0 14px color-mix(in srgb, var(--item-color), transparent 52%);
}
.ta-cell.mine {
  background: radial-gradient(circle at 50% 45%, #5a253f, #20101b 80%);
}
.ta-mine-asset {
  position: relative;
  width: 54%;
  height: 54%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffe8a4, #a73d60 28%, #2c1321 72%);
  box-shadow: 0 0 0 3px rgba(255,209,102,0.2), 0 3px 5px rgba(0,0,0,0.35);
}
.ta-mine-asset::before,
.ta-mine-asset::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 4px;
  background: #2c1321;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.ta-mine-asset::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.ta-cell.tank {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), transparent 48%),
    linear-gradient(135deg, #29365f, #182245);
}
.ta-cell.tank.p1 {
  --tank-main: #e94e66;
  --tank-mid: #b82e47;
  --tank-dark: #681928;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 93, 115, 0.13), transparent 55%),
    linear-gradient(135deg, #2c355b, #182144);
}
.ta-cell.tank.p2 {
  --tank-main: #37b8cf;
  --tank-mid: #188ba2;
  --tank-dark: #0d4c5d;
  background:
    radial-gradient(circle at 50% 50%, rgba(77, 208, 225, 0.13), transparent 55%),
    linear-gradient(135deg, #2c355b, #182144);
}
.ta-tank-asset {
  position: relative;
  width: 78%;
  height: 72%;
  display: block;
  transform-origin: 50% 50%;
}
.ta-cell.face-n .ta-tank-asset { transform: rotate(0deg); }
.ta-cell.face-e .ta-tank-asset { transform: rotate(90deg); }
.ta-cell.face-s .ta-tank-asset { transform: rotate(180deg); }
.ta-cell.face-w .ta-tank-asset { transform: rotate(270deg); }
.ta-track,
.ta-hull,
.ta-turret,
.ta-gun,
.ta-player-tag {
  position: absolute;
  display: block;
}
.ta-track {
  top: 24%;
  bottom: 13%;
  width: 22%;
  border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 5px),
    var(--tank-dark);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.28);
}
.ta-track.left { left: 5%; }
.ta-track.right { right: 5%; }
.ta-hull {
  left: 20%;
  right: 20%;
  top: 24%;
  bottom: 13%;
  border-radius: 7px 7px 5px 5px;
  background: linear-gradient(145deg, var(--tank-main), var(--tank-mid));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.2),
    inset 0 -5px 0 rgba(0,0,0,0.24);
}
.ta-turret {
  left: 34%;
  right: 34%;
  top: 12%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.28), var(--tank-main) 42%, var(--tank-dark));
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.ta-gun {
  left: calc(50% - 4px);
  top: -8%;
  width: 8px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tank-dark), var(--tank-main), var(--tank-dark));
  box-shadow: 0 -2px 0 rgba(0,0,0,0.22);
}
.ta-player-tag {
  left: 50%;
  top: 57%;
  width: 16px;
  height: 12px;
  margin-left: -8px;
  color: rgba(255,255,255,0.86);
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 12px;
  text-align: center;
}
.ta-cell.face-e .ta-player-tag,
.ta-cell.face-s .ta-player-tag,
.ta-cell.face-w .ta-player-tag {
  display: none;
}
.ta-cell.active-tank {
  outline: 0;
  box-shadow:
    inset 0 0 0 2px var(--accent),
    0 0 16px rgba(255, 209, 102, 0.45);
}
.ta-cell.hl-move::before,
.ta-cell.hl-aim::before,
.ta-cell.hl-danger::before,
.ta-cell.hl-mine::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  border: 2px solid currentColor;
  pointer-events: none;
  z-index: 3;
}
.ta-cell.hl-move { color: #6ee7b7; }
.ta-cell.hl-aim { color: #e9ecff; }
.ta-cell.hl-danger { color: #ff5d73; }
.ta-cell.hl-mine { color: #ffd166; }
.ta-cell.hl-danger::before {
  background: rgba(255,93,115,0.12);
}
.ta-cell.hl-mine::before {
  background: rgba(255,209,102,0.1);
}
@media (max-width: 760px) {
  .ta-hud {
    grid-template-columns: 1fr;
  }
  .ta-board {
    --ta-cell: clamp(30px, 8vw, 44px);
  }
  .ta-action-card {
    min-width: 112px;
  }
}

/* Tank Arena: hiệu ứng nổ, rung màn, tia đạn */
.ta-boom {
  position: absolute;
  left: 50%; top: 50%;
  width: 70%; height: 70%;
  transform: translate(-50%, -50%) scale(0.2);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd166 32%, #ff7a2f 55%, rgba(255,93,40,0) 72%);
  pointer-events: none;
  z-index: 6;
  animation: ta-boom-anim 0.55s ease-out forwards;
}
.ta-boom.big {
  width: 150%; height: 150%;
  background: radial-gradient(circle, #fff 0%, #ffe08a 28%, #ff7a2f 52%, #ff3b30 66%, rgba(255,59,48,0) 78%);
  animation-duration: 0.62s;
}
@keyframes ta-boom-anim {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  55% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}
.ta-shake { animation: ta-shake-anim 0.3s ease; }
@keyframes ta-shake-anim {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 2px); }
}
.ta-beam {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  animation: ta-beam-anim 0.36s ease-out forwards;
}
.ta-beam.p1 { background: radial-gradient(circle, rgba(255,140,156,0.95), rgba(255,93,115,0)); box-shadow: 0 0 10px 3px rgba(255,93,115,0.7); }
.ta-beam.p2 { background: radial-gradient(circle, rgba(139,230,240,0.95), rgba(77,208,225,0)); box-shadow: 0 0 10px 3px rgba(77,208,225,0.7); }
@keyframes ta-beam-anim {
  0% { opacity: 0; transform: scale(0.4); }
  40% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

/* ---------- Dice Battle ---------- */
.db-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0 18px;
}
.db-hud {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.35fr) minmax(180px, 1fr);
  gap: 10px;
  width: min(900px, 96vw);
}
.db-player,
.db-turn {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    var(--panel);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.db-player {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px;
  min-height: 74px;
}
.db-player span {
  font-weight: 800;
}
.db-player b {
  color: var(--text);
}
.db-player em {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px;
  color: var(--muted);
  font-style: normal;
  min-height: 20px;
}
.db-player > i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: var(--good);
}
.db-player.p1 > i { background: var(--p1); }
.db-player.p2 > i { background: var(--p2); }
.db-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12), var(--shadow);
}
.db-mini-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
}
.db-turn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.16), transparent 62%),
    var(--panel);
}
.db-turn b {
  color: var(--accent);
  font-size: 1rem;
}
.db-turn span {
  color: var(--text);
  font-size: 0.88rem;
}
.db-turn small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}
.db-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.db-focus {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  min-width: 190px;
  text-align: left;
}
.db-focus span {
  min-width: 48px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 900;
}
.db-focus b,
.db-focus small {
  display: block;
}
.db-focus small {
  color: var(--muted);
  font-size: 0.72rem;
}
.db-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  width: min(900px, 96vw);
  color: var(--muted);
  font-size: 0.78rem;
}
.db-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.db-leg-die,
.db-leg-rock,
.db-leg-power,
.db-leg-move,
.db-leg-attack {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.db-leg-die.p1 { background: linear-gradient(145deg, #ff8293, #c92f49); }
.db-leg-die.p2 { background: linear-gradient(145deg, #7de7f1, #15899e); }
.db-leg-rock {
  background: radial-gradient(circle at 30% 30%, #8f98a9, #373e4e 70%);
}
.db-leg-power {
  border-radius: 50%;
  background: radial-gradient(circle, #fff5b7, #ffd166 45%, #6b4a17 72%);
}
.db-leg-move {
  background: rgba(110, 231, 183, 0.45);
  box-shadow: inset 0 0 0 2px #6ee7b7;
}
.db-leg-attack {
  background: rgba(255, 93, 115, 0.45);
  box-shadow: inset 0 0 0 2px #ff5d73;
}
.db-board {
  --db-cell: clamp(46px, 8vw, 66px);
  display: grid;
  grid-template-columns: repeat(var(--db-n), var(--db-cell));
  grid-template-rows: repeat(var(--db-n), var(--db-cell));
  gap: 5px;
  max-width: 96vw;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    #11172f;
  background-size: 22px 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
}
.db-cell {
  position: relative;
  width: var(--db-cell);
  height: var(--db-cell);
  border: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.06), transparent 46%),
    linear-gradient(135deg, #263461, #1a2447);
  color: var(--text);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  overflow: hidden;
  transition: transform 0.1s, filter 0.1s, box-shadow 0.1s;
}
.db-cell::after {
  content: attr(data-coord);
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: rgba(255,255,255,0.16);
  font-size: 0.48rem;
  font-weight: 900;
  pointer-events: none;
}
.db-cell.block {
  background: linear-gradient(145deg, #4b5261, #242936);
}
.db-rock {
  width: 72%;
  height: 66%;
  border-radius: 43% 57% 48% 52%;
  background:
    radial-gradient(circle at 28% 25%, rgba(255,255,255,0.28), transparent 24%),
    radial-gradient(circle at 68% 70%, rgba(0,0,0,0.28), transparent 34%),
    linear-gradient(145deg, #8b95a6, #3b4250);
  box-shadow: inset 0 -8px 0 rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.28);
}
.db-cell.power {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,209,102,0.28), transparent 56%),
    linear-gradient(135deg, #263461, #1a2447);
}
.db-power {
  width: 54%;
  height: 54%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b1d05;
  background: radial-gradient(circle, #fff6bf, #ffd166 52%, #b9791f 78%);
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 0 16px rgba(255,209,102,0.42), inset 0 -5px 0 rgba(0,0,0,0.16);
}
.db-cell.unit {
  cursor: pointer;
}
.db-cell.selected {
  box-shadow: inset 0 0 0 3px var(--accent), 0 0 18px rgba(255,209,102,0.38);
}
.db-cell.can-move,
.db-cell.can-attack {
  cursor: pointer;
}
.db-cell.can-move::before,
.db-cell.can-attack::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
}
.db-cell.can-move::before {
  border: 2px solid #6ee7b7;
  background: rgba(110,231,183,0.16);
}
.db-cell.can-attack::before {
  border: 2px solid #ff5d73;
  background: rgba(255,93,115,0.18);
}
.db-cell.can-move:hover,
.db-cell.can-attack:hover,
.db-cell.unit:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.db-die {
  position: relative;
  width: 68%;
  height: 68%;
  border-radius: 12px;
  display: block;
  background: var(--die-bg);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.25),
    inset 0 -7px 0 rgba(0,0,0,0.22),
    0 4px 9px rgba(0,0,0,0.28);
}
.db-cell.p1 .db-die {
  --die-bg: linear-gradient(145deg, #ff8c9c, #c82c47);
}
.db-cell.p2 .db-die {
  --die-bg: linear-gradient(145deg, #8be6f0, #158ea3);
}
.db-die b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 14px;
  margin: -7px 0 0 -8px;
  color: rgba(255,255,255,0.28);
  font-size: 0.56rem;
  line-height: 14px;
  text-align: center;
  font-weight: 900;
}
.db-pip {
  position: absolute;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
}
.db-pip.tl { left: 20%; top: 20%; }
.db-pip.tr { right: 20%; top: 20%; }
.db-pip.c { left: 42.5%; top: 42.5%; }
.db-pip.ml { left: 20%; top: 42.5%; }
.db-pip.mr { right: 20%; top: 42.5%; }
.db-pip.bl { left: 20%; bottom: 20%; }
.db-pip.br { right: 20%; bottom: 20%; }
.db-hp {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 7px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  overflow: hidden;
}
.db-hp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--good);
}
.db-cell.p1 .db-hp i { background: var(--p1); }
.db-cell.p2 .db-hp i { background: var(--p2); }
.db-die.rolling { animation: db-roll 0.42s cubic-bezier(0.3, 0.1, 0.4, 1.4); }
@keyframes db-roll {
  0% { transform: rotate(-180deg) scale(0.7); }
  50% { transform: rotate(-40deg) scale(1.12); }
  75% { transform: rotate(12deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}
.db-float {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 7;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  animation: db-float-anim 0.85s ease-out forwards;
}
.db-float.dmg { color: #ff6b81; }
.db-float.heal { color: #6ee7b7; }
@keyframes db-float-anim {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -4px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -24px) scale(1); }
}
.db-cell.db-hit { animation: db-hit-anim 0.32s ease; }
@keyframes db-hit-anim {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.8) saturate(1.4); transform: scale(0.94); }
}
.db-float.crit {
  color: #ffd166;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255, 209, 102, 0.9), 0 1px 2px rgba(0,0,0,0.6);
  font-size: 1.05em;
}
@media (max-width: 760px) {
  .db-hud {
    grid-template-columns: 1fr;
  }
  .db-turn { order: -1; }
  .db-board {
    --db-cell: clamp(40px, 10vw, 56px);
  }
}

/* ---------- Territory War ---------- */
.tw-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0 18px;
}
.tw-hud {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.35fr) minmax(180px, 1fr);
  gap: 10px;
  width: min(940px, 96vw);
}
.tw-player,
.tw-mid {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    var(--panel);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.tw-player {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px;
  min-height: 74px;
}
.tw-player span {
  font-weight: 800;
}
.tw-player b {
  color: var(--text);
}
.tw-player em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-style: normal;
  font-size: 0.78rem;
}
.tw-player > i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
}
.tw-player.p1 > i { background: var(--p1); }
.tw-player.p2 > i { background: var(--p2); }
.tw-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12), var(--shadow);
}
.tw-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 4px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.16), transparent 62%),
    var(--panel);
}
.tw-mid b {
  color: var(--accent);
  font-size: 1rem;
}
.tw-mid span {
  color: var(--text);
  font-size: 0.88rem;
}
.tw-mid small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}
.tw-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tw-action {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 8px;
  min-width: 156px;
  text-align: left;
  padding: 8px 10px;
}
.tw-action span {
  grid-row: 1 / 3;
  min-width: 46px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 900;
}
.tw-action b {
  font-size: 0.86rem;
  line-height: 1.05;
}
.tw-action small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.05;
}
.tw-action.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.16);
}
.tw-action:hover small,
.tw-action.active small {
  color: rgba(10, 12, 24, 0.72);
}
.tw-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  width: min(940px, 96vw);
  color: var(--muted);
  font-size: 0.78rem;
}
.tw-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tw-leg {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.tw-leg.p1 { background: linear-gradient(145deg, rgba(255,93,115,0.78), rgba(137,31,53,0.78)); }
.tw-leg.p2 { background: linear-gradient(145deg, rgba(77,208,225,0.78), rgba(18,102,123,0.78)); }
.tw-leg.neutral { background: linear-gradient(145deg, #34426f, #202b51); }
.tw-leg.mountain {
  background: radial-gradient(circle at 30% 25%, #9fa8b9, #3c4555 68%);
}
.tw-leg.supply {
  border-radius: 50%;
  background: radial-gradient(circle, #fff6bf, #ffd166 50%, #98671d 76%);
}
.tw-leg.wall {
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(0,0,0,0.25) 6px 8px),
    #6f7786;
}
.tw-board {
  --tw-cell: clamp(34px, 6.1vw, 52px);
  display: grid;
  grid-template-columns: repeat(var(--tw-n), var(--tw-cell));
  grid-template-rows: repeat(var(--tw-n), var(--tw-cell));
  gap: 4px;
  max-width: 96vw;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    #10162d;
  background-size: 22px 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
}
.tw-cell {
  position: relative;
  width: var(--tw-cell);
  height: var(--tw-cell);
  border: 0;
  border-radius: 7px;
  padding: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06), transparent 48%),
    linear-gradient(135deg, #2d3a68, #1a2447);
  color: var(--text);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: transform 0.1s, filter 0.1s, box-shadow 0.1s;
}
.tw-cell::after {
  content: attr(data-coord);
  position: absolute;
  right: 3px;
  bottom: 2px;
  color: rgba(255,255,255,0.17);
  font-size: 0.46rem;
  font-weight: 900;
  pointer-events: none;
}
.tw-cell.neutral {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.05), transparent 46%),
    linear-gradient(135deg, #2a3865, #1a2447);
}
.tw-cell.p1 {
  background:
    radial-gradient(circle at 45% 36%, rgba(255,255,255,0.12), transparent 38%),
    linear-gradient(145deg, rgba(255,93,115,0.75), rgba(81,26,48,0.95));
}
.tw-cell.p2 {
  background:
    radial-gradient(circle at 45% 36%, rgba(255,255,255,0.12), transparent 38%),
    linear-gradient(145deg, rgba(77,208,225,0.75), rgba(20,69,92,0.95));
}
.tw-cell.mountain {
  background: linear-gradient(145deg, #444d5d, #242b37);
}
.tw-mountain {
  width: 76%;
  height: 66%;
  border-radius: 44% 56% 48% 52%;
  background:
    radial-gradient(circle at 28% 25%, rgba(255,255,255,0.28), transparent 24%),
    radial-gradient(circle at 68% 70%, rgba(0,0,0,0.28), transparent 34%),
    linear-gradient(145deg, #8f98a9, #3c4555);
  box-shadow: inset 0 -8px 0 rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.28);
}
.tw-cell.supply {
  box-shadow: inset 0 0 0 2px rgba(255,209,102,0.32);
}
.tw-supply {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #fff6bf, #ffd166 52%, #b9791f 78%);
  color: #2b1d05;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(255,209,102,0.36), inset 0 -4px 0 rgba(0,0,0,0.16);
}
.tw-cell.base {
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px rgba(255,209,102,0.18);
}
.tw-base {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58%;
  height: 42%;
  border-radius: 5px;
  background: rgba(10,12,24,0.55);
  color: #fff4bf;
  font-size: 0.62rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.tw-wallbar {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 6px;
  z-index: 3;
  color: #e9ecff;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tw-cell.walled::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 5px;
  border: 2px solid rgba(233,236,255,0.34);
  pointer-events: none;
}
.tw-cell.wall-2::before {
  border-color: rgba(255,209,102,0.55);
  box-shadow: inset 0 0 0 2px rgba(255,209,102,0.14);
}
.tw-cell.legal {
  cursor: pointer;
}
.tw-cell.legal::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 4;
  border-radius: 6px;
  pointer-events: none;
}
.tw-cell.legal-claim::before {
  border: 2px solid #6ee7b7;
  background: rgba(110,231,183,0.14);
}
.tw-cell.legal-wall::before {
  border: 2px solid #ffd166;
  background: rgba(255,209,102,0.12);
}
.tw-cell.legal-attack::before {
  border: 2px solid #ff5d73;
  background: rgba(255,93,115,0.16);
}
.tw-cell.legal:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}
.tw-cell.tw-last { box-shadow: inset 0 0 0 3px var(--accent); }
.tw-cell.tw-flash { animation: tw-flash-anim 0.34s ease; }
@keyframes tw-flash-anim {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.7) saturate(1.3); }
}
.tw-float {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 0.78rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  animation: tw-float-anim 0.95s ease-out forwards;
}
.tw-float.win { color: #6ee7b7; }
.tw-float.lose { color: #ff6b81; }
.tw-float.wall { color: #ffd166; }
@keyframes tw-float-anim {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -3px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -22px) scale(1); }
}
.tw-ap {
  font-weight: 800;
  color: var(--accent);
}
.tw-end span { background: linear-gradient(145deg, #5a6072, #3a4050); }
@media (max-width: 760px) {
  .tw-hud {
    grid-template-columns: 1fr;
  }
  .tw-mid { order: -1; }
  .tw-board {
    --tw-cell: clamp(30px, 8vw, 44px);
  }
  .tw-action {
    min-width: 132px;
  }
}

/* ---------- Crystal Conquest ---------- */
.cc-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0 18px;
}
.cc-hud {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(280px, 1.35fr) minmax(190px, 1fr);
  gap: 10px;
  width: min(940px, 96vw);
}
.cc-player,
.cc-mid {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 230, 240, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    var(--panel);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.cc-player {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px;
  min-height: 78px;
}
.cc-player span {
  font-weight: 800;
}
.cc-player b {
  color: var(--text);
}
.cc-player em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-style: normal;
  font-size: 0.76rem;
}
.cc-player > i {
  position: absolute;
  left: 0;
  height: 4px;
}
.cc-player > i.hp {
  bottom: 0;
}
.cc-player > i.mana {
  bottom: 5px;
  background: #8be6f0;
}
.cc-player.p1 > i.hp { background: var(--p1); }
.cc-player.p2 > i.hp { background: var(--p2); }
.cc-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.12), var(--shadow);
}
.cc-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 4px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.16), transparent 62%),
    var(--panel);
}
.cc-mid b {
  color: var(--accent);
  font-size: 1rem;
}
.cc-mid span {
  color: var(--text);
  font-size: 0.88rem;
}
.cc-mid small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cc-action {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 8px;
  min-width: 132px;
  text-align: left;
  padding: 8px 10px;
}
.cc-action span {
  grid-row: 1 / 3;
  min-width: 46px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 900;
}
.cc-action b {
  font-size: 0.86rem;
  line-height: 1.05;
}
.cc-action small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.05;
}
.cc-action.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.16);
}
.cc-action:hover small,
.cc-action.active small {
  color: rgba(10, 12, 24, 0.72);
}
.cc-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  width: min(940px, 96vw);
  color: var(--muted);
  font-size: 0.78rem;
}
.cc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cc-leg {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.cc-leg.mage.p1 { background: linear-gradient(145deg, #ff8c9c, #9d2540); }
.cc-leg.mage.p2 { background: linear-gradient(145deg, #8be6f0, #176f86); }
.cc-leg.crystal {
  transform: rotate(45deg);
  background: radial-gradient(circle, #fff8c9, #8be6f0 52%, #4d6fe0 78%);
}
.cc-leg.rock {
  background: radial-gradient(circle at 30% 25%, #929bad, #384152 70%);
}
.cc-leg.move {
  background: rgba(110,231,183,0.45);
  box-shadow: inset 0 0 0 2px #6ee7b7;
}
.cc-leg.target {
  background: rgba(255,93,115,0.45);
  box-shadow: inset 0 0 0 2px #ff5d73;
}
.cc-board {
  --cc-cell: clamp(42px, 7.6vw, 62px);
  display: grid;
  grid-template-columns: repeat(var(--cc-n), var(--cc-cell));
  grid-template-rows: repeat(var(--cc-n), var(--cc-cell));
  gap: 5px;
  max-width: 96vw;
  overflow: auto;
  padding: 10px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(139,230,240,0.08), transparent 50%),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    #0f142c;
  background-size: auto, 22px 22px, 22px 22px, auto;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
}
.cc-cell {
  position: relative;
  width: var(--cc-cell);
  height: var(--cc-cell);
  border: 0;
  border-radius: 9px;
  padding: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.06), transparent 46%),
    linear-gradient(135deg, #263461, #1a2447);
  color: var(--text);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: transform 0.1s, filter 0.1s, box-shadow 0.1s;
}
.cc-cell::after {
  content: attr(data-coord);
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: rgba(255,255,255,0.16);
  font-size: 0.48rem;
  font-weight: 900;
  pointer-events: none;
}
.cc-cell.base {
  box-shadow: inset 0 0 0 2px rgba(255,209,102,0.35);
}
.cc-cell.base-p1 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,93,115,0.2), transparent 58%),
    linear-gradient(135deg, #263461, #1a2447);
}
.cc-cell.base-p2 {
  background:
    radial-gradient(circle at 50% 50%, rgba(77,208,225,0.2), transparent 58%),
    linear-gradient(135deg, #263461, #1a2447);
}
.cc-cell.rock {
  background: linear-gradient(145deg, #444d5d, #242b37);
}
.cc-rock {
  width: 72%;
  height: 66%;
  border-radius: 43% 57% 48% 52%;
  background:
    radial-gradient(circle at 28% 25%, rgba(255,255,255,0.28), transparent 24%),
    radial-gradient(circle at 68% 70%, rgba(0,0,0,0.28), transparent 34%),
    linear-gradient(145deg, #8f98a9, #3c4555);
  box-shadow: inset 0 -8px 0 rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.28);
}
.cc-cell.crystal {
  background:
    radial-gradient(circle at 50% 50%, rgba(139,230,240,0.12), transparent 62%),
    linear-gradient(135deg, #263461, #1a2447);
}
.cc-cell.crystal.p1 {
  box-shadow: inset 0 0 0 2px rgba(255,93,115,0.48);
}
.cc-cell.crystal.p2 {
  box-shadow: inset 0 0 0 2px rgba(77,208,225,0.48);
}
.cc-crystal {
  position: absolute;
  width: 46%;
  height: 46%;
  border-radius: 8px 8px 14px 14px;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  font-size: 0.72rem;
  background: radial-gradient(circle at 35% 28%, #fff8c9, #8be6f0 45%, #4d6fe0 78%);
  box-shadow: 0 0 18px rgba(139,230,240,0.45), inset 0 -5px 0 rgba(0,0,0,0.16);
}
.cc-cell.crystal.p1 .cc-crystal {
  background: radial-gradient(circle at 35% 28%, #ffe3e8, #ff8c9c 45%, #9d2540 78%);
  box-shadow: 0 0 18px rgba(255,93,115,0.45), inset 0 -5px 0 rgba(0,0,0,0.16);
}
.cc-cell.crystal.p2 .cc-crystal {
  background: radial-gradient(circle at 35% 28%, #e2fbff, #8be6f0 45%, #176f86 78%);
  box-shadow: 0 0 18px rgba(77,208,225,0.45), inset 0 -5px 0 rgba(0,0,0,0.16);
}
.cc-mage {
  position: relative;
  z-index: 3;
  width: 76%;
  height: 78%;
  display: block;
}
.cc-aura,
.cc-robe,
.cc-hood,
.cc-staff,
.cc-orb,
.cc-tag {
  position: absolute;
  display: block;
}
.cc-aura {
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mage-glow), transparent 66%);
  opacity: 0.55;
}
.cc-robe {
  left: 25%;
  right: 25%;
  bottom: 8%;
  height: 54%;
  border-radius: 45% 45% 18% 18%;
  background: linear-gradient(145deg, var(--mage-main), var(--mage-dark));
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -6px 0 rgba(0,0,0,0.24);
}
.cc-hood {
  left: 31%;
  right: 31%;
  top: 10%;
  height: 35%;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.25), var(--mage-main) 45%, var(--mage-dark));
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.cc-staff {
  right: 14%;
  top: 13%;
  width: 5px;
  height: 70%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5f4227, #d6a85d, #5f4227);
  transform: rotate(9deg);
}
.cc-orb {
  right: 7%;
  top: 3%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, var(--orb), #3b2371);
  box-shadow: 0 0 14px var(--orb);
}
.cc-tag {
  left: 50%;
  bottom: 17%;
  width: 16px;
  height: 12px;
  margin-left: -8px;
  color: rgba(255,255,255,0.78);
  font-size: 0.52rem;
  line-height: 12px;
  font-weight: 900;
  text-align: center;
}
.cc-cell.wizard.p1 {
  --mage-main: #e94e66;
  --mage-dark: #681928;
  --mage-glow: rgba(255,93,115,0.45);
  --orb: #ffd166;
}
.cc-cell.wizard.p2 {
  --mage-main: #37b8cf;
  --mage-dark: #0d4c5d;
  --mage-glow: rgba(77,208,225,0.45);
  --orb: #c7f9ff;
}
.cc-hp {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 7px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  overflow: hidden;
  z-index: 4;
}
.cc-hp i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.cc-cell.p1 .cc-hp i { background: var(--p1); }
.cc-cell.p2 .cc-hp i { background: var(--p2); }
.cc-cell.active-wizard {
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 18px rgba(255,209,102,0.38);
}
.cc-cell.legal-move,
.cc-cell.legal-teleport,
.cc-cell.legal-lightning,
.cc-cell.legal-freeze {
  cursor: pointer;
}
.cc-cell.legal-move::before,
.cc-cell.legal-teleport::before,
.cc-cell.legal-lightning::before,
.cc-cell.legal-freeze::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 7px;
  pointer-events: none;
  z-index: 5;
}
.cc-cell.legal-move::before {
  border: 2px solid #6ee7b7;
  background: rgba(110,231,183,0.14);
}
.cc-cell.legal-teleport::before {
  border: 2px solid #c9a8ff;
  background: rgba(201,168,255,0.16);
}
.cc-cell.legal-lightning::before {
  border: 2px solid #ffd166;
  background: rgba(255,209,102,0.16);
}
.cc-cell.legal-freeze::before {
  border: 2px solid #8be6f0;
  background: rgba(139,230,240,0.16);
}
.cc-cell.legal-move:hover,
.cc-cell.legal-teleport:hover,
.cc-cell.legal-lightning:hover,
.cc-cell.legal-freeze:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}
.cc-cell.cc-last { box-shadow: inset 0 0 0 3px var(--accent); }
.cc-cell.cc-flash { animation: cc-flash-anim 0.36s ease; }
@keyframes cc-flash-anim {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.8) saturate(1.3); }
}
.cc-cell.cc-flash-bolt { box-shadow: inset 0 0 0 3px #ffd166, 0 0 16px rgba(255,209,102,0.7); }
.cc-cell.cc-flash-freeze { box-shadow: inset 0 0 0 3px #8be6f0, 0 0 16px rgba(139,230,240,0.7); }
.cc-cell.cc-flash-heal { box-shadow: inset 0 0 0 3px #6ee7b7, 0 0 16px rgba(110,231,183,0.7); }
.cc-float {
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 0.74rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  animation: cc-float-anim 0.95s ease-out forwards;
}
.cc-float.bolt { color: #ffd166; }
.cc-float.freeze { color: #8be6f0; }
.cc-float.shield { color: #c9e0ff; }
.cc-float.mana { color: #c9a8ff; }
.cc-float.heal { color: #6ee7b7; }
@keyframes cc-float-anim {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -3px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -24px) scale(1); }
}
@media (max-width: 760px) {
  .cc-hud {
    grid-template-columns: 1fr;
  }
  .cc-mid { order: -1; }
  .cc-board {
    --cc-cell: clamp(38px, 10vw, 54px);
  }
  .cc-action {
    min-width: 120px;
  }
}

/* ---------- Dungeon Rival ---------- */
.dr-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0 20px;
}
.dr-hud {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(280px, 1.2fr) minmax(210px, 1fr);
  gap: 10px;
  width: min(1060px, 96vw);
}
.dr-hero-panel,
.dr-mid,
.dr-board-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 209, 102, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    var(--panel);
  box-shadow: var(--shadow);
}
.dr-hero-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto auto;
  gap: 5px 10px;
  padding: 11px 12px;
  min-height: 116px;
}
.dr-hero-panel span {
  font-weight: 900;
}
.dr-hero-panel b {
  color: var(--accent);
}
.dr-hero-panel em,
.dr-hero-panel small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-style: normal;
  line-height: 1.24;
}
.dr-hero-panel em {
  font-size: 0.78rem;
}
.dr-hero-panel small {
  font-size: 0.76rem;
}
.dr-hero-panel.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.14), var(--shadow);
}
.dr-bar {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
}
.dr-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.dr-bar.hp i {
  background: linear-gradient(90deg, #ff5d73, #ffd166);
}
.dr-bar.xp {
  height: 5px;
}
.dr-bar.xp i {
  background: linear-gradient(90deg, #6ee7b7, #4dd0e1);
}
.dr-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 116px;
  padding: 12px 16px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(110,231,183,0.12), transparent 58%),
    radial-gradient(circle at 20% 80%, rgba(255,93,115,0.1), transparent 46%),
    var(--panel);
}
.dr-mid b {
  color: var(--accent);
  font-size: 1.02rem;
}
.dr-mid span {
  color: var(--text);
  font-size: 0.86rem;
}
.dr-mid small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.28;
}
.dr-race {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 2px 0;
}
.dr-race em {
  font-style: normal;
  font-weight: 900;
  font-size: 0.74rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.dr-race .p1 { color: #ff8a99; box-shadow: inset 0 0 0 1px rgba(255,108,127,0.4); }
.dr-race .p2 { color: #7fe2f0; box-shadow: inset 0 0 0 1px rgba(85,214,232,0.4); }
.dr-actions {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 10px;
  width: min(1060px, 96vw);
  align-items: start;
}
.dr-act-group {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  padding: 8px 9px 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
}
.dr-act-head {
  font-size: 0.74rem;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 7px;
  letter-spacing: 0.2px;
}
.dr-act-head i {
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
  font-size: 0.66rem;
}
.dr-act-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dr-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 8px;
  flex: 1 1 150px;
  min-width: 140px;
  text-align: left;
  padding: 7px 9px;
  overflow: hidden;
  white-space: normal;
}
.dr-action span {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.28);
  font-size: 1.1rem;
}
.dr-action.shop span { background: rgba(255,209,102,0.16); }
.dr-action.sab span { background: rgba(199,146,234,0.16); }
.dr-action.heal span { background: rgba(110,231,183,0.16); }
.dr-action b {
  font-size: 0.84rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.dr-action small {
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.dr-action:hover small {
  color: rgba(10, 12, 24, 0.72);
}
.dr-action:disabled {
  opacity: 0.45;
  transform: none;
}
.dr-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  width: min(1060px, 96vw);
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px;
  background: rgba(255,255,255,0.03);
}
.dr-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  color: var(--muted);
}
.dr-legend b {
  font-size: 1rem;
}
.dr-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 12px;
  width: min(1060px, 96vw);
  align-items: start;
}
.dr-board-wrap {
  padding: 12px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,209,102,0.12), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(77,208,225,0.1), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent),
    #121831;
}
.dr-board-wrap.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.13), var(--shadow);
}
.dr-board-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
}
.dr-board {
  --dr-cell: clamp(38px, 5.6vw, 58px);
  display: grid;
  grid-template-columns: repeat(var(--dr-n), var(--dr-cell));
  grid-template-rows: repeat(var(--dr-n), var(--dr-cell));
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  overflow: auto;
  padding: 10px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,209,102,0.08), transparent 58%),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    #090d1c;
  background-size: auto, 26px 26px, 26px 26px, auto;
}
.dr-cell {
  position: relative;
  width: var(--dr-cell);
  height: var(--dr-cell);
  border: 0;
  border-radius: 7px;
  padding: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.08), transparent 46%),
    linear-gradient(145deg, #243155, #121b36);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: transform 0.1s, filter 0.1s, box-shadow 0.1s;
}
.dr-cell.seen.empty,
.dr-cell.seen.start {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.07), transparent 45%),
    linear-gradient(145deg, #26345a, #151f3c);
}
.dr-cell.fog {
  background:
    radial-gradient(circle at 50% 50%, rgba(123, 132, 168, 0.18), transparent 46%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 7px, transparent 7px 14px),
    #080b18;
}
.dr-cell.treasure {
  box-shadow: inset 0 0 0 2px rgba(255,209,102,0.28);
}
.dr-cell.trap {
  box-shadow: inset 0 0 0 2px rgba(255,93,115,0.3);
}
.dr-cell.shrine {
  box-shadow: inset 0 0 0 2px rgba(110,231,183,0.28);
}
.dr-cell.boss {
  background:
    radial-gradient(circle at 50% 40%, rgba(255,93,115,0.24), transparent 54%),
    linear-gradient(145deg, #4a1d35, #1d1126);
  box-shadow: inset 0 0 0 2px rgba(255,93,115,0.32);
}
.dr-cell.portal {
  box-shadow: inset 0 0 0 2px rgba(123,162,255,0.4);
}
.dr-cell.monster { box-shadow: inset 0 0 0 1px rgba(255,93,115,0.22); }
.dr-cell.elite { box-shadow: inset 0 0 0 2px rgba(255,159,93,0.3); }
.dr-cell.legal {
  cursor: pointer;
}
.dr-cell.legal::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 6;
  border: 2px solid #6ee7b7;
  border-radius: 6px;
  background: rgba(110,231,183,0.13);
  pointer-events: none;
}
.dr-cell.legal:hover {
  transform: translateY(-1px);
  filter: brightness(1.14);
}
.dr-icon {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  line-height: 1;
}
.dr-icon.empty {
  color: rgba(255,255,255,0.18);
  font-size: 1rem;
}
.dr-icon.fog {
  color: rgba(180,190,220,0.5);
  font-size: clamp(0.95rem, 2.6vw, 1.25rem);
}
.dr-icon.boss {
  font-size: clamp(1.4rem, 3.8vw, 1.95rem);
  filter: drop-shadow(0 0 8px rgba(255,93,115,0.55));
}
.dr-icon.portal {
  animation: dr-spin 3.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(123,162,255,0.6));
}
@keyframes dr-spin {
  to { transform: rotate(360deg); }
}
.dr-cell small.loot {
  left: 4px;
  right: auto;
  background: rgba(0,0,0,0.55);
  font-size: 0.62rem;
}
.dr-cell small {
  position: absolute;
  right: 5px;
  bottom: 4px;
  z-index: 4;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.48);
  color: #fff3c5;
  font-size: 0.58rem;
  font-weight: 900;
}
.dr-adventurer {
  position: relative;
  z-index: 5;
  display: block;
  width: 76%;
  height: 82%;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,0.32));
}
.dr-adventurer::before,
.dr-adventurer::after,
.dr-adventurer i,
.dr-adventurer b {
  position: absolute;
  display: block;
}
.dr-adventurer::before {
  content: "";
  left: 26%;
  right: 26%;
  top: 8%;
  height: 34%;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,0.25), var(--hero-main) 48%, var(--hero-dark));
}
.dr-adventurer::after {
  content: "";
  left: 22%;
  right: 22%;
  bottom: 9%;
  height: 54%;
  border-radius: 45% 45% 18% 18%;
  background: linear-gradient(145deg, var(--hero-main), var(--hero-dark));
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.18), inset 0 -6px 0 rgba(0,0,0,0.22);
}
.dr-adventurer i {
  right: 9%;
  top: 18%;
  width: 5px;
  height: 58%;
  border-radius: 999px;
  transform: rotate(18deg);
  background: linear-gradient(90deg, #f7df9b, #8b5b2a);
  z-index: 2;
}
.dr-adventurer b {
  left: 50%;
  bottom: 19%;
  z-index: 3;
  width: 18px;
  height: 14px;
  margin-left: -9px;
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: 0.54rem;
  line-height: 14px;
}
.dr-adventurer.p1 {
  --hero-main: #ff6c7f;
  --hero-dark: #6d1d30;
}
.dr-adventurer.p2 {
  --hero-main: #55d6e8;
  --hero-dark: #11566b;
}
@media (max-width: 900px) {
  .dr-hud,
  .dr-boards {
    grid-template-columns: 1fr;
  }
  .dr-actions {
    grid-template-columns: 1fr;
  }
  .dr-mid {
    order: -1;
  }
  .dr-board {
    --dr-cell: clamp(34px, 10vw, 52px);
  }
}
@media (max-width: 520px) {
  .dr-root {
    gap: 10px;
  }
  .dr-hero-panel,
  .dr-mid,
  .dr-board-wrap {
    border-radius: 7px;
  }
  .dr-action {
    min-width: 0;
    flex: 1 1 46%;
    padding: 7px;
  }
  .dr-action span {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
  .dr-board-wrap {
    padding: 10px 6px;
  }
  .dr-board {
    --dr-cell: clamp(32px, 11.5vw, 46px);
    gap: 4px;
    padding: 7px;
  }
}

/* ---------- Time Loop Duel ---------- */
.tl-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0 20px;
}
.tl-hud {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(280px, 1.25fr) minmax(210px, 1fr);
  gap: 10px;
  width: min(1040px, 96vw);
}
.tl-player,
.tl-mid,
.tl-stage-wrap,
.tl-plan {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 209, 102, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    var(--panel);
  box-shadow: var(--shadow);
}
.tl-player {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 7px 10px;
  min-height: 92px;
  padding: 12px;
}
.tl-player span {
  font-weight: 900;
}
.tl-player b {
  color: var(--accent);
}
.tl-player small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}
.tl-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.14), var(--shadow);
}
.tl-hp {
  grid-column: 1 / -1;
  display: block;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,0.34);
}
.tl-hp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff5d73, #ffd166);
}
.tl-player.p2 .tl-hp i {
  background: linear-gradient(90deg, #4dd0e1, #6ee7b7);
}
.tl-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 92px;
  padding: 12px 16px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(77,208,225,0.14), transparent 58%),
    radial-gradient(circle at 20% 90%, rgba(255,93,115,0.1), transparent 48%),
    var(--panel);
}
.tl-mid b {
  color: var(--accent);
  font-size: 1.02rem;
}
.tl-mid span {
  color: var(--text);
  font-size: 0.86rem;
}
.tl-mid small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.28;
}
.tl-stage-wrap {
  width: min(1040px, 96vw);
  padding: 10px;
  background:
    radial-gradient(circle at 24% 12%, rgba(255,93,115,0.16), transparent 30%),
    radial-gradient(circle at 78% 14%, rgba(77,208,225,0.15), transparent 30%),
    #080c19;
}
.tl-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 520;
  border-radius: 7px;
}
.tl-planner {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 10px;
  width: min(1040px, 96vw);
}
.tl-plan {
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    #182041;
}
.tl-plan.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.13), var(--shadow);
}
.tl-plan.locked {
  opacity: 0.72;
}
.tl-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.tl-plan-head b {
  color: var(--text);
  font-size: 0.92rem;
}
.tl-plan-head span {
  color: var(--muted);
  font-size: 0.76rem;
}
.tl-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 6px;
}
.tl-slot {
  min-height: 54px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 7px;
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.tl-slot.filled {
  border-style: solid;
  border-color: rgba(255,209,102,0.36);
  background: rgba(255,209,102,0.09);
  color: var(--text);
  cursor: pointer;
}
.tl-slot span {
  font-size: 0.8rem;
  font-weight: 900;
}
.tl-slot small {
  font-size: 0.66rem;
  color: var(--muted);
  line-height: 1;
}
.tl-palette,
.tl-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(1040px, 96vw);
}
.tl-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
  min-width: 144px;
  max-width: 206px;
  padding: 8px 10px;
  text-align: left;
  white-space: normal;
  overflow: hidden;
}
.tl-action span {
  grid-row: 1 / 3;
  min-width: 40px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  font-size: 0.64rem;
  font-weight: 900;
}
.tl-action b {
  font-size: 0.84rem;
  line-height: 1.05;
}
.tl-action small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.tl-action:disabled,
.tl-controls .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
@media (max-width: 860px) {
  .tl-hud,
  .tl-planner {
    grid-template-columns: 1fr;
  }
  .tl-mid {
    order: -1;
  }
}
@media (max-width: 520px) {
  .tl-stage-wrap,
  .tl-plan {
    padding: 7px;
  }
  .tl-palette {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .tl-action {
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 8px;
  }
  .tl-action span {
    min-width: 34px;
    font-size: 0.58rem;
  }
  .tl-controls {
    display: grid;
    grid-template-columns: 1fr;
  }
  .tl-slots {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Hidden Assassin ---------- */
.ha-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 8px 0 20px;
}
.ha-hud {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(280px, 1.25fr) minmax(210px, 1fr);
  gap: 10px;
  width: min(1040px, 100%);
  max-width: 100%;
  min-width: 0;
}
.ha-panel,
.ha-mid,
.ha-stage-wrap,
.ha-notes,
.ha-log {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 209, 102, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    var(--panel);
  box-shadow: var(--shadow);
}
.ha-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 7px 10px;
  min-height: 88px;
  padding: 12px;
}
.ha-panel span {
  font-weight: 900;
}
.ha-panel b {
  color: var(--accent);
}
.ha-panel small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}
.ha-panel.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.14), var(--shadow);
}
.ha-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 88px;
  padding: 12px 16px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(77,208,225,0.14), transparent 58%),
    radial-gradient(circle at 20% 90%, rgba(255,93,115,0.1), transparent 48%),
    var(--panel);
}
.ha-mid b {
  color: var(--accent);
  font-size: 1.02rem;
}
.ha-mid span {
  color: var(--text);
  font-size: 0.86rem;
}
.ha-mid small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.28;
}
.ha-stage-wrap {
  width: min(1040px, 100%);
  max-width: 100%;
  min-width: 0;
  padding: 10px;
  background:
    radial-gradient(circle at 20% 14%, rgba(255,93,115,0.13), transparent 32%),
    radial-gradient(circle at 80% 16%, rgba(77,208,225,0.13), transparent 32%),
    #080c19;
}
.ha-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 900 / 560;
  border-radius: 7px;
}
.ha-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(1040px, 100%);
  max-width: 100%;
  min-width: 0;
}
.ha-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
  min-width: 160px;
  max-width: 224px;
  padding: 8px 10px;
  text-align: left;
  white-space: normal;
  overflow: hidden;
}
.ha-action span {
  grid-row: 1 / 3;
  min-width: 40px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 900;
}
.ha-action b {
  font-size: 0.86rem;
  line-height: 1.05;
}
.ha-action small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.ha-action.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.14);
}
.ha-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}
.ha-details {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr);
  gap: 10px;
  width: min(1040px, 100%);
  max-width: 100%;
  min-width: 0;
}
.ha-notes,
.ha-log {
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    #182041;
}
.ha-notes > b,
.ha-log > b {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.9rem;
}
.ha-notes > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 7px;
}
.ha-notes span,
.ha-log span {
  display: block;
  border-radius: 7px;
  background: rgba(255,255,255,0.055);
  padding: 7px 8px;
}
.ha-notes b {
  display: block;
  color: var(--text);
  font-size: 0.78rem;
}
.ha-notes small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
}
.ha-log > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ha-log span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.28;
}
@media (max-width: 860px) {
  .ha-hud,
  .ha-details {
    grid-template-columns: 1fr;
  }
  .ha-mid {
    order: -1;
  }
}
@media (max-width: 520px) {
  .ha-stage-wrap {
    padding: 7px;
  }
  .ha-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .ha-action {
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 8px;
  }
  .ha-action span {
    min-width: 32px;
    font-size: 1.1rem;
  }
}

/* ---------- Trap Mansion ---------- */
.tm-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0 20px;
}
.tm-hud {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.2fr) minmax(150px, 1fr);
  gap: 10px;
  width: min(620px, 96vw);
}
.tm-player,
.tm-mid,
.tm-stage-wrap,
.tm-notes,
.tm-log {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 209, 102, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    var(--panel);
  box-shadow: var(--shadow);
}
.tm-player {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 7px 10px;
  min-height: 96px;
  padding: 12px;
}
.tm-player span {
  font-weight: 900;
}
.tm-player b {
  color: var(--accent);
}
.tm-player small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}
.tm-player.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.14), var(--shadow);
}
.tm-hp {
  grid-column: 1 / -1;
  display: block;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,0.34);
}
.tm-hp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff5d73, #ffd166);
}
.tm-player.p2 .tm-hp i {
  background: linear-gradient(90deg, #4dd0e1, #6ee7b7);
}
.tm-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 96px;
  padding: 12px 16px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(77,208,225,0.14), transparent 58%),
    radial-gradient(circle at 20% 90%, rgba(255,93,115,0.1), transparent 48%),
    var(--panel);
}
.tm-mid b {
  color: var(--accent);
  font-size: 1.02rem;
}
.tm-mid span {
  color: var(--text);
  font-size: 0.86rem;
}
.tm-mid small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.28;
}
.tm-stage-wrap {
  width: fit-content;
  max-width: 96vw;
  margin: 0 auto;
  padding: 8px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,93,115,0.13), transparent 32%),
    radial-gradient(circle at 82% 14%, rgba(77,208,225,0.13), transparent 32%),
    #080c19;
}
.tm-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 7px;
}
.tm-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  width: min(620px, 96vw);
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
    #141a36;
}
.tm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--muted);
}
.tm-legend b {
  font-size: 1rem;
  line-height: 1;
}
.tm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(620px, 96vw);
}
.tm-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
  min-width: 156px;
  max-width: 220px;
  padding: 8px 10px;
  text-align: left;
  white-space: normal;
  overflow: hidden;
}
.tm-action span {
  grid-row: 1 / 3;
  min-width: 38px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 900;
}
.tm-action b {
  font-size: 0.86rem;
  line-height: 1.05;
}
.tm-action small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.tm-action.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.14);
}
.tm-action:disabled,
.tm-command:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}
.tm-info {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(240px, 1.1fr);
  gap: 10px;
  width: min(620px, 96vw);
}
.tm-notes,
.tm-log {
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent),
    #182041;
}
.tm-notes > b,
.tm-log > b {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.9rem;
}
.tm-notes > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
}
.tm-notes span,
.tm-log span {
  display: block;
  border-radius: 7px;
  background: rgba(255,255,255,0.055);
  padding: 7px 8px;
}
.tm-notes span.danger {
  box-shadow: inset 0 0 0 1px rgba(255,93,115,0.35);
}
.tm-notes span.safe {
  box-shadow: inset 0 0 0 1px rgba(110,231,183,0.3);
}
.tm-notes b {
  display: block;
  color: var(--text);
  font-size: 0.78rem;
}
.tm-notes small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
}
.tm-log > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tm-log span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.28;
}
@media (max-width: 860px) {
  .tm-hud,
  .tm-info {
    grid-template-columns: 1fr;
  }
  .tm-mid {
    order: -1;
  }
}
@media (max-width: 520px) {
  .tm-stage-wrap {
    padding: 7px;
  }
  .tm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .tm-action {
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 8px;
  }
  .tm-action span {
    min-width: 32px;
    font-size: 1rem;
  }
}


/* ====================== Câu Cá Đối Đầu (fishingfrenzy) ====================== */
.fh-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.fh-hidden { display: none !important; }
.fh-top {
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
  width: min(580px, 96vw);
}
.fh-score {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent), var(--panel);
}
.fh-score.me { border-color: rgba(110, 231, 183, 0.5); }
.fh-score.opp { border-color: rgba(255, 93, 115, 0.4); }
.fh-score span { font-size: 0.76rem; color: var(--muted); font-weight: 800; }
.fh-score b { font-size: 1.25rem; color: var(--accent); }
.fh-score small { font-size: 0.72rem; color: var(--muted); }
.fh-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(circle at 50% 0%, rgba(77,208,225,0.18), transparent 65%), var(--panel);
}
.fh-timer b { font-size: 1.7rem; font-weight: 900; line-height: 1; }
.fh-timer small { font-size: 0.66rem; color: var(--muted); }
.fh-timer.low { animation: fh-pulse 0.6s infinite alternate; }
.fh-timer.low b { color: #ff5d73; }
@keyframes fh-pulse { from { box-shadow: 0 0 0 0 rgba(255,93,115,0); } to { box-shadow: 0 0 0 3px rgba(255,93,115,0.35); } }
.fh-canvas-wrap {
  width: fit-content;
  max-width: 96vw;
  padding: 8px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(77,208,225,0.16), transparent 40%),
    #061a30;
  box-shadow: var(--shadow);
}
.fh-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: crosshair;
}
.fh-reel {
  width: min(580px, 96vw);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 209, 102, 0.4);
  background: linear-gradient(180deg, rgba(255,209,102,0.1), transparent), var(--panel);
}
.fh-reel-head {
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}
.fh-reel-w { color: var(--accent); }
.fh-reel-key {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}
.fh-reel-key kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 2px 8px;
  margin: 0 2px;
  border-radius: 6px;
  background: var(--accent);
  color: #16121d;
  font-weight: 900;
  font-size: 1.05rem;
  font-family: inherit;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35);
  animation: fh-key 0.5s infinite alternate;
}
@keyframes fh-key { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.fh-reel-bar {
  height: 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  overflow: hidden;
}
.fh-reel-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.06s linear, background 0.1s;
}
.fh-boosts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 1.2em;
}
.fh-boosts span {
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.16);
  color: #ffe9a8;
}
.fh-hint {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  max-width: 480px;
  line-height: 1.35;
}


/* ---------- Co-op Defense: emoji quái + Không kích ---------- */
.cd-monster .cd-mon-ic {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
.cd-monster.mon-boss .cd-mon-ic { font-size: 27px; }
.cd-monster.mon-brute .cd-mon-ic,
.cd-monster.mon-splitter .cd-mon-ic { font-size: 21px; }
.cd-strike {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(180deg, #ff8d7a, #d2402f);
  border-color: rgba(255,209,102,0.5);
  color: #fff;
  font-weight: 800;
}
.cd-strike:disabled { opacity: 0.5; }


/* ---------- Co-op Defense: đạn & hiệu ứng riêng từng súng ---------- */
.cd-shot::after { content: none; } /* bỏ chấm đầu cũ, dùng hiệu ứng va chạm riêng */

.cd-fx-tracer {
  height: 3px;
  background: linear-gradient(90deg, transparent, currentColor 60%, #fff);
  box-shadow: 0 0 7px currentColor;
}
.cd-fx-laser {
  height: 5px;
  background: linear-gradient(90deg, currentColor, #ffffff, currentColor);
  box-shadow: 0 0 16px currentColor, 0 0 5px #fff;
}
.cd-fx-snipe {
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff, currentColor);
  box-shadow: 0 0 9px currentColor;
}
.cd-fx-frost {
  height: 3px;
  background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px);
  box-shadow: 0 0 10px currentColor;
}
.cd-fx-bolt {
  height: 3px;
  background: linear-gradient(90deg, #fff, currentColor, #fff, currentColor);
  box-shadow: 0 0 14px currentColor, 0 0 6px #fff;
  filter: drop-shadow(0 1px 0 currentColor);
}
.cd-fx-flame {
  height: 7px;
  background: linear-gradient(90deg, rgba(255,209,102,0.2), #ffb15c 45%, #ff5d3a);
  box-shadow: 0 0 16px #ff8d3a;
}

.cd-impact {
  position: absolute;
  z-index: 8;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.cd-imp-tracer,
.cd-imp-snipe,
.cd-imp-laser {
  background: radial-gradient(circle, #fff 0%, currentColor 45%, transparent 72%);
}
.cd-imp-bolt {
  background: radial-gradient(circle, #fff 0%, currentColor 50%, transparent 74%);
  box-shadow: 0 0 16px currentColor;
}
.cd-imp-explode,
.cd-imp-blast {
  background: radial-gradient(circle, #fff6c2 0%, #ffae3c 32%, #ff5d3a 60%, rgba(210,64,47,0) 78%);
  box-shadow: 0 0 22px rgba(255,141,58,0.7);
  border: 2px solid rgba(255,221,150,0.7);
}
.cd-imp-flame {
  background: radial-gradient(circle, #ffe49a 0%, #ff9d3a 40%, #e23a2a 70%, transparent 82%);
  box-shadow: 0 0 18px rgba(255,120,40,0.75);
}
.cd-imp-frost {
  background: radial-gradient(circle, #ffffff 0%, #7fe7ff 45%, rgba(127,231,255,0) 75%);
  box-shadow: 0 0 16px rgba(127,231,255,0.8);
  border: 1px solid rgba(200,245,255,0.7);
}


/* ---------- Co-op Defense: ụ súng chân thật, nòng xoay theo quái ---------- */
.cd-slot.has-tower { overflow: visible; }
.cd-slot.has-tower .cd-gun-base {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #6b7280, #353b47 70%);
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.45), inset 0 2px 3px rgba(255,255,255,0.18);
  border: 2px solid rgba(0,0,0,0.3);
  z-index: 3;
}
.cd-slot.has-tower .cd-gun-turret {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  width: 0;
  height: 0;
  z-index: 5;
  transform-origin: center;
  transition: transform 0.08s linear;
}
.cd-slot.has-tower .cd-gun-barrel {
  position: absolute;
  left: 2px;
  top: -4px;
  margin: 0;
  width: 24px;
  height: 8px;
  border-radius: 3px 5px 5px 3px;
  background: linear-gradient(90deg, #2b2f3a 0%, currentColor 55%, #11141d 100%);
  box-shadow: 0 0 7px currentColor, inset 0 -2px 0 rgba(0,0,0,0.35);
}
.cd-slot.has-tower .cd-gun-barrel::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 5px;
  height: 11px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: #11141d;
}
.cd-slot.has-tower .cd-gun-dome {
  position: absolute;
  left: -11px;
  top: -11px;
  margin: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff7, currentColor 58%, rgba(0,0,0,0.35) 100%);
  box-shadow: inset 0 -3px 4px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4);
  border: 2px solid rgba(0,0,0,0.28);
}
/* nòng theo từng loại súng */
.cd-slot.tower-cannon .cd-gun-barrel,
.cd-slot.tower-mortar .cd-gun-barrel { width: 20px; height: 11px; border-radius: 4px 7px 7px 4px; }
.cd-slot.tower-sniper .cd-gun-barrel,
.cd-slot.tower-laser .cd-gun-barrel { width: 30px; height: 5px; }
.cd-slot.tower-frost .cd-gun-barrel,
.cd-slot.tower-tesla .cd-gun-barrel { box-shadow: 0 0 12px currentColor; }
.cd-slot.tower-flame .cd-gun-barrel { width: 18px; height: 12px; }
/* chớp lửa đầu nòng khi vừa bắn */
.cd-slot.has-tower .cd-gun-turret.firing .cd-gun-barrel { transform: translateX(-2px); }
.cd-slot.has-tower .cd-gun-turret.firing .cd-gun-barrel::before {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, currentColor 45%, transparent 75%);
  box-shadow: 0 0 12px currentColor;
}
.cd-slot.has-tower .cd-gun-lv {
  position: absolute;
  right: -3px;
  bottom: -3px;
  margin: 0;
  z-index: 7;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #16121d;
  color: #ffd166;
  font-size: 0.62rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  text-shadow: none;
}


/* ---------- Co-op Defense: popup nâng cấp/bán cạnh cây súng ---------- */
.cd-map-scroll { position: relative; }
.cd-popup-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.cd-tower-popup {
  position: absolute;
  width: 134px;
  padding: 8px 10px 9px;
  border-radius: 10px;
  background: rgba(18, 22, 40, 0.96);
  border: 1px solid rgba(255, 209, 102, 0.55);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  color: #e9ecff;
  text-align: center;
  pointer-events: auto;
}
.cd-tower-popup.pop-right { transform: translate(34px, -50%); }
.cd-tower-popup.pop-left { transform: translate(calc(-100% - 34px), -50%); }
.cd-tower-popup b { display: block; font-size: 0.82rem; line-height: 1.1; }
.cd-tower-popup span { display: block; font-size: 0.66rem; color: var(--muted); margin: 2px 0 7px; }
.cd-pop-row { display: flex; gap: 6px; }
.cd-pop-btn {
  flex: 1;
  padding: 6px 4px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  font-weight: 800;
  font-size: 0.74rem;
  cursor: pointer;
  color: #16121d;
}
.cd-pop-btn.up { background: #6ee7b7; }
.cd-pop-btn.up:disabled { opacity: 0.45; cursor: not-allowed; }
.cd-pop-btn.sell { background: #ffd166; }
.cd-pop-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff5d73;
  color: #fff;
  border: none;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Gợi ý & độ khó: Hangman / Nối Từ / Dò Mìn ---------- */
.hm-hintbar { display: flex; justify-content: center; margin-top: 6px; min-height: 1px; }
.hm-hint { font-size: 0.85rem; }
.hm-key.hint-reveal {
  background: #ffd166; color: #1a1a1a; opacity: 1;
  box-shadow: 0 0 0 2px rgba(255,209,102,0.5);
}
.nt-hint { font-size: 0.85rem; background: rgba(255,209,102,0.16); border-color: rgba(255,209,102,0.4); }
.nt-hint:hover:not(:disabled) { background: rgba(255,209,102,0.28); }
.nt-judge-warn { color: var(--accent, #ffd166); }

.ms-hintrow { display: flex; justify-content: center; margin-top: 10px; }
.ms-hint-btn { font-size: 0.88rem; }
.ms-cell.ms-hint {
  animation: ms-hint-flash 0.5s ease-in-out 3;
  box-shadow: 0 0 0 2px #ffd166, 0 0 14px rgba(255,209,102,0.8);
  z-index: 2;
}
@keyframes ms-hint-flash {
  0%, 100% { background: #3a4180; }
  50% { background: #ffd166; }
}


/* ---------- Tôn trọng người dùng muốn giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .game-card { animation: none !important; }
  .bs-cell.scan::before,
  .sbx-cell.scanned::after,
  .bs-cell.hit.sunk,
  .sbx-cell.hit.sunk,
  .sh-cell.sh-final,
  .sh-cell.sh-sub,
  .sh-noise-zone,
  .sh-decoy-zone,
  .bs-cell.aim,
  .sbx-cell.aim,
  .sh-cell.sh-target,
  .pr-wait { animation: none !important; }
}


/* ---------- Biểu đồ hoạt động 14 ngày ---------- */
.activity-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 130px;
  padding: 10px 12px 4px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(42,48,96,0.5), rgba(24,28,58,0.7));
  border: 1px solid rgba(255,255,255,0.07);
}
.ac-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.ac-bar {
  width: 70%;
  max-width: 22px;
  min-height: 3px;
  display: flex;
  flex-direction: column;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.ac-seg.win { background: var(--good); }
.ac-seg.draw { background: var(--accent); }
.ac-seg.lose { background: var(--p1); }
.ac-col small { font-size: 0.62rem; color: var(--muted); }
body.theme-light .activity-chart { background: linear-gradient(160deg, #ffffff, #f1f4fd); border-color: rgba(20,30,80,0.08); }

/* ---------- Bộ lọc lịch sử ---------- */
.hist-filters { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.hist-filters .option-select { flex: 1; min-width: 130px; }


/* ---------- Quản lý dữ liệu cá nhân ---------- */
.data-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn.danger { border-color: rgba(255,93,115,0.5); color: #ff8fa1; }
.btn.danger:hover { background: var(--p1); color: #fff; box-shadow: 0 6px 18px rgba(255,93,115,0.35); }

/* ---------- Reaction nổi (emoji bay lên khi chơi online) ---------- */
.reaction-float {
  position: fixed;
  bottom: 92px;
  transform: translateX(-50%);
  font-size: 3rem;
  line-height: 1;
  pointer-events: none;
  z-index: 1600;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  animation: reactFloat 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}
@keyframes reactFloat {
  0% { opacity: 0; transform: translate(-50%, 24px) scale(0.4); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  30% { transform: translate(-50%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .reaction-float { animation-duration: 1s; }
}


/* ====================== Đua Bấm Nút (reactionduel) ====================== */
.rd2-root { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 620px; margin: 0 auto; }
.rd2-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; width: 100%; }
.rd2-pad {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 180px; border-radius: 16px; cursor: pointer; color: #fff;
  border: 2px solid rgba(255,255,255,0.14); background: rgba(42,48,96,0.5);
  font-family: var(--font-body); transition: transform 0.08s, box-shadow 0.18s, background 0.18s;
}
.rd2-pad:active { transform: scale(0.97); }
.rd2-p1 { box-shadow: inset 0 0 0 2px rgba(255,93,115,0.4); }
.rd2-p2 { box-shadow: inset 0 0 0 2px rgba(77,208,225,0.4); }
.rd2-pad-name { font-size: 1.6rem; font-weight: 800; }
.rd2-pad-key { font-size: 0.85rem; opacity: 0.7; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; padding: 1px 8px; }
.rd2-pad-rt { font-size: 1.1rem; font-weight: 700; color: var(--accent); min-height: 1.2em; }
.rd2-pad.foul { background: rgba(255,93,115,0.35); box-shadow: 0 0 20px rgba(255,93,115,0.6); }
.rd2-pad.win { background: rgba(110,231,183,0.28); box-shadow: 0 0 22px rgba(110,231,183,0.55); }
.rd2-pad.lose { opacity: 0.55; }
.rd2-light {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 120px; border-radius: 16px; font-weight: 800; font-size: 1rem; color: #0f1226;
  background: #3a4060; transition: background 0.1s;
}
.rd2-light.idle { background: #3a4060; color: #c9d2ff; }
.rd2-light.count { background: radial-gradient(circle, #4dd0e1, #2a3068); color: #fff; font-size: 2.4rem; animation: rd2-count 0.7s ease; }
@keyframes rd2-count { from { transform: scale(1.4); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.rd2-light.wait { background: linear-gradient(160deg, #ff8f5a, #ff5d73); color: #2a1606; animation: rd2-pulse 0.8s ease-in-out infinite; }
.rd2-light.go { background: linear-gradient(160deg, #6ee7b7, #34d399); color: #07331f; box-shadow: 0 0 30px rgba(52,211,153,0.7); }
.rd2-light.done { background: #2a3068; color: #ffd166; }
@keyframes rd2-pulse { 50% { filter: brightness(1.2); } }
.rd2-score { display: flex; align-items: center; gap: 18px; font-size: 1.4rem; font-weight: 800; }
.rd2-score .rd2-s1 { color: #ff5d73; }
.rd2-score .rd2-s2 { color: #4dd0e1; }
.rd2-vs { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.rd2-best { font-size: 0.85rem; color: var(--muted); text-align: center; }
.rd2-best b { color: var(--accent); }
@media (max-width: 480px) {
  .rd2-light { width: 84px; font-size: 0.85rem; }
  .rd2-pad { min-height: 150px; }
}

/* ====================== Đua Né Chướng Ngại (dashdodge) ====================== */
.dd2-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.dd2-canvas { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: #0f1226; touch-action: none; }
.dd2-info { display: flex; justify-content: space-between; align-items: center; gap: 18px; width: 100%; max-width: 614px; color: var(--muted); font-size: 0.9rem; }
.dd2-info .dd2-dist { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.dd2-spd { font-size: 0.8rem; color: #6ee7b7; font-weight: 700; margin-left: 4px; }


/* ====================== Rắn & Thang (snakesladders) ====================== */
.sl-root { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto; }
.sl-header { display: flex; gap: 12px; width: 100%; }
.sl-pinfo { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(42,48,96,0.5); border: 1px solid rgba(255,255,255,0.12); font-size: 0.9rem; }
.sl-pinfo b { font-size: 1.2rem; }
.sl-pinfo.p1 { box-shadow: inset 0 0 0 2px rgba(255,93,115,0.35); }
.sl-pinfo.p2 { box-shadow: inset 0 0 0 2px rgba(77,208,225,0.35); }
.sl-pinfo.active { background: rgba(60,68,120,0.7); box-shadow: 0 0 16px rgba(255,209,102,0.4); }
.sl-board {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
  width: 100%; aspect-ratio: 1 / 1; background: rgba(255,255,255,0.06);
  border-radius: 12px; padding: 4px; border: 1px solid rgba(255,255,255,0.12);
  position: relative;
}
.sl-links { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); pointer-events: none; z-index: 2; overflow: visible; }
.sl-link-ladder { stroke: rgba(110,231,183,0.55); stroke-linecap: round; stroke-dasharray: 0.6 2.2; }
.sl-link-ladder-dot { fill: #6ee7b7; opacity: 0.8; }
.sl-link-snake { stroke: rgba(255,143,90,0.6); stroke-linecap: round; }
.sl-link-snake-dot { fill: #ff8f5a; opacity: 0.85; }
.sl-cell {
  position: relative; border-radius: 4px; background: rgba(42,48,96,0.45);
  display: flex; align-items: flex-start; justify-content: flex-start; overflow: hidden;
  font-size: 0.55rem; min-width: 0;
}
.sl-cell:nth-child(odd) { background: rgba(52,58,110,0.45); }
.sl-num { position: absolute; top: 1px; left: 2px; color: var(--muted); font-weight: 600; }
.sl-tag { position: absolute; bottom: 1px; right: 2px; font-size: 0.5rem; white-space: nowrap; }
.sl-tag.sl-ladder { color: #6ee7b7; }
.sl-tag.sl-snake { color: #ff8f5a; }
.sl-pawns { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 0.85rem; pointer-events: none; z-index: 3; }
.sl-pawn { line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); animation: sl-pop 0.25s ease; }
.sl-pawn.hop { animation: sl-hop 0.5s ease; }
@keyframes sl-pop { from { transform: scale(0.4); } to { transform: scale(1); } }
@keyframes sl-hop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-10px) scale(1.25); } 70% { transform: translateY(-3px) scale(1.1); } 100% { transform: translateY(0) scale(1); } }
.sl-controls { display: flex; align-items: center; gap: 14px; }
.sl-die { font-size: 2.4rem; line-height: 1; min-width: 44px; text-align: center; display: inline-block; }
.sl-die.rolling { animation: sl-roll 0.5s ease; }
@keyframes sl-roll { 0% { transform: rotate(-180deg) scale(0.6); } 60% { transform: rotate(20deg) scale(1.2); } 100% { transform: rotate(0) scale(1); } }
@media (max-width: 480px) {
  .sl-cell { font-size: 0.5rem; }
  .sl-num { font-size: 0.48rem; }
  .sl-pawns { font-size: 0.7rem; }
}


/* ====================== Cá Ngựa Nói Dối (liarsdice) ====================== */
.ld-root { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 540px; margin: 0 auto; }
.ld-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(42,48,96,0.42); }
.ld-opp { box-shadow: inset 0 0 0 2px rgba(77,208,225,0.28); }
.ld-me { box-shadow: inset 0 0 0 2px rgba(255,93,115,0.32); }
.ld-side { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ld-tag { font-weight: 700; font-size: 0.95rem; }
.ld-cnt { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ld-dice { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; }
.ld-die {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 10px; font-size: 1.7rem;
  background: #f4f6ff; color: #1a1f3d; box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  animation: ld-roll 0.3s ease;
}
.ld-die.wild { background: linear-gradient(150deg, #ffd166, #ff8f5a); color: #2a1606; }
.ld-die.hidden { background: rgba(20,26,55,0.7); color: rgba(255,255,255,0.45); border: 1px dashed rgba(255,255,255,0.25); box-shadow: none; }
.ld-dice.revealed .ld-die { animation: ld-flip 0.4s ease; }
@keyframes ld-roll { from { transform: rotate(-25deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ld-flip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
.ld-mid { display: flex; justify-content: center; }
.ld-bid {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px; border-radius: 999px;
  background: rgba(255,209,102,0.12); border: 1px solid rgba(255,209,102,0.4); min-height: 40px;
}
.ld-bid-label { color: var(--muted); font-size: 0.85rem; }
.ld-bid-val { font-size: 1.2rem; }
.ld-bid-val b { color: var(--accent); }
.ld-bid-face { font-size: 1.3rem; }
.ld-bid-by { font-size: 0.78rem; color: var(--muted); }
.ld-panel { min-height: 96px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ld-build { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ld-qty { display: flex; align-items: center; gap: 8px; }
.ld-qd { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(42,48,96,0.6); color: var(--text); font-size: 1.3rem; cursor: pointer; }
.ld-qd:active { transform: scale(0.92); }
.ld-qtyval { font-size: 1.5rem; font-weight: 800; min-width: 28px; text-align: center; color: var(--accent); }
.ld-x { color: var(--muted); }
.ld-faces { display: flex; gap: 5px; flex-wrap: wrap; }
.ld-face { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.16); background: #eef1ff; color: #1a1f3d; font-size: 1.4rem; cursor: pointer; transition: transform 0.08s, box-shadow 0.16s; }
.ld-face.on { box-shadow: 0 0 0 3px var(--accent), 0 4px 10px rgba(0,0,0,0.3); transform: translateY(-2px); }
.ld-acts { display: flex; gap: 10px; }
.ld-acts .ld-do-ch { border-color: rgba(255,93,115,0.5); }
.ld-wait, .ld-reveal-note { color: var(--muted); font-style: italic; padding: 12px; }
.btn.disabled, .ld-do-bid.disabled, .ld-do-ch.disabled { opacity: 0.45; pointer-events: none; }
@media (max-width: 480px) {
  .ld-die { width: 40px; height: 40px; font-size: 1.45rem; }
  .ld-face { width: 36px; height: 36px; font-size: 1.2rem; }
}


/* ====================== Phá Mã Đối Kháng (codebreakerduel) ====================== */
.cb2-root { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; }
.cb2-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cb2-hcol { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(42,48,96,0.45); border: 1px solid rgba(255,255,255,0.12); text-align: center; }
.cb2-hcol.active { background: rgba(60,68,120,0.7); box-shadow: 0 0 16px rgba(255,209,102,0.4); }
.cb2-hcol small { color: var(--muted); font-size: 0.78rem; }
.cb2-prog { display: flex; gap: 4px; justify-content: center; margin: 3px 0; }
.cb2-pip { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.14); transition: background 0.25s, box-shadow 0.25s; }
.cb2-pip.on { background: #6ee7b7; box-shadow: 0 0 8px rgba(110,231,183,0.7); }
.cb2-coltitle { font-size: 0.82rem; font-weight: 700; color: var(--muted); text-align: center; margin-bottom: 6px; }
.cb2-gn { font-size: 0.7rem; color: var(--muted); min-width: 16px; text-align: right; }
.cb2-guess.latest { background: rgba(255,209,102,0.12); border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,209,102,0.3); animation: cb2-pop 0.3s ease; }
.cb2-guess.solved { background: rgba(110,231,183,0.18); box-shadow: 0 0 0 1px rgba(110,231,183,0.5); }
@keyframes cb2-pop { from { transform: scale(0.92); opacity: 0.4; } to { transform: none; opacity: 1; } }
.cb2-buildlabel { font-size: 0.82rem; color: var(--muted); text-align: center; }
.cb2-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; font-size: 0.74rem; color: var(--muted); margin-top: 4px; }
.cb2-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cb2-legend .cb2-fb { position: static; }
.cb2-secret-lbl { font-size: 0.72rem; opacity: 0.8; }
.cb2-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cb2-col { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(20,26,55,0.4); border: 1px solid rgba(255,255,255,0.08); }
.cb2-guesses { display: flex; flex-direction: column; gap: 5px; min-height: 60px; max-height: 240px; overflow-y: auto; }
.cb2-guess { display: flex; align-items: center; gap: 4px; padding: 3px 4px; }
.cb2-empty { color: var(--muted); text-align: center; padding: 16px 0; }
.cb2-peg { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 1.05rem; box-shadow: 0 2px 5px rgba(0,0,0,0.35); }
.cb2-peg.empty { background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.2); box-shadow: none; }
.cb2-fbs { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: 6px; width: 30px; }
.cb2-fb { width: 9px; height: 9px; border-radius: 50%; }
.cb2-fb.exact { background: #fff; box-shadow: 0 0 5px rgba(255,255,255,0.8); }
.cb2-fb.color { background: transparent; border: 2px solid #fff; }
.cb2-fb.none { background: rgba(255,255,255,0.12); }
.cb2-secret { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--muted); border-top: 1px solid rgba(255,255,255,0.08); padding-top: 6px; }
.cb2-secret .cb2-peg { width: 22px; height: 22px; font-size: 0.8rem; }
.cb2-input { display: flex; flex-direction: column; gap: 10px; align-items: center; min-height: 120px; }
.cb2-slots { display: flex; gap: 8px; }
.cb2-slot { width: 48px; height: 48px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.16); background: rgba(42,48,96,0.6); font-size: 1.5rem; cursor: pointer; transition: box-shadow 0.16s, transform 0.08s; }
.cb2-slot.on { box-shadow: 0 0 0 3px var(--accent); transform: translateY(-2px); }
.cb2-slot.empty { color: transparent; }
.cb2-palette { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cb2-pal { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: var(--pc); font-size: 1.1rem; cursor: pointer; transition: transform 0.08s; }
.cb2-pal:active { transform: scale(0.9); }
.cb2-acts { display: flex; gap: 10px; }
.cb2-wait, .cb2-done { color: var(--muted); font-style: italic; padding: 14px; }
@media (max-width: 480px) {
  .cb2-peg { width: 26px; height: 26px; font-size: 0.9rem; }
  .cb2-slot { width: 42px; height: 42px; font-size: 1.3rem; }
  .cb2-pal { width: 38px; height: 38px; }
}


/* ====================== Xì Dách Đối Kháng (blackjackduel) ====================== */
.bj-root { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 520px; margin: 0 auto; }
.bj-score { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 1rem; }
.bj-score .bj-w b { font-size: 1.4rem; }
.bj-score .p1 b { color: #ff5d73; }
.bj-score .p2 b { color: #4dd0e1; }
.bj-target { font-size: 0.8rem; color: var(--muted); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); }
.bj-table { display: flex; flex-direction: column; gap: 12px; }
.bj-seat { padding: 12px 14px; border-radius: 14px; background: rgba(42,48,96,0.42); border: 1px solid rgba(255,255,255,0.12); }
.bj-seat[data-seat="opp"] { box-shadow: inset 0 0 0 2px rgba(77,208,225,0.28); }
.bj-seat[data-seat="me"] { box-shadow: inset 0 0 0 2px rgba(255,93,115,0.32); }
.bj-seat-head { font-weight: 700; font-size: 0.92rem; margin-bottom: 8px; }
.bj-turn { color: var(--accent); font-weight: 700; }
.bj-cards { display: flex; flex-wrap: wrap; gap: 10px; min-height: 78px; }
.bj-card {
  position: relative;
  width: 54px; height: 76px; border-radius: 9px;
  background: linear-gradient(160deg, #ffffff, #e8ecf8);
  color: #16203a; box-shadow: 0 4px 10px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.06);
  animation: bj-deal 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.bj-card .bj-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 0.95; font-weight: 800; }
.bj-card .bj-corner b { font-size: 0.92rem; }
.bj-card .bj-corner i { font-size: 0.8rem; font-style: normal; }
.bj-card .bj-corner.tl { top: 4px; left: 5px; }
.bj-card .bj-corner.br { bottom: 4px; right: 5px; transform: rotate(180deg); }
.bj-card .bj-pip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; opacity: 0.92; }
.bj-card.red { color: #d6263b; }
.bj-card.back {
  background: linear-gradient(135deg, #3a4070, #232a52);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 6px, transparent 6px 12px), linear-gradient(135deg, #3a4070, #232a52);
}
.bj-card.back .bj-back-deco { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: rgba(255,255,255,0.55); }
@keyframes bj-deal { from { transform: translateY(-22px) rotate(-8deg) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
.bj-total { margin-top: 10px; font-size: 0.95rem; color: var(--muted); transition: color 0.2s; }
.bj-total b { color: var(--text); font-size: 1.2rem; }
.bj-total.bj21 b { color: #6ee7b7; text-shadow: 0 0 10px rgba(110,231,183,0.6); animation: bj-flash 0.5s ease; }
.bj-total.bust b { color: #ff5d73; text-shadow: 0 0 10px rgba(255,93,115,0.6); }
@keyframes bj-flash { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.bj-acts { display: flex; gap: 10px; justify-content: center; min-height: 46px; }
.bj-wait { color: var(--muted); font-style: italic; padding: 10px; }
@media (max-width: 480px) {
  .bj-card { width: 48px; height: 68px; }
  .bj-card .bj-pip { font-size: 1.6rem; }
}


/* Liar's Dice — bổ sung giao diện thân thiện người mới */
.ld-help {
  font-size: 0.86rem; line-height: 1.5; color: var(--text);
  background: rgba(255,209,102,0.1); border: 1px solid rgba(255,209,102,0.32);
  border-radius: 12px; padding: 9px 13px;
}
.ld-help b { color: var(--accent); }
.ld-hint { font-size: 0.76rem; color: var(--muted); }
.ld-secret-note { font-style: italic; }
.ld-bid { flex-direction: column; gap: 4px; text-align: center; padding: 10px 18px; }
.ld-bid-main { display: flex; align-items: center; gap: 10px; justify-content: center; }
.ld-bid-sentence { font-size: 0.84rem; color: var(--muted); }
.ld-bid-sentence b { color: var(--text); }
.ld-bid-mine { color: var(--accent); }
.ld-preview {
  font-size: 0.88rem; text-align: center; padding: 8px 12px; border-radius: 10px;
  background: rgba(77,208,225,0.1); border: 1px solid rgba(77,208,225,0.28);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
}
.ld-prev-lead { color: var(--muted); }
.ld-prev-sentence b { color: var(--accent); }
.ld-prev-mine { font-size: 0.78rem; color: var(--muted); }
.ld-prev-bad { font-size: 0.78rem; color: #ff8f5a; width: 100%; }
.ld-build { gap: 18px; align-items: flex-end; }
.ld-field { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.ld-flabel { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ld-tip { font-size: 0.78rem; color: var(--muted); text-align: center; max-width: 420px; line-height: 1.45; }
.ld-do-ch { border-color: rgba(255,159,122,0.5); }


/* ====================== 20 Câu Hỏi (twentyquestions) ====================== */
.tq-root { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto; }
/* Thanh trên: card 2 cột (đồng hồ câu hỏi | vai trò + chủ đề) — không đè nhau */
.tq-top {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(42,48,96,0.6), rgba(28,33,68,0.8));
  border: 1px solid rgba(255,255,255,0.1);
}
.tq-counter {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,209,102,0.2), rgba(255,209,102,0.06));
  border: 2px solid rgba(255,209,102,0.45); flex: 0 0 auto;
}
.tq-counter.low { background: radial-gradient(circle, rgba(255,93,115,0.25), rgba(255,93,115,0.08)); border-color: rgba(255,93,115,0.6); animation: tq-pulse 1s ease-in-out infinite; }
@keyframes tq-pulse { 50% { transform: scale(1.06); filter: brightness(1.15); } }
.tq-num { font-size: 1.9rem; font-weight: 800; color: var(--accent); line-height: 1; }
.tq-counter.low .tq-num { color: #ff8f5a; }
.tq-num-lbl { font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; text-align: center; margin-top: 2px; }
.tq-roles { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tq-role { font-weight: 700; font-size: 0.95rem; }
.tq-cat { color: var(--muted); font-size: 0.82rem; }
.tq-cat b { color: var(--accent); }
/* Nhật ký hỏi-đáp dạng bong bóng chat */
.tq-log { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; padding: 10px; border-radius: 14px; background: rgba(20,26,55,0.45); border: 1px solid rgba(255,255,255,0.08); min-height: 90px; }
.tq-qa { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(42,48,96,0.55); animation: tq-in 0.25s ease; }
.tq-qa.tq-row-yes { box-shadow: inset 3px 0 0 #6ee7b7; }
.tq-qa.tq-row-no { box-shadow: inset 3px 0 0 #ff5d73; }
@keyframes tq-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.tq-qn { font-size: 0.72rem; font-weight: 700; color: #2a1606; background: var(--accent); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tq-q { flex: 1; font-size: 0.95rem; min-width: 0; word-break: break-word; }
.tq-a { font-size: 1.2rem; flex: 0 0 auto; }
.tq-empty { color: var(--muted); text-align: center; padding: 18px; font-style: italic; }
.tq-panel { display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
.tq-hint, .tq-note { font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
.tq-note { font-size: 0.76rem; }
.tq-word, .tq-qin {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 16px;
  background: var(--bg); border: 1px solid rgba(255,255,255,0.14); color: var(--text);
}
.tq-word:focus, .tq-qin:focus { outline: 2px solid var(--accent); border-color: transparent; }
.tq-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.tq-catbtn { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(42,48,96,0.6); color: var(--text); cursor: pointer; font: inherit; min-height: 40px; transition: box-shadow 0.16s, transform 0.08s, background 0.16s; }
.tq-catbtn.on { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-1px); background: rgba(60,68,120,0.8); }
.tq-askrow { display: flex; gap: 8px; }
.tq-askrow .tq-qin { flex: 1; }
.tq-ansbtns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tq-ans { min-height: 48px; font-size: 1rem; }
.tq-final { align-self: stretch; border-color: rgba(110,231,183,0.5); min-height: 44px; }
.tq-setup, .tq-ask, .tq-answer, .tq-verdict { display: flex; flex-direction: column; gap: 10px; }
.tq-pending { font-size: 1.2rem; font-weight: 600; text-align: center; padding: 14px; border-radius: 14px; background: rgba(77,208,225,0.12); border: 1px solid rgba(77,208,225,0.32); }
.tq-pending.small { font-size: 0.95rem; padding: 9px; }
.tq-guesstext { font-size: 1.4rem; font-weight: 700; text-align: center; color: var(--accent); padding: 12px; }
.tq-wait, .tq-over { color: var(--muted); font-style: italic; padding: 18px; text-align: center; }
.tq-over { font-size: 1.05rem; font-style: normal; }
.tq-over b { color: var(--accent); }
@media (max-width: 460px) {
  .tq-ansbtns { grid-template-columns: 1fr; }
  .tq-askrow { flex-direction: column; }
  .tq-askrow .btn { width: 100%; }
}


/* ====================== Ghép Từ Đối Kháng (wordduel) ====================== */
.wd-root { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 520px; margin: 0 auto; }
.wd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wd-pinfo { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(42,48,96,0.45); border: 1px solid rgba(255,255,255,0.12); }
.wd-pinfo b { font-size: 1.4rem; }
.wd-pinfo.p1 { box-shadow: inset 0 0 0 2px rgba(255,93,115,0.32); }
.wd-pinfo.p2 { box-shadow: inset 0 0 0 2px rgba(77,208,225,0.32); }
.wd-pinfo.active { background: rgba(60,68,120,0.7); box-shadow: 0 0 16px rgba(255,209,102,0.4); }
.wd-goal { font-size: 0.78rem; color: var(--muted); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.wd-clock { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.wd-clock.low { color: #ff5d73; animation: wd-clocklow 0.8s ease-in-out infinite; }
@keyframes wd-clocklow { 50% { transform: scale(1.15); } }
.wd-moves { font-size: 0.72rem; }
.wd-last { text-align: center; font-size: 0.9rem; color: var(--muted); min-height: 1.3em; }
.wd-last b { color: var(--accent); }
.wd-pool { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wd-tile {
  position: relative; padding: 14px 8px; border-radius: 12px; font-size: 1.15rem; font-weight: 700;
  background: #eef1ff; color: #1a1f3d; border: 2px solid transparent; cursor: pointer;
  transition: transform 0.08s, box-shadow 0.16s; text-transform: lowercase;
  display: flex; align-items: center; justify-content: center; min-height: 52px;
}
.wd-tile:active { transform: scale(0.95); }
.wd-tile.on { box-shadow: 0 0 0 3px var(--accent); transform: translateY(-2px); background: #fff7e0; }
.wd-tile.hint { box-shadow: 0 0 0 3px #6ee7b7, 0 0 14px rgba(110,231,183,0.6); animation: wd-hintpulse 0.9s ease-in-out infinite; }
@keyframes wd-hintpulse { 50% { box-shadow: 0 0 0 4px #6ee7b7, 0 0 20px rgba(110,231,183,0.85); } }
.wd-tile.r2 { background: #e7f0ff; }
.wd-tile.r3 { background: #ffeef0; }
.wd-tile .wd-syl { pointer-events: none; }
.wd-tile .wd-pt { position: absolute; bottom: 2px; right: 5px; font-size: 0.62rem; font-weight: 800; color: #8a93c4; }
.wd-mult { position: absolute; top: 2px; right: 4px; font-size: 0.62rem; font-weight: 800; padding: 1px 4px; border-radius: 6px; color: #2a1606; }
.wd-mult.x2 { background: #ffd166; }
.wd-mult.x3 { background: linear-gradient(135deg, #ff8f5a, #ff5d73); color: #fff; }
.wd-order { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #2a1606; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 2; }
.wd-combo { font-size: 0.72rem; color: #ff8f5a; font-weight: 800; margin-left: 4px; }
.wd-sel { display: flex; align-items: center; gap: 12px; justify-content: center; min-height: 40px; padding: 8px 12px; border-radius: 12px; background: rgba(20,26,55,0.4); border: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; }
.wd-prev { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.5px; }
.wd-prev.ok { color: #6ee7b7; }
.wd-prev.empty { color: var(--muted); font-weight: 400; font-size: 0.9rem; }
.wd-ok { color: #6ee7b7; font-size: 0.85rem; font-weight: 700; }
.wd-no { color: var(--muted); font-size: 0.82rem; font-style: italic; }
.wd-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.wd-wait { color: var(--muted); font-style: italic; padding: 10px; }
@media (max-width: 480px) {
  .wd-tile { font-size: 1rem; padding: 12px 6px; }
  .wd-pinfo b { font-size: 1.2rem; }
}


/* ====================== Kéo Co Bằng Phím (tugofwar) ====================== */
.tw2-root { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 700px; margin: 0 auto; }
.tw2-score { display: flex; align-items: center; gap: 18px; font-size: 1.4rem; font-weight: 800; }
.tw2-score .tw2-s1 { color: #ff5d73; }
.tw2-score .tw2-s2 { color: #4dd0e1; }
.tw2-vs { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.tw2-canvas { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); }
.tw2-keys { display: flex; justify-content: space-between; width: 100%; max-width: 520px; font-size: 0.95rem; }
.tw2-k.p1 { color: #ff5d73; } .tw2-k.p2 { color: #4dd0e1; }
.tw2-k b { display: inline-block; min-width: 24px; padding: 1px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.3); text-align: center; }

/* ====================== Đua Gõ Phím (typingrace) ====================== */
.tr2-root { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto; }
.tr2-prog { display: flex; flex-direction: column; gap: 4px; }
.tr2-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.tr2-bar i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.2s ease; }
.tr2-bar.p1 i { background: #ff5d73; } .tr2-bar.p2 i { background: #4dd0e1; }
.tr2-lane { padding: 12px 14px; border-radius: 14px; background: rgba(42,48,96,0.45); border: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 8px; }
.tr2-lane[data-seat="0"] { box-shadow: inset 0 0 0 2px rgba(255,93,115,0.3); }
.tr2-lane[data-seat="1"] { box-shadow: inset 0 0 0 2px rgba(77,208,225,0.3); }
.tr2-head { font-weight: 700; font-size: 0.9rem; display: flex; justify-content: space-between; }
.tr2-cnt { color: var(--muted); font-variant-numeric: tabular-nums; }
.tr2-word { font-size: 1.3rem; min-height: 1.6em; letter-spacing: 0.3px; }
.tr2-cur { color: var(--accent); background: rgba(255,209,102,0.12); padding: 2px 8px; border-radius: 6px; }
.tr2-next { color: var(--muted); font-size: 1rem; }
.tr2-done { color: #6ee7b7; font-weight: 700; }
.tr2-in { width: 100%; padding: 11px 14px; border-radius: 10px; font-size: 16px; background: var(--bg); border: 1px solid rgba(255,255,255,0.14); color: var(--text); }
.tr2-in:focus { outline: 2px solid var(--accent); border-color: transparent; }
.tr2-in.wrong { border-color: #ff5d73; box-shadow: 0 0 0 2px rgba(255,93,115,0.35); animation: tr2-shake 0.2s; }
@keyframes tr2-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.tr2-in:disabled { opacity: 0.5; }


/* ====== Chọn Số Né Nhau / Tù Nhân Song Đề / Oẳn Tù Tì Nâng Cao (chung kiểu) ====== */
.nd2-root, .pd2-root, .rps2-root { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 520px; margin: 0 auto; }
.nd2-head, .pd2-head, .rps2-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nd2-pinfo, .pd2-pinfo, .rps2-pinfo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(42,48,96,0.45); border: 1px solid rgba(255,255,255,0.12); }
.nd2-pinfo b, .pd2-pinfo b, .rps2-pinfo b { font-size: 1.5rem; }
.nd2-pinfo.p1, .pd2-pinfo.p1, .rps2-pinfo.p1 { box-shadow: inset 0 0 0 2px rgba(255,93,115,0.32); }
.nd2-pinfo.p2, .pd2-pinfo.p2, .rps2-pinfo.p2 { box-shadow: inset 0 0 0 2px rgba(77,208,225,0.32); }
.nd2-goal, .pd2-goal, .rps2-goal { font-size: 0.78rem; color: var(--muted); text-align: center; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); white-space: nowrap; }
.nd2-hint, .pd2-hint, .rps2-hint { font-size: 0.85rem; color: var(--muted); text-align: center; line-height: 1.5; padding: 8px; }
.nd2-reveal, .pd2-reveal, .rps2-reveal { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.nd2-cards, .pd2-cards, .rps2-cards { display: flex; align-items: center; gap: 16px; }
.nd2-vs, .pd2-vs, .rps2-vs { color: var(--muted); font-weight: 700; }
.nd2-card, .pd2-card, .rps2-card {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 66px; min-height: 66px; padding: 8px 14px; border-radius: 14px; font-size: 2rem; font-weight: 800;
  background: #eef1ff; color: #1a1f3d; box-shadow: 0 4px 10px rgba(0,0,0,0.35); animation: nd2-flip 0.4s ease;
}
.nd2-card small, .pd2-card small, .rps2-card small { font-size: 0.85rem; color: #6a73a0; }
.nd2-card.p1, .pd2-card.p1, .rps2-card.p1 { box-shadow: 0 0 0 2px rgba(255,93,115,0.5), 0 4px 10px rgba(0,0,0,0.35); }
.nd2-card.p2, .pd2-card.p2, .rps2-card.p2 { box-shadow: 0 0 0 2px rgba(77,208,225,0.5), 0 4px 10px rgba(0,0,0,0.35); }
.nd2-card.win, .rps2-card.win { background: linear-gradient(150deg, #d8ffe9, #a7f3d0); box-shadow: 0 0 18px rgba(110,231,183,0.6); }
.nd2-card.clash { background: #ffe0e3; }
@keyframes nd2-flip { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
.nd2-verdict, .pd2-verdict, .rps2-verdict { font-size: 0.95rem; text-align: center; font-weight: 600; }
.nd2-picklabel, .pd2-picklabel, .rps2-picklabel { text-align: center; font-size: 0.9rem; color: var(--muted); margin-bottom: 8px; }
.nd2-nums { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nd2-num { width: 52px; height: 52px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); background: rgba(42,48,96,0.6); color: var(--text); font-size: 1.4rem; font-weight: 800; cursor: pointer; transition: transform 0.08s, box-shadow 0.16s; }
.nd2-num:hover { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-2px); }
.nd2-num:active { transform: scale(0.92); }
.nd2-pbar { width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 4px; }
.nd2-pbar i { display: block; height: 100%; background: #ff5d73; border-radius: 999px; transition: width 0.4s ease; }
.nd2-pbar.p2 i { background: #4dd0e1; }
.nd2-over, .pd2-over, .rps2-over, .pd2-waitpick, .rps2-waitpick { color: var(--muted); font-style: italic; text-align: center; padding: 12px; }
/* Tù nhân song đề */
.pd2-payoff { font-size: 0.76rem; color: var(--muted); text-align: center; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,0.05); }
.pd2-btns, .rps2-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pd2-btns .btn { min-height: 56px; font-size: 1rem; padding: 0 22px; }
.pd2-coop { border-color: rgba(110,231,183,0.5) !important; }
.pd2-betray { border-color: rgba(255,93,115,0.5) !important; }
.pd2-coop:hover { box-shadow: 0 0 14px rgba(110,231,183,0.4); }
.pd2-betray:hover { box-shadow: 0 0 14px rgba(255,93,115,0.4); }
.pd2-hist { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center; }
.pd2-histtitle { width: 100%; text-align: center; font-size: 0.75rem; color: var(--muted); }
.pd2-hcell { font-size: 0.95rem; padding: 2px 5px; border-radius: 6px; background: rgba(42,48,96,0.5); }
/* RPS plus */
.rps2-charge { display: inline-flex; gap: 3px; margin-top: 3px; }
.rps2-cpip { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.rps2-cpip.on { background: #ffd166; box-shadow: 0 0 6px rgba(255,209,102,0.7); }
.rps2-mv { font-size: 1.6rem; min-width: 56px; min-height: 56px; }
.rps2-cannon { background: linear-gradient(135deg, #ff8f5a, #ff5d73) !important; color: #fff !important; }
.rps2-cannon.disabled { opacity: 0.4; pointer-events: none; filter: grayscale(0.6); }
.rps2-cannote { text-align: center; font-size: 0.8rem; color: var(--muted); margin-top: 8px; }


/* ====================== Cờ Tỷ Phú (tycoon) ====================== */
.tc-root { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 540px; margin: 0 auto; }
.tc-top { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; }
.tc-pinfo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 10px; border-radius: 12px; background: rgba(42,48,96,0.45); border: 1px solid rgba(255,255,255,0.12); }
.tc-pinfo b { font-size: 1.25rem; color: var(--accent); }
.tc-pinfo small { font-size: 0.72rem; color: var(--muted); }
.tc-pinfo.p1 { box-shadow: inset 0 0 0 2px rgba(255,93,115,0.32); }
.tc-pinfo.p2 { box-shadow: inset 0 0 0 2px rgba(77,208,225,0.32); }
.tc-pinfo.active { background: rgba(60,68,120,0.7); box-shadow: 0 0 16px rgba(255,209,102,0.4); }
.tc-mid { display: flex; align-items: center; text-align: center; font-size: 0.74rem; color: var(--muted); padding: 0 6px; }
.tc-board { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 4px; aspect-ratio: 1/1; width: 100%; padding: 6px; border-radius: 14px; background: linear-gradient(160deg, rgba(42,48,96,0.5), rgba(20,26,55,0.6)); border: 1px solid rgba(255,255,255,0.1); }
#tcCenter { display: flex; align-items: center; justify-content: center; border-radius: 10px; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px); }
.tc-logo { text-align: center; font-weight: 800; font-size: 1.5rem; color: rgba(255,209,102,0.35); line-height: 1.25; letter-spacing: 1px; }
.tc-cell { position: relative; border-radius: 7px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px; font-size: 0.5rem; overflow: hidden; text-align: center; transition: box-shadow 0.18s; }
.tc-cell.t-prop { background: linear-gradient(180deg, rgba(255,255,255,0.12) 0 26%, rgba(255,255,255,0.05) 26%); }
.tc-cell.t-go { background: rgba(110,231,183,0.2); }
.tc-cell.t-tax { background: rgba(255,93,115,0.16); }
.tc-cell.t-chance { background: rgba(255,209,102,0.16); }
.tc-cell.t-jail { background: rgba(120,130,170,0.22); }
.tc-cell.own-p1 { box-shadow: inset 0 0 0 2px #ff5d73, 0 0 8px rgba(255,93,115,0.35); }
.tc-cell.own-p2 { box-shadow: inset 0 0 0 2px #4dd0e1, 0 0 8px rgba(77,208,225,0.35); }
.tc-pname { font-weight: 600; line-height: 1.05; }
.tc-pprice { color: var(--accent); font-weight: 700; }
.tc-ic { font-size: 1.1rem; }
.tc-pawns { position: absolute; bottom: 1px; right: 1px; display: flex; gap: 1px; }
.tc-pawn { font-size: 0.85rem; animation: tc-hop 0.4s ease; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
@keyframes tc-hop { 0% { transform: translateY(-10px) scale(0.5); } 60% { transform: translateY(-3px) scale(1.2); } 100% { transform: none; } }
.tc-log { min-height: 48px; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 10px; background: rgba(20,26,55,0.4); border: 1px solid rgba(255,255,255,0.08); font-size: 0.8rem; color: var(--muted); }
.tc-logline:last-child { color: var(--text); }
.tc-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 46px; }
.tc-buy-q { font-size: 0.95rem; text-align: center; }
.tc-buy-btns { display: flex; gap: 10px; }
.tc-wait { color: var(--muted); font-style: italic; padding: 10px; }
@media (max-width: 480px) { .tc-cell { font-size: 0.45rem; } .tc-logo { font-size: 1.1rem; } }


/* ====================== Lan Màu (colorwar) ====================== */
.cw-root { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 460px; margin: 0 auto; }
.cw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cw-pinfo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(42,48,96,0.45); border: 1px solid rgba(255,255,255,0.12); }
.cw-pinfo span { font-weight: 700; }
.cw-pinfo b { font-size: 1.5rem; }
.cw-pinfo.active { background: rgba(60,68,120,0.7); box-shadow: 0 0 16px rgba(255,209,102,0.4); }
.cw-mid { font-size: 0.78rem; color: var(--muted); }
.cw-board { display: grid; gap: 3px; width: 100%; aspect-ratio: 1/1; }
.cw-cell { border-radius: 4px; transition: background 0.3s ease; }
.cw-cell.own-p1 { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85); }
.cw-cell.own-p2 { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.55); }
.cw-palette { display: flex; flex-direction: column; gap: 8px; align-items: center; min-height: 72px; }
.cw-plabel { font-size: 0.85rem; color: var(--muted); }
.cw-swatches { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cw-sw { width: 48px; height: 48px; border-radius: 12px; border: 3px solid rgba(255,255,255,0.25); cursor: pointer; transition: transform 0.08s, box-shadow 0.16s; }
.cw-sw:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.cw-sw:active { transform: scale(0.92); }
.cw-sw.disabled { opacity: 0.25; pointer-events: none; filter: grayscale(0.5); }
.cw-wait, .cw-over { color: var(--muted); font-style: italic; padding: 14px; }

/* ===================== Sim — Tam Giác Cấm ===================== */
.sim-root { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.sim-hud { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; max-width: 420px; }
.sim-side { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px; border-radius: 12px; background: rgba(255,255,255,0.05); min-width: 92px; transition: box-shadow 0.2s, transform 0.2s; }
.sim-side span { font-size: 0.85rem; color: var(--muted); }
.sim-side b { font-size: 1.35rem; font-weight: 900; }
.sim-side.p1.active { box-shadow: 0 0 0 2px var(--p1), 0 4px 16px rgba(255,93,115,0.35); transform: translateY(-2px); }
.sim-side.p2.active { box-shadow: 0 0 0 2px var(--p2), 0 4px 16px rgba(61,169,252,0.35); transform: translateY(-2px); }
.sim-mid { font-size: 1.6rem; }
.sim-stage { width: 100%; max-width: 420px; aspect-ratio: 1; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.06), rgba(0,0,0,0.18)); border-radius: 18px; padding: 8px; }
.sim-svg { width: 100%; height: 100%; overflow: visible; }
.sim-edge { stroke-width: 1.1; stroke-linecap: round; }
.sim-edge.empty { stroke: rgba(255,255,255,0.14); transition: stroke 0.15s; }
.sim-svg:hover .sim-edge.empty { stroke: rgba(255,255,255,0.2); }
.sim-hit { stroke: transparent; stroke-width: 6; cursor: pointer; }
.sim-hit:hover + .sim-edge, .sim-edge.empty:hover { stroke: rgba(255,255,255,0.5); }
.sim-edge.owned { stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 3px currentColor); }
.sim-edge.owned.last { stroke-width: 3.4; animation: simPop 0.35s ease; }
.sim-edge.owned.lose { animation: simFlash 0.7s ease infinite alternate; stroke-width: 3.6; }
@keyframes simPop { from { opacity: 0.2; } to { opacity: 1; } }
@keyframes simFlash { from { filter: drop-shadow(0 0 2px #fff); } to { filter: drop-shadow(0 0 8px #fff); } }
.sim-dot { fill: #f4f7ff; stroke: rgba(0,0,0,0.4); stroke-width: 0.6; }

/* ===================== Cờ Vua Mini 5×5 ===================== */
.mc-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.mc-hud { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 380px; }
.mc-side { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,0.05); font-size: 0.86rem; color: var(--muted); transition: box-shadow 0.2s, transform 0.2s; }
.mc-side.p1.active { box-shadow: 0 0 0 2px var(--p1); transform: translateY(-2px); }
.mc-side.p2.active { box-shadow: 0 0 0 2px var(--p2); transform: translateY(-2px); }
.mc-chk { font-style: normal; background: #ff4d4d; color: #fff; font-size: 0.7rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; animation: mcChk 0.6s ease infinite alternate; box-shadow: 0 0 10px rgba(255,77,77,0.6); }
@keyframes mcChk { from { opacity: 0.6; } to { opacity: 1; } }
.mc-mid { font-size: 1.4rem; }
.mc-board {
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr);
  width: 100%; max-width: 360px; aspect-ratio: 1;
  border-radius: 10px; overflow: hidden; position: relative;
  border: 9px solid #3a2417;
  border-image: linear-gradient(135deg, #5a3a22, #2c1a0f) 1;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
}
.mc-cell { position: relative; min-width: 0; min-height: 0; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: filter 0.12s; }
.mc-cell.light { background: linear-gradient(135deg, #f3e3c3, #e6cfa6); }
.mc-cell.dark { background: linear-gradient(135deg, #b78a62, #9c6f49); }
.mc-cell::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); pointer-events: none; }
.mc-cell:not(:disabled):hover { filter: brightness(1.08); }
.mc-cell:disabled { cursor: default; }
.mc-pc {
  font-size: clamp(1.7rem, 9.5vw, 2.8rem); line-height: 1; user-select: none; position: relative; z-index: 3;
  transition: transform 0.12s; -webkit-font-smoothing: antialiased;
}
.mc-pc.w { color: #fbfbfd; -webkit-text-stroke: 1.4px #2b2b33; paint-order: stroke fill; filter: drop-shadow(0 3px 2px rgba(0,0,0,0.5)); }
.mc-pc.b { color: #20222c; -webkit-text-stroke: 1px #05060a; paint-order: stroke fill; filter: drop-shadow(0 3px 2px rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(255,255,255,0.25)); }
/* ô đang chọn: viền sáng + nhấc quân lên */
.mc-cell.sel { box-shadow: inset 0 0 0 3px #f0b429, inset 0 0 18px rgba(240,180,41,0.5); }
.mc-cell.sel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, rgba(240,180,41,0.35), transparent 65%); }
.mc-cell.sel .mc-pc { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 7px 5px rgba(0,0,0,0.55)); }
/* nước đi gần nhất: ô xuất phát mờ, ô đi tới đậm + viền */
.mc-cell.mc-lastfrom::after { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); background: rgba(240,180,41,0.18); }
.mc-cell.mc-lastto::after { box-shadow: inset 0 0 0 3px rgba(240,180,41,0.85); background: rgba(240,180,41,0.22); }
.mc-cell.mc-lastto .mc-pc { animation: mcDrop 0.26s cubic-bezier(0.3,1.5,0.5,1); }
@keyframes mcDrop { 0% { transform: translateY(-22%) scale(1.12); } 60% { transform: translateY(3%) scale(0.97); } 100% { transform: none; } }
/* ô có thể đi tới */
.mc-cell.move::before { content: ""; position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(46,160,67,0.85), rgba(46,160,67,0.4)); box-shadow: 0 0 8px rgba(46,160,67,0.6); z-index: 2; animation: mcDotPulse 1.2s ease-in-out infinite; }
@keyframes mcDotPulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.25); opacity: 1; } }
.mc-cell.capture::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 4px solid rgba(255,77,77,0.85); box-sizing: border-box; z-index: 2; box-shadow: 0 0 10px rgba(255,77,77,0.5), inset 0 0 8px rgba(255,77,77,0.4); animation: mcCapPulse 0.9s ease-in-out infinite; }
@keyframes mcCapPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* vua bị chiếu */
.mc-cell.incheck::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,60,60,0.75), rgba(255,60,60,0.15) 70%); z-index: 1; animation: mcCheck 0.75s ease-in-out infinite; }
@keyframes mcCheck { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ===================== Mầm Cây (Sprouts) ===================== */
.spr-root { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.spr-hud { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; max-width: 420px; }
.spr-side { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 12px; background: rgba(255,255,255,0.05); font-size: 0.86rem; color: var(--muted); transition: box-shadow 0.2s, transform 0.2s; }
.spr-side.p1.active { box-shadow: 0 0 0 2px var(--p1); transform: translateY(-2px); }
.spr-side.p2.active { box-shadow: 0 0 0 2px var(--p2); transform: translateY(-2px); }
.spr-mid { font-size: 1.5rem; }
.spr-stage { width: 100%; max-width: 420px; aspect-ratio: 1; background: radial-gradient(circle at 50% 45%, rgba(120,200,140,0.1), rgba(0,0,0,0.18)); border-radius: 18px; padding: 8px; }
.spr-svg { width: 100%; height: 100%; overflow: visible; }
.spr-seg { stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 2px currentColor); }
.spr-dot { fill: #d7f5dd; stroke: #2e7d46; stroke-width: 0.7; cursor: pointer; transition: r 0.12s, fill 0.12s; }
.spr-dot.dead { fill: rgba(255,255,255,0.18); stroke: rgba(255,255,255,0.25); cursor: default; }
.spr-dot.sel { fill: #ffe27a; stroke: #f0b429; stroke-width: 1.1; filter: drop-shadow(0 0 4px #f0b429); }
.spr-hit { fill: transparent; cursor: pointer; }

/* 20 Câu Hỏi — nút sửa câu trả lời vừa rồi */
.tq-fix { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tq-fixtoggle { background: none; border: 1px dashed rgba(255,255,255,0.25); color: var(--muted); font-size: 0.82rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: color 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.tq-fixtoggle:hover { color: var(--text); border-color: rgba(255,255,255,0.5); }
.tq-fixcur { font-size: 1rem; }
.tq-fixbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tq-fixbtns[hidden] { display: none; }
.tq-fixbtns .btn { padding: 8px 12px; font-size: 0.86rem; }

/* 20 Câu Hỏi — chọn vai (trao quyền tự do) */
.tq-role-pick { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0; }
.tq-rolebtns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tq-rolebtns .btn { padding: 14px 20px; font-size: 0.95rem; }

/* ===================== Co-op: Đẩy Thùng Đôi & Mê Cung Hợp Sức ===================== */
.bx-root, .mz-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.bx-hud, .mz-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; width: 100%; max-width: 580px; font-size: 0.9rem; }
.bx-hud .bx-info, .mz-hud .mz-info { color: var(--muted); }
.bx-hud .bx-info b, .mz-hud .mz-info b { color: var(--text); }
.bx-stage, .mz-stage { width: 100%; display: flex; justify-content: center; }

/* Bàn chơi: lớp ô tĩnh + lớp thực thể trượt mượt + lớp overlay */
.bx-board, .mz-board {
  position: relative; width: min(520px, 94vw);
  border-radius: 14px; padding: 8px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.06);
}
.bx-board { background: linear-gradient(160deg, #3a2a1c, #20160d); }       /* kho gỗ */
.mz-board { background: linear-gradient(160deg, #1c2440, #0c1020); }       /* hầm đá */
.bx-tiles, .mz-tiles { position: absolute; inset: 8px; display: grid; gap: 0; border-radius: 8px; overflow: hidden; }
.bx-ents, .mz-ents { position: absolute; inset: 8px; pointer-events: none; z-index: 3; }

.bx-cell, .mz-cell { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); }
.bx-floor { background: linear-gradient(135deg, #6b4f33, #5a4128); }
.mz-floor { background: linear-gradient(135deg, #243056, #1b2444); }
.bx-wall { background: linear-gradient(160deg, #2b1d10, #18100a); box-shadow: inset 0 2px 2px rgba(255,255,255,0.06), inset 0 -3px 5px rgba(0,0,0,0.5); }
.mz-wall { background: linear-gradient(160deg, #0e1428, #070a16); box-shadow: inset 0 2px 2px rgba(255,255,255,0.05), inset 0 -3px 5px rgba(0,0,0,0.6); }

/* Đích (Sokoban) */
.bx-goal::after { content: ""; position: absolute; width: 46%; height: 46%; border-radius: 50%; border: 3px dashed rgba(110,231,183,0.85); box-sizing: border-box; }
.bx-goal { background: radial-gradient(circle at 50% 50%, rgba(110,231,183,0.22), transparent 65%), linear-gradient(135deg, #6b4f33, #5a4128); }
.bx-goal.bx-goal-on::after { border-style: solid; border-color: #6ee7b7; box-shadow: 0 0 10px rgba(110,231,183,0.6); animation: bxGoalPop 0.4s ease; }
@keyframes bxGoalPop { 0% { transform: scale(0.5); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Nút sàn */
.bx-grp-a, .mz-grp-a { --gc: #f0b429; }
.bx-grp-b, .mz-grp-b { --gc: #c084fc; }
.bx-grp-c, .mz-grp-c { --gc: #38bdf8; }
.bx-plate, .mz-plate { box-shadow: inset 0 0 0 3px var(--gc); }
.bx-plate::before, .mz-plate::before { content: ""; position: absolute; width: 44%; height: 44%; border-radius: 50%; background: var(--gc); opacity: 0.35; transition: transform 0.12s, opacity 0.12s; }
.bx-plate.bx-pressed::before, .mz-plate.mz-pressed::before { opacity: 0.95; transform: scale(1.25); box-shadow: 0 0 12px var(--gc); animation: platePulse 1.1s ease-in-out infinite; }
@keyframes platePulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }

/* Cửa giữ (door) & cổng gạt (gate) */
.bx-door, .mz-door, .mz-gate { background-color: #2a1c12; }
.mz-gate, .mz-door { background-color: #161c33; }
.bx-closed, .mz-closed { background-image: repeating-linear-gradient(90deg, var(--gc), var(--gc) 4px, rgba(0,0,0,0.55) 4px, rgba(0,0,0,0.55) 9px); box-shadow: inset 0 0 0 2px var(--gc), inset 0 0 10px rgba(0,0,0,0.5); }
.bx-open, .mz-open { background-image: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12); opacity: 0.85; }
.bx-open::after, .mz-open::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 14px var(--gc); opacity: 0.4; }

/* Cần gạt */
.mz-lever { background: linear-gradient(135deg, #303d66, #1d2748); }
.mz-lever .mz-lv { position: relative; z-index: 2; transition: transform 0.15s; filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)); }
.mz-lever.mz-lv-on { box-shadow: inset 0 0 0 2px #6ee7b7; }
.mz-lever.mz-lv-on .mz-lv { transform: scaleX(-1); filter: drop-shadow(0 0 6px #6ee7b7); }

/* Cửa thoát (maze) */
.mz-exit1 { box-shadow: inset 0 0 0 3px #ff5d73; background: radial-gradient(circle, rgba(255,93,115,0.3), transparent 66%), linear-gradient(135deg, #243056, #1b2444); }
.mz-exit2 { box-shadow: inset 0 0 0 3px #4dd0e1; background: radial-gradient(circle, rgba(77,208,225,0.3), transparent 66%), linear-gradient(135deg, #243056, #1b2444); }
.mz-ex { position: relative; z-index: 2; font-size: 0.62em; opacity: 0.55; }

/* Thực thể trượt mượt */
.bx-ent, .mz-ent { position: absolute; display: flex; align-items: center; justify-content: center; font-size: clamp(0.95rem, 4.6vw, 1.85rem); transition: left 0.13s ease, top 0.13s ease; will-change: left, top; }
.bx-box { z-index: 1; }
.bx-box-face { filter: drop-shadow(0 3px 3px rgba(0,0,0,0.5)); transition: transform 0.12s; }
.bx-box.bx-on .bx-box-face { filter: drop-shadow(0 0 8px #6ee7b7); transform: scale(1.06); }
.bx-box.bx-pushed .bx-box-face { animation: bxPush 0.18s ease; }
@keyframes bxPush { 0% { transform: scale(0.84); } 100% { transform: scale(1); } }
.bx-p, .mz-p { z-index: 2; }
.bx-p::before, .mz-p::before { content: ""; position: absolute; width: 78%; height: 78%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 55%, transparent), transparent 70%); }
.bx-p1 .bx-p-face, .mz-p1 .mz-p-face { filter: drop-shadow(0 0 4px #ff5d73); }
.bx-p2 .bx-p-face, .mz-p2 .mz-p-face { filter: drop-shadow(0 0 4px #4dd0e1); }
.bx-p-face, .mz-p-face { position: relative; z-index: 2; transition: transform 0.12s; }
.bx-p .bx-p-face { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.bx-bot { width: 96%; height: 96%; overflow: visible; animation: bxIdle 2.2s ease-in-out infinite; transform-origin: 50% 90%; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4)); }
.bx-p2 .bx-bot { animation-delay: 0.5s; }
.bx-bot .bx-led { animation: bxLed 1.1s ease-in-out infinite; }
@keyframes bxLed { 0%,100% { opacity: 1; filter: drop-shadow(0 0 3px #ffe066); } 50% { opacity: 0.35; filter: none; } }
@keyframes bxIdle { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-6%) scaleY(1.02); } }
.mz-p.mz-at-exit::before { animation: platePulse 0.8s ease-in-out infinite; }
.bx-bump, .mz-bump { animation: coopBump 0.18s ease; }
@keyframes coopBump { 0% { transform: translate(0,0); } 50% { transform: scale(0.9); } 100% { transform: translate(0,0); } }

/* Overlay: banner vào màn / qua màn + confetti */
.bx-overlay, .mz-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.bx-overlay.show, .mz-overlay.show { opacity: 1; }
.bx-banner, .mz-banner { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 26px; border-radius: 14px; background: rgba(8,12,28,0.82); box-shadow: 0 8px 26px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.12); text-align: center; }
.bx-banner small, .mz-banner small { font-size: 0.74rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.bx-banner b, .mz-banner b { font-size: 1.15rem; }
.bx-banner-intro, .mz-banner-intro { animation: coopBannerIn 0.3s ease; }
.bx-banner-clear, .mz-banner-clear, .bx-banner-win, .mz-banner-win { font-size: 1.2rem; font-weight: 900; color: #6ee7b7; animation: coopBannerPop 0.4s cubic-bezier(0.3,1.6,0.5,1); }
@keyframes coopBannerIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes coopBannerPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.bx-confetti, .mz-confetti { position: absolute; inset: 0; overflow: hidden; }
.bx-conf, .mz-conf { position: absolute; top: -8%; width: 8px; height: 12px; border-radius: 2px; animation: coopConf 1.3s linear forwards; }
@keyframes coopConf { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(560px) rotate(540deg); opacity: 0; } }

/* D-pad */
.bx-pads, .mz-pads { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.bx-dpad, .mz-dpad { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bx-dpad-lbl, .mz-dpad-lbl { font-size: 0.8rem; font-weight: 800; color: var(--bx-pc, var(--mz-pc, #fff)); }
.bx-dpad-grid, .mz-dpad-grid { display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(2, 42px); gap: 5px; grid-template-areas: ". up ." "left down right"; }
.bx-db, .mz-db { border: 1px solid color-mix(in srgb, var(--bx-pc, var(--mz-pc, #fff)) 40%, transparent); background: rgba(255,255,255,0.06); color: var(--text); border-radius: 10px; font-size: 1rem; cursor: pointer; padding: 0; transition: background 0.1s, transform 0.06s; }
.bx-db:disabled, .mz-db:disabled { opacity: 0.3; cursor: default; }
.bx-db[data-dir="up"], .mz-db[data-dir="up"] { grid-area: up; }
.bx-db[data-dir="left"], .mz-db[data-dir="left"] { grid-area: left; }
.bx-db[data-dir="down"], .mz-db[data-dir="down"] { grid-area: down; }
.bx-db[data-dir="right"], .mz-db[data-dir="right"] { grid-area: right; }
.bx-db:not(:disabled):active, .mz-db:not(:disabled):active { background: var(--bx-pc, var(--mz-pc, #4dd0e1)); color: #07101f; transform: scale(0.9); }


/* ============ Submarine Hunt — hiệu ứng dưới nước nâng cao ============ */
.sh-board-wrap { position: relative; overflow: hidden; box-shadow: var(--shadow), inset 0 0 70px rgba(0,0,0,0.55); }
/* tia sáng / caustics dưới đáy biển */
.sh-board-wrap::before {
  content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    linear-gradient(100deg, transparent 38%, rgba(150,225,255,0.10) 46%, transparent 54%),
    linear-gradient(80deg, transparent 60%, rgba(110,231,183,0.08) 68%, transparent 76%),
    radial-gradient(ellipse 50% 40% at 28% 8%, rgba(120,220,255,0.16), transparent 60%);
  background-size: 220% 220%, 240% 240%, 100% 100%;
  animation: shCaustic 11s ease-in-out infinite alternate;
}
@keyframes shCaustic {
  0% { background-position: 0% 0%, 100% 0%, 0 0; }
  100% { background-position: 30% 18%, 70% 22%, 0 0; }
}
/* bọt khí nổi lên */
.sh-board-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(circle 3px at 18% 100%, rgba(255,255,255,0.55), transparent 70%),
    radial-gradient(circle 2px at 42% 100%, rgba(255,255,255,0.45), transparent 70%),
    radial-gradient(circle 4px at 66% 100%, rgba(255,255,255,0.5), transparent 70%),
    radial-gradient(circle 2px at 84% 100%, rgba(255,255,255,0.4), transparent 70%),
    radial-gradient(circle 3px at 30% 100%, rgba(255,255,255,0.4), transparent 70%);
  background-repeat: no-repeat;
  animation: shBubbles 8s linear infinite;
}
@keyframes shBubbles {
  0% { transform: translateY(6%); opacity: 0; }
  12% { opacity: 0.55; }
  100% { transform: translateY(-96%); opacity: 0; }
}
.sh-grid { position: relative; z-index: 1; }

/* hover: phát quang gợn nước */
.sh-cell:not(:disabled):hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 0 12px rgba(77,208,225,0.45); }

/* đá ngầm đung đưa nhẹ */
.sh-reef-ic { animation: shReefSway 4.5s ease-in-out infinite; display: inline-block; }
@keyframes shReefSway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* vạch mặt nước (tuyến thoát) phát sáng + nhấp nháy */
.sh-cell.sh-exit::before { box-shadow: 0 0 9px rgba(110,231,183,0.85); animation: shSurface 2.2s ease-in-out infinite; }
.sh-cell.sh-exit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(110,231,183,0.22), transparent 45%);
  animation: shSurface 2.2s ease-in-out infinite;
}
@keyframes shSurface { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* tàu ngầm: phát xung sonar lan toả + sáng hơn */
.sh-cell.sh-sub { overflow: visible; }
.sh-cell.sh-sub::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24%; height: 24%;
  border-radius: 50%; border: 2px solid rgba(245,197,66,0.55);
  transform: translate(-50%, -50%); pointer-events: none;
  animation: shSonarEmit 2.8s ease-out infinite;
}
@keyframes shSonarEmit {
  0% { width: 24%; height: 24%; opacity: 0.75; }
  100% { width: 175%; height: 175%; opacity: 0; }
}

/* ô đang dò (pending): radar quét xoay */
.sh-cell.sh-mark.sh-pending { overflow: hidden; }
.sh-cell.sh-mark.sh-pending::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(110,231,183,0.6) 38deg, transparent 78deg);
  animation: shRadar 1.05s linear infinite;
}
@keyframes shRadar { to { transform: rotate(360deg); } }

/* kết quả dò: sóng sonar lan (ping) một lần */
.sh-cell.sh-mark.sh-hot, .sh-cell.sh-mark.sh-mid,
.sh-cell.sh-mark.sh-miss, .sh-cell.sh-mark.sh-hit { overflow: visible; }
.sh-cell.sh-mark.sh-hot::after, .sh-cell.sh-mark.sh-mid::after,
.sh-cell.sh-mark.sh-miss::after, .sh-cell.sh-mark.sh-hit::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16%; height: 16%;
  border-radius: 50%; border: 2px solid rgba(255,255,255,0.8);
  transform: translate(-50%, -50%); pointer-events: none; z-index: 4;
  animation: shPing 0.75s ease-out;
}
@keyframes shPing {
  0% { width: 16%; height: 16%; opacity: 0.95; }
  100% { width: 150%; height: 150%; opacity: 0; }
}
/* mìn trúng: chớp nổ + sóng xung kích */
.sh-cell.sh-mark.sh-hit::before {
  content: ""; position: absolute; inset: -10%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,209,102,0.6) 35%, transparent 65%);
  animation: shBlast 0.55s ease-out;
}
@keyframes shBlast { 0% { opacity: 0.95; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.6); } }

/* vùng tiếng ồn / mồi âm: thêm sóng echo nhẹ ở giữa */
.sh-noise-zone, .sh-decoy-zone { position: relative; }
.sh-noise-zone::after, .sh-decoy-zone::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%;
  border-radius: 50%; border: 2px solid currentColor; transform: translate(-50%, -50%);
  pointer-events: none; opacity: 0.5; animation: shZoneEcho 2s ease-out infinite;
}
.sh-noise-zone { color: rgba(255,209,102,0.85); }
.sh-decoy-zone { color: rgba(196,181,253,0.9); }
@keyframes shZoneEcho { 0% { width: 26%; height: 26%; opacity: 0.6; } 100% { width: 120%; height: 120%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sh-board-wrap::before, .sh-board-wrap::after, .sh-cell.sh-sub::after,
  .sh-cell.sh-mark.sh-pending::after, .sh-noise-zone::after, .sh-decoy-zone::after,
  .sh-cell.sh-exit::before, .sh-cell.sh-exit::after, .sh-reef-ic { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-cell.move::before, .mc-cell.capture::before, .mc-cell.incheck::before,
  .mc-cell.mc-lastto .mc-pc, .mc-chk { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pig-die.rolling, .pig-die.landed, .pig-die.bust, .yz-die.rolling { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-coin.flip, .rv-disc.placed, .rv-cell.willflip .rv-coin, .rv-cell.legal::after { animation: none !important; }
  .rv-coin.flip { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mnc-pit.playable, .nim-stone.taking { animation: none !important; }
}
/* Mancala gọn trên màn nhỏ (board px cứng dễ tràn ngang) */
@media (max-width: 560px) {
  .mnc-board { gap: 9px; padding: 12px; border-radius: 20px; }
  .mnc-row { gap: 8px; }
  .mnc-mid { gap: 8px; }
  .mnc-store { width: 56px; min-height: 120px; border-radius: 24px; }
  .mnc-pit { width: 50px; height: 50px; }
  .mnc-pit-num { font-size: 0.78rem; }
}
@media (max-width: 400px) {
  .mnc-board { gap: 6px; padding: 8px; }
  .mnc-row { gap: 5px; }
  .mnc-store { width: 44px; min-height: 100px; }
  .mnc-pit { width: 40px; height: 40px; }
  .mnc-stone { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-gallows.dead { animation: none !important; }
  .hm-part { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nt-timer.low, .nt-word { animation: none !important; }
}

/* Đoán Số — ô số + chấm peg màu cho từng lần đoán */
.bc-digits { display: flex; gap: 4px; flex: 1; letter-spacing: 0; }
.bc-dt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 24px; padding: 0 4px; border-radius: 6px;
  background: linear-gradient(160deg, #2c3656, #1f2742); color: var(--text);
  font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), 0 1px 2px rgba(0,0,0,0.3);
}
.bc-fb { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; max-width: 96px; justify-content: flex-end; }
.bc-peg { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.bc-peg.bull { background: radial-gradient(circle at 35% 30%, #aef0c0, #1f9d57); box-shadow: 0 0 6px rgba(46,160,67,0.7), inset 0 -1px 2px rgba(0,0,0,0.3); }
.bc-peg.cow { background: radial-gradient(circle at 35% 30%, #ffd9a0, #f0a429); box-shadow: 0 0 5px rgba(240,164,41,0.6), inset 0 -1px 2px rgba(0,0,0,0.3); }
.bc-peg.none { background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); }
.bc-guess { animation: bcRowIn 0.25s ease; }
@keyframes bcRowIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.bc-guess.bc-solved {
  background: linear-gradient(160deg, rgba(46,160,67,0.35), rgba(46,160,67,0.12)) !important;
  box-shadow: inset 0 0 0 1px rgba(110,231,183,0.5);
  animation: bcSolved 0.55s ease;
}
.bc-guess.bc-solved .bc-dt { background: linear-gradient(160deg, #6ff0a0, #1f9d57); color: #0f1226; }
@keyframes bcSolved { 0% { transform: scale(0.96); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.bc-key { box-shadow: 0 2px 0 rgba(0,0,0,0.32), inset 0 1px 1px rgba(255,255,255,0.1); transition: transform 0.06s, background 0.1s; }
.bc-key:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,0.32); }
.bc-input:focus { box-shadow: 0 0 14px rgba(255,209,102,0.3); }
@media (prefers-reduced-motion: reduce) {
  .bc-guess, .bc-guess.bc-solved { animation: none !important; }
}

/* ============ Preset theme (đổi cả nền + màu nhấn) ============ */
/* Mỗi preset chỉnh các biến nền + accent; nền body dùng các biến này nên đổi theo. */
body[data-preset] {
  background:
    radial-gradient(900px 500px at 12% -8%, var(--tint-a, rgba(255,93,115,0.16)), transparent 60%),
    radial-gradient(900px 500px at 88% -4%, var(--tint-b, rgba(77,208,225,0.16)), transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, var(--tint-c, rgba(122,140,255,0.12)), transparent 55%),
    linear-gradient(180deg, var(--bg-top, #11142e) 0%, var(--bg) 55%);
  background-attachment: fixed;
}
body[data-preset="ocean"] {
  --bg: #07182a; --bg-top: #0b2233; --bg-soft: #143049; --panel: #122c44; --panel-2: #1a3b58;
  --accent: #38e0d0; --accent-2: #6ef0e0; --grad-accent: linear-gradient(135deg, #38e0d0, #1f9ec0);
  --tint-a: rgba(56,224,208,0.16); --tint-b: rgba(56,160,224,0.16); --tint-c: rgba(40,120,200,0.12);
}
body[data-preset="sunset"] {
  --bg: #1f0f24; --bg-top: #2c1530; --bg-soft: #3a1d3d; --panel: #341a3a; --panel-2: #46264e;
  --accent: #ff8a5c; --accent-2: #ffb27a; --grad-accent: linear-gradient(135deg, #ff8a5c, #ff5d73);
  --tint-a: rgba(255,138,92,0.18); --tint-b: rgba(255,93,115,0.16); --tint-c: rgba(200,80,140,0.13);
}
body[data-preset="forest"] {
  --bg: #0b1f14; --bg-top: #102a1b; --bg-soft: #163a24; --panel: #14331f; --panel-2: #1d4530;
  --accent: #7ee08a; --accent-2: #a7f3b8; --grad-accent: linear-gradient(135deg, #7ee08a, #34a85a);
  --tint-a: rgba(126,224,138,0.15); --tint-b: rgba(77,208,160,0.15); --tint-c: rgba(60,160,90,0.12);
}
body[data-preset="rose"] {
  --bg: #210f18; --bg-top: #2e1422; --bg-soft: #3a1c2c; --panel: #371a28; --panel-2: #4a2436;
  --accent: #ff7aa8; --accent-2: #ffa7c4; --grad-accent: linear-gradient(135deg, #ff7aa8, #e0457f);
  --tint-a: rgba(255,122,168,0.18); --tint-b: rgba(200,90,200,0.14); --tint-c: rgba(160,60,120,0.13);
}
body[data-preset="mono"] {
  --bg: #16181d; --bg-top: #1d2026; --bg-soft: #262a32; --panel: #23262e; --panel-2: #30343e;
  --accent: #c8cdd8; --accent-2: #e6e9f0; --grad-accent: linear-gradient(135deg, #c8cdd8, #9aa0b0);
  --tint-a: rgba(200,205,216,0.10); --tint-b: rgba(150,160,180,0.10); --tint-c: rgba(120,130,150,0.08);
}

.accent-pop {
  position: fixed; top: 70px; right: 16px; z-index: 200;
  display: flex; gap: 10px; flex-wrap: wrap; max-width: 232px;
  padding: 13px; border-radius: 14px;
  background: var(--panel); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--glow);
  animation: accentPopIn 0.16s ease;
}
@keyframes accentPopIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.accent-sw {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 2px 3px rgba(255,255,255,0.4);
  transition: transform 0.1s;
}
.accent-sw:hover { transform: scale(1.14); }
.accent-sw.active { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.4); }
@media (max-width: 480px) { .accent-pop { top: 58px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { .accent-pop { animation: none; } }

/* ===================== 💣 Gỡ Bom Song Phương (defusebomb) ===================== */
.df-root { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 760px; margin: 0 auto;
  border-radius: 18px; padding: 16px; background: linear-gradient(160deg, #1a2138, #10141f);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), 0 16px 40px rgba(0,0,0,0.5); transition: box-shadow 0.3s; }
.df-root.df-boom { box-shadow: inset 0 0 0 2px rgba(230,57,74,0.6), 0 0 40px rgba(230,57,74,0.5); animation: dfShake 0.5s ease; }
.df-root.df-defused { box-shadow: inset 0 0 0 2px rgba(46,160,67,0.6), 0 0 40px rgba(46,160,67,0.45); }
@keyframes dfShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

.df-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.df-timer { font-size: 1.8rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 1px;
  color: #6ee7b7; text-shadow: 0 0 10px rgba(110,231,183,0.5); font-family: var(--font-head); }
.df-timer.low { color: #ff5d73; text-shadow: 0 0 12px rgba(255,93,115,0.7); animation: dfBlink 1s steps(2) infinite; }
@keyframes dfBlink { 50% { opacity: 0.4; } }
.df-serial { font-size: 0.95rem; color: var(--muted); }
.df-serial b { color: var(--text); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.df-strikes { display: flex; gap: 4px; }
.df-x { color: rgba(255,255,255,0.18); font-weight: 900; font-size: 1.2rem; }
.df-x.on { color: #ff5d73; text-shadow: 0 0 8px rgba(255,93,115,0.7); }

.df-role { text-align: center; font-size: 0.9rem; color: var(--muted); padding: 8px 12px;
  background: rgba(255,255,255,0.04); border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); }
.df-flash { text-align: center; font-weight: 800; min-height: 0; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.2s, opacity 0.2s, padding 0.2s; border-radius: 10px; }
.df-flash.show { max-height: 60px; opacity: 1; padding: 8px 12px; }
.df-flash.ok { background: rgba(46,160,67,0.25); color: #aef0c0; }
.df-flash.bad { background: rgba(255,93,115,0.25); color: #ffc1cb; }

.df-cols { display: flex; gap: 16px; align-items: flex-start; }
.df-bomb, .df-manual { flex: 1; min-width: 0; }

/* module dây */
.df-module { background: linear-gradient(160deg, #222a44, #18203a); border-radius: 12px; padding: 12px;
  margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.08); transition: opacity 0.2s, box-shadow 0.2s; }
.df-module.df-active { box-shadow: 0 0 0 2px var(--accent), 0 0 16px rgba(255,209,102,0.3); }
.df-module.df-locked { opacity: 0.45; }
.df-module.df-solved { opacity: 0.7; box-shadow: inset 0 0 0 1px rgba(110,231,183,0.4); }
.df-mod-head { font-weight: 800; font-size: 0.88rem; color: var(--text); margin-bottom: 8px; }
.df-wires { display: flex; flex-direction: column; gap: 6px; }
.df-wire-row { display: flex; align-items: center; gap: 8px; }
.df-wire-no { width: 18px; text-align: center; font-weight: 800; color: var(--muted); font-size: 0.85rem; }
.df-wire { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
  transition: transform 0.08s, box-shadow 0.15s, opacity 0.2s; }
.df-wire:not(:disabled):hover { transform: translateX(2px); box-shadow: 0 0 10px rgba(255,255,255,0.12); }
.df-wire:disabled { cursor: default; }
.df-wire-line { flex: 1; height: 8px; border-radius: 999px; background: var(--wc);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.4), 0 0 8px var(--wc); }
.df-wire-label { font-size: 0.8rem; font-weight: 700; color: var(--text); min-width: 64px; }
.df-wire.df-cut .df-wire-line { background: repeating-linear-gradient(90deg, var(--wc) 0 8px, transparent 8px 16px); opacity: 0.5; }
.df-wire.df-cut { opacity: 0.55; }

/* sổ luật */
.df-manual { background: linear-gradient(160deg, #f5f1e0, #e6dcc0); color: #2a2418; border-radius: 12px;
  padding: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1), 0 6px 16px rgba(0,0,0,0.3); }
.df-manual-title { font-weight: 900; font-size: 1rem; margin-bottom: 6px; font-family: var(--font-head); }
.df-manual-note { font-size: 0.78rem; font-style: italic; color: #6a5f44; margin-bottom: 10px; }
.df-rule { margin-bottom: 12px; }
.df-rule-head { font-weight: 800; font-size: 0.85rem; padding: 3px 8px; background: rgba(0,0,0,0.08);
  border-radius: 6px; display: inline-block; margin-bottom: 4px; }
.df-rule ol { margin: 0; padding-left: 20px; }
.df-rule li { font-size: 0.82rem; line-height: 1.45; margin-bottom: 2px; }

@media (max-width: 600px) {
  .df-cols { flex-direction: column; }
  .df-timer { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .df-root.df-boom { animation: none; }
  .df-timer.low { animation: none; }
}


/* ============ Best-of-N (thể thức nhiều ván, chung máy / đấu máy) ============ */
.bestof-row { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 360px; margin: 0 auto 14px; }
.bestof-row .option-label { font-size: 0.88rem; color: var(--muted); text-align: center; }
.bestof-row .bestof-select { width: 100%; text-align: center; text-align-last: center; }
.match-badge {
  margin: 6px auto 0; padding: 6px 16px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 800; color: var(--text);
  background: var(--grad-accent); box-shadow: 0 3px 10px rgba(0,0,0,0.32);
  letter-spacing: 0.3px;
}
.match-badge.hidden { display: none; }

/* ===================== Siêu Cờ Caro (Ultimate Tic-Tac-Toe) ===================== */
.uttt-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.uttt-hud {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: 460px;
}
.uttt-pinfo {
  display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 12px;
  background: var(--panel); font-weight: 700; color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); transition: box-shadow .2s, transform .2s;
}
.uttt-pinfo.active { box-shadow: 0 0 0 2px var(--accent), 0 6px 16px rgba(0,0,0,0.35); transform: translateY(-1px); }
.uttt-pinfo .uttt-mk { font-size: 1.15em; font-weight: 900; }
.uttt-pinfo.p1 .uttt-mk { color: var(--p1); }
.uttt-pinfo.p2 .uttt-mk { color: var(--p2); }
.uttt-pinfo b { color: var(--accent); }
.uttt-mid {
  font-size: 0.82rem; color: var(--muted); padding: 5px 10px; border-radius: 999px;
  background: var(--panel-2); white-space: nowrap; min-width: 92px; text-align: center;
}
.uttt-big {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  width: min(92vw, 468px); aspect-ratio: 1; padding: 8px; border-radius: 16px;
  background: linear-gradient(160deg, #1b2238, #141a30);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.uttt-sub {
  position: relative; border-radius: 10px; padding: 5px;
  background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: box-shadow .2s, background .2s;
}
.uttt-sub.uttt-active {
  background: rgba(255,209,102,0.12);
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px rgba(255,209,102,0.35);
}
.uttt-subgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; height: 100%; }
.uttt-cell {
  position: relative; aspect-ratio: 1; border: none; border-radius: 5px; cursor: pointer;
  background: linear-gradient(160deg, #232b46, #1a2036); color: var(--text);
  font-weight: 900; font-size: clamp(0.7rem, 2.6vw, 1.05rem); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s; padding: 0;
}
.uttt-cell.c-x { color: var(--p1); }
.uttt-cell.c-o { color: var(--p2); }
.uttt-cell.uttt-playable:hover { background: linear-gradient(160deg, #2e3860, #232b48); transform: translateY(-1px); }
.uttt-cell.uttt-last { box-shadow: inset 0 0 0 2px var(--accent); }
.uttt-cell:disabled { cursor: default; }
.uttt-sub.uttt-decided .uttt-cell { opacity: 0.28; }
.uttt-suboverlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: clamp(2rem, 11vw, 3.4rem); font-weight: 900; pointer-events: none; border-radius: 10px;
}
.uttt-suboverlay.show { display: flex; }
.uttt-suboverlay.ov-x { color: var(--p1); background: rgba(255,93,115,0.16); }
.uttt-suboverlay.ov-o { color: var(--p2); background: rgba(77,208,225,0.16); }
.uttt-suboverlay.ov-draw { color: var(--muted); background: rgba(255,255,255,0.06); }
.uttt-sub.uttt-bigwin { animation: uttt-bigpulse 0.7s ease infinite; }
.uttt-sub.uttt-bigwin .uttt-suboverlay { box-shadow: inset 0 0 0 3px var(--good); }
@keyframes uttt-bigpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (max-width: 560px) {
  .uttt-big { width: 96vw; gap: 5px; padding: 5px; }
  .uttt-sub { padding: 3px; }
}

/* ---------- Cờ Đột Phá (Breakthrough) ---------- */
.bt-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.bt-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; max-width: 540px;
}
.bt-side {
  flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 2px solid transparent; transition: border-color 0.25s, box-shadow 0.25s;
}
.bt-side.p2 { text-align: right; }
.bt-side b { font-size: 0.95rem; opacity: 0.9; }
.bt-side.active { border-color: var(--accent); box-shadow: 0 0 14px rgba(255,209,102,0.28); }
.bt-mid { font-weight: 700; opacity: 0.8; }
.bt-wrap { width: 100%; display: flex; justify-content: center; }
.bt-board {
  display: grid; width: min(94vw, 540px); aspect-ratio: 1/1; grid-auto-rows: 1fr;
  border-radius: 10px; overflow: hidden; border: 6px solid #3a2c1c;
  box-shadow: var(--shadow), 0 10px 26px rgba(0,0,0,0.5);
}
.bt-cell { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bt-cell.l { background: linear-gradient(135deg, #e9d3ad, #dcc196); }
.bt-cell.d { background: linear-gradient(135deg, #b78a56, #a3793f); }
.bt-cell.lastfrom { background-image: linear-gradient(rgba(255,209,102,0.22), rgba(255,209,102,0.22)); }
.bt-cell.lastto { background-image: linear-gradient(rgba(255,209,102,0.36), rgba(255,209,102,0.36)); }
.bt-cell.hint::after {
  content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #b8f5c8, #3fae5a); box-shadow: 0 0 9px rgba(63,174,90,0.7);
}
.bt-cell.hint.cap::after {
  width: 78%; height: 78%; background: none; border-radius: 12%;
  box-shadow: inset 0 0 0 3px rgba(255,93,115,0.85); }
.bt-pawn {
  width: 72%; height: 72%; border-radius: 50%; position: relative;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}
.bt-pawn.p1 { background: radial-gradient(circle at 35% 30%, #ffffff, #cfd4dc); border: 2px solid #aeb4bf; }
.bt-pawn.p2 { background: radial-gradient(circle at 35% 30%, #4a4f5a, #15171e); border: 2px solid #0b0c10; }
.bt-pawn.sel { outline: 4px solid var(--accent); outline-offset: 2px; transform: scale(1.05); }
.bt-pawn.win { animation: kam-win 0.85s ease-in-out infinite; }

/* ---------- Cờ Gánh ---------- */
.cg-root { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.cg-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; max-width: 520px;
}
.cg-side {
  flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 2px solid transparent; transition: border-color 0.25s, box-shadow 0.25s;
}
.cg-side.p2 { text-align: right; }
.cg-side b { font-size: 0.95rem; opacity: 0.9; }
.cg-side.active { border-color: var(--accent); box-shadow: 0 0 14px rgba(255,209,102,0.28); }
.cg-mid { font-weight: 700; opacity: 0.8; }
.cg-wrap {
  position: relative; width: min(92vw, 480px); aspect-ratio: 1/1;
  background: linear-gradient(135deg, #e9d3ad, #d8bd8f);
  border-radius: 12px; border: 6px solid #3a2c1c;
  box-shadow: var(--shadow), 0 10px 26px rgba(0,0,0,0.5);
}
.cg-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cg-line { stroke: #6b4f2e; stroke-width: 0.8; stroke-linecap: round; }
.cg-point {
  position: absolute; transform: translate(-50%, -50%);
  width: 15%; height: 15%; border-radius: 50%; padding: 0; border: none;
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cg-point::before {
  content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%;
  background: #6b4f2e; opacity: 0.55;
}
.cg-point.hint::before {
  width: 46%; height: 46%; background: radial-gradient(circle at 40% 35%, #b8f5c8, #3fae5a);
  opacity: 1; box-shadow: 0 0 9px rgba(63,174,90,0.8);
}
.cg-point.lastfrom::after, .cg-point.lastto::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255,209,102,0.7);
}
.cg-pawn {
  position: relative; width: 84%; height: 84%; border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.45); z-index: 1;
}
.cg-pawn.p1 { background: radial-gradient(circle at 35% 30%, #ff8a8a, #d63b3b); border: 2px solid #a52121; }
.cg-pawn.p2 { background: radial-gradient(circle at 35% 30%, #8ab6ff, #2f6fd6); border: 2px solid #1f4fa0; }
.cg-pawn.sel { outline: 3px solid var(--accent); outline-offset: 2px; transform: scale(1.08); }
.cg-pawn.flip { animation: kam-win 0.8s ease-in-out 2; }