:root {
  --bg: #0a0c14;
  --bg2: #121628;
  --glass: rgba(255, 255, 255, .055);
  --glass2: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .10);
  --text: #eef0f6;
  --muted: #9aa3b8;
  --gold: #f0c96b;
  --gold2: #b8862e;
  --red: #e5484d;
  --green: #3ccf8e;
  --ad-h: 0px;
  /* Capacitor 8 trên Android cấp --safe-area-inset-*, trình duyệt / iOS dùng env() */
  --safe-t: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-b: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(190, 35, 45, .28), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(210, 160, 60, .18), transparent 60%),
    linear-gradient(180deg, #0c0f1c, var(--bg));
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

#app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Ô quảng cáo ---------- */
.ad-slot { flex: 0 0 auto; height: 0; overflow: hidden; }
body.ad-top #adTop, body.ad-bottom #adBottom { height: var(--ad-h); }
body.ad-placeholder .ad-slot {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35);
}
body.ad-placeholder.ad-top #adTop, body.ad-placeholder.ad-bottom #adBottom {
  margin: 4px 12px; border-radius: 8px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, rgba(255,255,255,.07) 10px 20px);
  border: 1px dashed rgba(255,255,255,.18);
}

.screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Sảnh ---------- */
#home { padding: 14px 16px 12px; gap: 12px; overflow-y: auto; }
.hero { text-align: center; padding: 10px 0 2px; }
.hero-piece {
  width: 92px; height: 92px; margin: 0 auto 10px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff6dc, #efd29a 55%, #c99a55);
  box-shadow: 0 0 0 3px rgba(240, 201, 107, .35), 0 10px 30px rgba(229, 72, 77, .35), 0 0 60px rgba(240, 201, 107, .25), inset 0 -6px 10px rgba(120, 70, 20, .35);
}
.hero-piece span {
  width: 74px; height: 74px; border-radius: 50%; border: 2.5px solid #b8141c;
  display: grid; place-items: center; font: 700 46px QuanCo, serif; color: #b8141c;
}
.hero h1 {
  margin: 0; font-weight: 800; font-size: 30px; letter-spacing: .14em;
  background: linear-gradient(180deg, #fff3cf, var(--gold) 55%, var(--gold2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 12px rgba(240, 201, 107, .35));
}
.tag { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.glass {
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.profile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; }
.profile input {
  width: 100%; background: transparent; border: 0; outline: 0; color: var(--text);
  font: 600 16px 'Be Vietnam Pro', sans-serif; padding: 2px 0; border-bottom: 1px dashed transparent;
}
.profile input:focus { border-bottom-color: var(--gold); }
.pinfo { flex: 1; min-width: 0; }
.online-dot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.online-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

.avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font: 700 22px QuanCo, serif;
  background: radial-gradient(circle at 35% 30%, #fff6dc, #e9c98c 60%, #b98a48);
  box-shadow: inset 0 -3px 6px rgba(110, 60, 20, .4), 0 4px 12px rgba(0, 0, 0, .4);
}
.avatar.red { color: #b8141c; }
.avatar.black { color: #1c1c1c; }

.card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px; border-radius: 18px; width: 100%;
  transition: transform .12s ease;
}
.card:active { transform: scale(.985); }
.card.col { flex-direction: column; align-items: stretch; gap: 10px; }
.card .row { display: flex; align-items: center; gap: 14px; }
.card.primary {
  background: linear-gradient(135deg, #f7d988, #d9a441 55%, #a8721f);
  color: #2a1a05;
  box-shadow: 0 12px 34px rgba(217, 164, 65, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.card-ic {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px;
  background: rgba(0, 0, 0, .18);
}
.card-ic.soft { background: rgba(255, 255, 255, .07); }
.card-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.card-tx b { font-size: 17px; }
.card-tx span { font-size: 12.5px; opacity: .75; }
.card-go { font-size: 28px; opacity: .6; }

.seg { display: flex; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.seg button { flex: 1; padding: 8px 0; border-radius: 9px; font-size: 14px; color: var(--muted); font-weight: 600; }
.seg button.on { background: linear-gradient(180deg, rgba(240, 201, 107, .3), rgba(240, 201, 107, .12)); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(240, 201, 107, .35); }

.btn { padding: 12px 16px; border-radius: 14px; font-weight: 700; font-size: 15px; }
.btn.gold { background: linear-gradient(180deg, #f7d988, #c99130); color: #2a1a05; box-shadow: 0 8px 22px rgba(217, 164, 65, .3); }
.btn.ghost { background: rgba(255, 255, 255, .07); border: 1px solid var(--line); }
.btn.danger { background: linear-gradient(180deg, #f06a6e, #b8232a); color: #fff; }

/* ---------- Ván cờ ---------- */
#play { padding: 0 10px 8px; gap: 6px; }
.topbar { display: flex; align-items: center; height: 46px; gap: 6px; }
.mode-title { flex: 1; text-align: center; font-weight: 700; font-size: 15px; color: var(--muted); }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; font-size: 22px; background: var(--glass); border: 1px solid var(--line); }

.pbar {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line);
  transition: box-shadow .25s, border-color .25s;
}
.pbar.turn { border-color: rgba(240, 201, 107, .55); box-shadow: 0 0 0 1px rgba(240, 201, 107, .25), 0 0 22px rgba(240, 201, 107, .18); }
.pbar .avatar { width: 34px; height: 34px; font-size: 19px; }
/* thanh đối thủ lúc đang chờ ghép trận */
.avatar.searching {
  background: none; box-shadow: none;
  border: 3px solid rgba(240, 201, 107, .18); border-top-color: var(--gold); animation: spin 1s linear infinite;
}
.avatar.bot { font-size: 20px; background: radial-gradient(circle at 35% 30%, #d7e3ff, #7f93c9 60%, #47578a); }
.pbar.waiting { border-style: dashed; border-color: rgba(240, 201, 107, .35); }
.pbar.waiting .pname { color: var(--gold); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }
.pmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pname { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psub { font-size: 11.5px; color: var(--muted); }
.caps { display: flex; flex-wrap: wrap; gap: 1px; min-height: 0; }
.caps i {
  font: normal 700 11px QuanCo, serif; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; background: #ecd3a0; box-shadow: inset 0 -1px 2px rgba(0,0,0,.3);
}
.caps i.r { color: #b8141c; } .caps i.b { color: #1c1c1c; }
.clock {
  font: 700 18px 'Be Vietnam Pro', monospace; font-variant-numeric: tabular-nums;
  padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .35); color: var(--muted); min-width: 74px; text-align: center;
}
.pbar.turn .clock { color: #1b1203; background: linear-gradient(180deg, #f7d988, #d19a36); }
.clock.low { color: #fff !important; background: linear-gradient(180deg, #f06a6e, #b8232a) !important; }
.clock.off { visibility: hidden; }

/* bàn cờ giữ đúng tỉ lệ, cụm [thanh trên – bàn – thanh dưới] nằm giữa khoảng trống */
.board-wrap { position: relative; flex: 0 1 auto; width: 100%; aspect-ratio: 9.9 / 10.9; min-height: 0; }
#barTop { margin-top: auto; }
#barBottom { margin-bottom: auto; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.toast {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9);
  padding: 10px 18px; border-radius: 14px; font-weight: 800; font-size: 20px; letter-spacing: .04em;
  background: rgba(10, 12, 20, .82); border: 1px solid rgba(240, 201, 107, .45); color: var(--gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast.red { color: #ff8a8e; border-color: rgba(229, 72, 77, .6); }

.tools { display: flex; gap: 4px; }
.tools button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px;
  border-radius: 12px; font-size: 10.5px; color: var(--muted);
}
.tools button i { font-style: normal; font-size: 18px; color: var(--text); }
.tools button:active { background: var(--glass2); }
.tools button:disabled { opacity: .3; }

/* ---------- Hộp thoại ---------- */
.sheet-bg {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(3, 4, 8, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.sheet {
  width: 100%; max-width: 560px; border-radius: 22px 22px 0 0; padding: 18px 16px calc(16px + var(--safe-b));
  background: linear-gradient(180deg, #1a1f36, #10131f); animation: up .22s ease;
  max-height: 80dvh; overflow-y: auto;
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet h2 { margin: 0 0 4px; font-size: 22px; text-align: center; }
.sheet p { margin: 0 0 14px; text-align: center; color: var(--muted); }
.sheet .acts { display: flex; gap: 10px; }
.sheet .acts .btn { flex: 1; }
.result-ic { font-size: 54px; text-align: center; filter: drop-shadow(0 6px 20px rgba(240, 201, 107, .45)); }
.delta { text-align: center; font-weight: 800; font-size: 18px; margin-bottom: 14px; }
.delta.up { color: var(--green); } .delta.down { color: var(--red); }
.spinner {
  width: 54px; height: 54px; margin: 6px auto 14px; border-radius: 50%;
  border: 4px solid rgba(240, 201, 107, .15); border-top-color: var(--gold); animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.movelist { display: grid; grid-template-columns: 36px 1fr 1fr; gap: 4px 8px; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.movelist span:nth-child(3n+1) { color: var(--muted); }
.movelist .r { color: #ff8a8e; } .movelist .b { color: #d6dae6; }
.phrases { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pbar { position: relative; }
.bubble {
  position: absolute; left: 58%; top: 50%; transform: translate(-50%, -50%); padding: 8px 14px; border-radius: 14px;
  background: #fff7e0; color: #2a1a05; font-weight: 600; font-size: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.4);
  animation: pop 2.6s ease forwards; pointer-events: none; white-space: nowrap; z-index: 5;
}
@keyframes pop { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
.bubble.big { font-size: 34px; padding: 2px 12px; background: rgba(255, 247, 224, .95); animation: popbig 2.6s ease forwards; }
@keyframes popbig {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  22%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}
.emojis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 12px; }
.emojis button { font-size: 28px; padding: 6px 0; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.emojis button:active { transform: scale(.9); background: rgba(240, 201, 107, .2); }