:root {
  --bg: #f6f1e7;
  --card: #ffffff;
  --ink: #2b2b2b;
  --muted: #7a7266;
  --line: #ddd3c2;
  --accent: #c62828;
  --ok: #2e7d32;
  --board: #e7dcc6;
  --tile: #fffdf8;
  --center: #f3ead8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

h1 { text-align: center; margin: 24px 0 4px; font-size: 32px; }
h2 { font-size: 17px; margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 14px; margin: 14px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sub { text-align: center; color: var(--muted); margin: 0 0 24px; }
.hint { color: var(--muted); font-size: 13px; }
.center { text-align: center; }

button {
  font: inherit;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
button:active:not(:disabled) { transform: translateY(1px); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.ok { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.block { width: 100%; }
button.mini { padding: 4px 8px; font-size: 12px; border-radius: 7px; }

input, select {
  font: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  width: 100%;
}

.field { display: block; margin-bottom: 12px; font-weight: 600; }
.field input { margin-top: 6px; font-weight: normal; }
.row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.row > * { flex: 1; }
.row.small button { font-size: 13px; padding: 8px; }
.or { text-align: center; color: var(--muted); margin: 20px 0 4px; font-size: 13px; }
.pill { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: normal; }

.screen { max-width: 520px; margin: 0 auto; padding: 16px; }

/* ── Lobby ── */
.roomcode { text-align: center; color: var(--muted); margin-top: 8px; }
.roomcode b { display: block; font-size: 56px; letter-spacing: .15em; color: var(--accent); }

.plist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.plist li {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px;
}
.plist li.cur { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.plist li.out { opacity: .5; }
.plist .name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .money { font-variant-numeric: tabular-nums; font-weight: 700; }
.plist .tags { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.skill {
  text-align: left; padding: 10px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.skill .title { font-weight: 700; }
.skill .when { font-size: 11px; color: var(--muted); }
.skill .eff { font-size: 12px; }
.skill.sel { border: 2px solid var(--accent); background: #fff3f1; }

/* ── Bàn cờ ── */
#game.screen { max-width: 1200px; padding: 8px; }

#board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: min(calc(100vw - 16px), 640px);
  aspect-ratio: 1;
  gap: 2px;
  margin: 0 auto;
  padding: 2px;
  background: var(--board);
  border-radius: 10px;
  container-type: inline-size;
}

.tile {
  position: relative;
  min-width: 0; min-height: 0;
  background: var(--tile);
  border: 2px solid #c9bfae;
  border-radius: 4px;
  overflow: hidden;
  padding: 1px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center;
  font-size: clamp(6.5px, 1.85cqw, 15px);
  line-height: 1.1;
  cursor: pointer;
}
.tile.prop { border-width: 3px; }
.tile.mortgaged > :not(.t-tokens) { opacity: .35; }
.tile .t-icon { font-size: 1.5em; line-height: 1.2; }
.tile .t-name { font-weight: 600; overflow-wrap: anywhere; }
.tile .t-price { color: var(--muted); }
.tile .t-own {
  align-self: stretch; margin: -1px -1px 1px;
  display: flex; align-items: center; justify-content: center; gap: .15em; white-space: nowrap;
  background: var(--owner); color: #fff; font-weight: 800; font-size: 1.05em; line-height: 1.35;
  border-radius: 2px 2px 0 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
.tile .t-own:empty { display: none; }
.tile .t-own .o-ava { font-size: 1.15em; filter: drop-shadow(0 0 1px #fff); }
.tile .t-own .o-house { background: #fff; color: var(--ink); border-radius: 4px; padding: 0 .2em; font-size: .95em; }
.tile.owned .t-icon { display: none; }
.tile .t-tokens {
  position: absolute; left: 1px; right: 1px; bottom: 1px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1px;
  pointer-events: none;
}
.tile .tok {
  width: clamp(7px, 2.2vw, 14px); height: clamp(7px, 2.2vw, 14px);
  border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

#center {
  grid-row: 2 / 9; grid-column: 2 / 9;
  background: var(--center);
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(4px, 1.4cqw, 14px);
  padding: clamp(4px, 2cqw, 20px);
  text-align: center;
  min-width: 0; min-height: 0; overflow: auto;
}
#turnLine { font-weight: 700; font-size: clamp(13px, 3.6cqw, 26px); display: flex; align-items: center; gap: 6px; }
#dice { display: flex; gap: clamp(8px, 3cqw, 24px); justify-content: center; min-height: clamp(36px, 11cqw, 84px); perspective: 400px; }
#phaseLine { font-size: clamp(12px, 3cqw, 19px); color: var(--muted); }
#lastLog { font-size: clamp(11px, 2.6cqw, 17px); color: var(--muted); max-width: 100%; }

.actions, #actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#actions button { font-size: clamp(13px, 3.4cqw, 20px); padding: clamp(7px, 1.8cqw, 14px) clamp(10px, 2.8cqw, 24px); }

.scores { width: 100%; border-collapse: collapse; font-size: clamp(11px, 2.8cqw, 17px); background: #fff; border-radius: 8px; overflow: hidden; }
.scores td, .scores th { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.scores td:first-child, .scores th:first-child { text-align: left; }

/* ── Bảng điều khiển ── */
#panel { margin-top: 10px; }

.mycards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.mycards .skill { padding: 8px; }
.mycards .skill.used { opacity: .4; text-decoration: line-through; }
.mycards .skill.passive { background: #f5f7ff; }

.prop-row {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-left-width: 6px;
  border-radius: 8px; padding: 6px 8px; margin-bottom: 4px;
}
.prop-row .pname { flex: 1; min-width: 0; }
.prop-row .pname small { display: block; color: var(--muted); font-size: 11px; }
.prop-row.mortgaged .pname { opacity: .5; }

#log { list-style: none; padding: 0; margin: 0; max-height: 260px; overflow: auto; font-size: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
#log li { padding: 5px 10px; border-bottom: 1px solid #f0ebe1; }
#log li:first-child { font-weight: 600; }

/* ── Modal, toast, banner ── */
.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-end; justify-content: center; z-index: 20;
}
.modal-box {
  background: var(--card); width: 100%; max-width: 440px;
  border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 85vh; overflow: auto;
}
.modal-box h3 { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 18px; margin-top: 0; }
.modal-box label { display: block; margin: 10px 0 4px; font-weight: 600; }
.modal-box table { width: 100%; border-collapse: collapse; font-size: 14px; }
.modal-box td { padding: 3px 0; border-bottom: 1px solid #f0ebe1; }
.modal-box td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.modal-box .gbar { height: 8px; border-radius: 4px; margin-bottom: 10px; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: #333; color: #fff; padding: 10px 16px; border-radius: 10px;
  max-width: calc(100vw - 32px); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 30;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#banner {
  position: sticky; top: 0; z-index: 25;
  background: #ffb300; color: #3a2a00; text-align: center; padding: 6px 10px; font-size: 13px; font-weight: 600;
}

/* ── Desktop: bàn cờ trái, bảng điều khiển phải ── */
@media (min-width: 900px) {
  #game.screen { display: flex; gap: 16px; align-items: flex-start; }
  #boardWrap { flex: 1; }
  #board { width: min(calc(100vh - 32px), calc(100vw - 420px), 860px); }
  #panel { width: 380px; flex: none; margin-top: 0; max-height: calc(100vh - 16px); overflow: auto; }
  .modal { align-items: center; }
  .modal-box { border-radius: 16px; }
}

/* ───────────────────────── Hiệu ứng ───────────────────────── */

body { background: radial-gradient(circle at 50% 0, #fffaf0 0, var(--bg) 60%) fixed; }

.audio-btns { position: fixed; top: 8px; right: 8px; z-index: 26; display: flex; gap: 6px; }
.mute-btn {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  font-size: 18px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.mute-btn.off { opacity: .45; text-decoration: line-through; }

/* Avatar người chơi */
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
#turnLine .avatar { width: 1.6em; height: 1.6em; font-size: 1em; }

/* Ô cờ: chủ sở hữu tô nền nhạt, quân cờ có avatar */
.tile .t-icon { font-size: 1.45em; }
.tile .tok {
  width: clamp(11px, 3.6cqw, 30px); height: clamp(11px, 3.6cqw, 30px);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: clamp(7px, 2.3cqw, 19px); line-height: 1;
  transition: transform .12s;
}
.tile .tok.cur { animation: bob 1s ease-in-out infinite; z-index: 1; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.tile.land { animation: land .4s ease-out; }
@keyframes land { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

.tile.pop { animation: tilePop .6s ease-out; }
@keyframes tilePop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, .9); }
  35% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(255, 193, 7, .6); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(255, 193, 7, 0); }
}

/* Xúc xắc */
/* Viên xúc xắc: khối trắng bo góc, chấm khắc lõm, mặt 1 và 4 chấm đỏ */
.die {
  --s: clamp(36px, 11cqw, 84px);
  width: var(--s); height: var(--s);
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: calc(var(--s) * .13); gap: calc(var(--s) * .04);
  border-radius: calc(var(--s) * .2);
  background: linear-gradient(145deg, #ffffff 0%, #f4efe6 60%, #e2d8c6 100%);
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, .1),
    inset 0 2px 0 #fff,
    0 6px 0 #c9bba3,
    0 10px 16px rgba(0, 0, 0, .25);
}
.die i { display: block; border-radius: 50%; }
.die i.pip {
  background: radial-gradient(circle at 35% 35%, #555 0%, #111 70%);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .8);
}
.die.red i.pip { background: radial-gradient(circle at 35% 35%, #ff6b6b 0%, #b71c1c 75%); }
.die.rolling { animation: tumble .45s linear infinite; }
.die.rolling + .die.rolling { animation-duration: .38s; animation-direction: reverse; }
.die.settle { animation: settle .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tumble {
  0% { transform: translateY(0) rotateX(0) rotateZ(0); }
  25% { transform: translateY(-22%) rotateX(90deg) rotateZ(45deg); }
  50% { transform: translateY(0) rotateX(180deg) rotateZ(90deg); }
  75% { transform: translateY(-14%) rotateX(270deg) rotateZ(135deg); }
  100% { transform: translateY(0) rotateX(360deg) rotateZ(180deg); }
}
@keyframes settle {
  0% { transform: translateY(-30%) rotate(-25deg) scale(1.15); }
  60% { transform: translateY(4%) rotate(6deg) scale(.97); }
  100% { transform: none; }
}

/* Đồng hồ chờ */
.timer {
  position: relative; width: min(70%, 280px); height: clamp(16px, 3.6cqw, 24px);
  background: #e8dfcf; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
}
.timer .t-bar { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #66bb6a, #43a047); transition: width .2s linear; }
.timer .t-text {
  position: relative; display: block; text-align: center;
  font-size: clamp(11px, 2.6cqw, 15px); font-weight: 700; line-height: clamp(16px, 3.6cqw, 24px);
}
.timer.warn .t-bar { background: linear-gradient(90deg, #ffca28, #fb8c00); }
.timer.danger .t-bar { background: linear-gradient(90deg, #ef5350, #c62828); }
.timer.danger { animation: timerShake .3s linear infinite; }
.timer.danger .t-text { color: #fff; }
@keyframes timerShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

/* Giữa bàn sáng lên khi tới lượt mình, nút chính nhún nhẹ */
#center { transition: box-shadow .3s, background .3s; }
#center.myturn { background: #fff4d6; animation: glow 1.8s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 2px #ffc107 inset; }
  50% { box-shadow: 0 0 0 4px #ffc107 inset, 0 0 18px rgba(255, 193, 7, .6) inset; }
}
#center.myturn #actions button.primary { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 85%, 100% { transform: scale(1); } 92% { transform: scale(1.07); } }

/* Popup sự kiện giữa bàn cờ */
#boardWrap { position: relative; }
.event-pop {
  position: absolute; left: 50%; top: 50%; z-index: 15;
  transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
  min-width: min(60vw, 280px); max-width: min(80vw, 380px);
  background: #fff; border-radius: 16px; padding: 14px 18px; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); border: 3px solid #ffc107;
  transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), opacity .2s;
}
.event-pop.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.event-pop .ep-icon { font-size: clamp(36px, 10vw, 56px); line-height: 1.1; }
.event-pop .ep-text { font-weight: 700; font-size: clamp(13px, 3.4vw, 17px); margin-top: 4px; }
.event-pop.chance { border-color: #7e57c2; }
.event-pop.card { border-color: #1e88e5; }
.event-pop.danger { border-color: #e53935; }
.event-pop.mine { border-color: #43a047; }
.event-pop.show .ep-icon { animation: iconSpin .6s ease-out; }
@keyframes iconSpin { 0% { transform: rotate(-30deg) scale(.4); } 70% { transform: rotate(10deg) scale(1.15); } 100% { transform: none; } }

/* Tiền bay lên */
.float-text {
  position: fixed; z-index: 40; pointer-events: none;
  transform: translate(-50%, 0);
  font-weight: 800; font-size: 18px;
  text-shadow: 0 1px 0 #fff, 0 0 4px #fff;
  animation: floatUp 1.5s ease-out forwards;
}
.float-text.gain { color: #2e7d32; }
.float-text.loss { color: #c62828; }
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}

.plist li.flash-gain { animation: flashGain .8s ease-out; }
.plist li.flash-loss { animation: flashLoss .8s ease-out; }
@keyframes flashGain { 0% { background: #c8e6c9; } 100% { background: var(--card); } }
@keyframes flashLoss { 0% { background: #ffcdd2; } 100% { background: var(--card); } }

/* Thẻ kỹ năng và nút */
.skill { transition: transform .15s, box-shadow .15s; }
.skill:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .1); }
.skill.sel { animation: land .3s ease-out; }
button.primary, button.ok { box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
button.primary:active:not(:disabled), button.ok:active:not(:disabled) { box-shadow: 0 1px 0 rgba(0, 0, 0, .2); transform: translateY(2px); }

.modal:not([hidden]) .modal-box { animation: slideUp .25s ease-out; }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.roomcode b { animation: land .5s ease-out; }
h1 { animation: bob 2.5s ease-in-out infinite; }

/* Pháo giấy */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti i {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

#center { position: relative; }
#center .audio-btns { position: absolute; top: 4px; right: 4px; gap: 4px; }
#center .mute-btn { width: 30px; height: 30px; font-size: 14px; box-shadow: none; }
#center .mute-btn:not(.off) { opacity: .85; }

/* Quân cờ nhảy lên ở mỗi bước đi */
.tile .tok.hop { animation: hop .3s ease-out; z-index: 2; }
@keyframes hop {
  0% { transform: translateY(-70%) scale(1.15); }
  60% { transform: translateY(5%) scale(.95, 1.05); }
  100% { transform: none; }
}

/* Lobby: tiêu đề nhóm thẻ */
.cat-head {
  grid-column: 1 / -1; margin-top: 8px;
  font-weight: 800; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px dashed var(--line); padding-bottom: 2px;
}
.cardgrid .skill.passive { background: #f5f7ff; }
.cardgrid .skill.passive.sel { background: #fff3f1; }

/* Túi thẻ */
.hand-info { text-transform: none; letter-spacing: 0; font-weight: normal; font-size: 12px; }
.mycards .skill.empty {
  border: 1px dashed var(--line); border-radius: 12px; color: #c3b9a8;
  display: flex; align-items: center; justify-content: center; min-height: 52px; font-size: 12px; background: transparent;
}

/* Rào Chặn đường trên ô */
.tile.roadblock { outline: 2px dashed #e53935; outline-offset: -4px; }
.tile.roadblock::after {
  content: '🛑'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 2.2em; opacity: .9; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

/* Lobby: chọn sức chứa túi thẻ */
.hand-setting { margin-top: 10px; font-size: 14px; }
.hand-setting label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.hand-setting select { width: auto; padding: 6px 10px; }

/* Lobby: tab chọn thẻ khởi hành / dự bị */
.pick-tabs { display: flex; gap: 6px; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 6px 0; }
.pick-tabs button { flex: 1; font-size: 14px; }
.pick-tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.skill { position: relative; }
.skill .badge {
  position: absolute; top: -7px; right: 8px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 1px 8px;
}
.skill .badge.res { background: #1e88e5; }
.skill.sel-res { border: 2px solid #1e88e5; background: #eef5ff; }

/* Túi thẻ: hàng thẻ dự bị */
.reserve-row {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted); margin-top: 2px;
}
.res-chip { padding: 2px 6px; font-size: 16px; line-height: 1.2; border-radius: 8px; }

/* ───────── Điện thoại xoay ngang: bàn cờ vừa chiều cao, bảng điều khiển bên phải ───────── */
@media (orientation: landscape) and (max-height: 600px) {
  body { font-size: 13px; }
  #game.screen {
    display: flex; gap: 8px; align-items: flex-start; max-width: none;
    padding: 4px max(4px, env(safe-area-inset-right)) 4px max(4px, env(safe-area-inset-left));
  }
  #boardWrap { flex: none; }
  #board { width: calc(100vh - 8px); width: calc(100dvh - 8px); }
  #panel {
    flex: 1; width: auto; min-width: 0; margin-top: 0;
    max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); overflow: auto;
  }
  #panel section h3, #panel h3 { margin: 8px 0 4px; font-size: 11px; }
  .plist { gap: 4px; }
  .plist li { padding: 3px 8px; gap: 6px; }
  .plist .money { font-size: 13px; }
  .plist .tags { font-size: 11px; }
  .avatar { width: 22px; height: 22px; font-size: 13px; }
  .mycards { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 4px; }
  .mycards .skill { padding: 4px 6px; gap: 1px; border-radius: 8px; }
  .skill .title { font-size: 12px; }
  .skill .when { font-size: 10px; }
  .mycards .skill.empty { min-height: 28px; font-size: 10px; border-radius: 8px; }
  .res-chip { font-size: 13px; padding: 1px 4px; }
  .prop-row { padding: 3px 6px; margin-bottom: 3px; }
  .prop-row .pname small { font-size: 10px; }
  #log { max-height: 140px; font-size: 12px; }
  #log li { padding: 3px 8px; }
  .row.small { margin-top: 8px; }
  .row.small button { padding: 5px; font-size: 12px; }
  #center .mute-btn { width: 24px; height: 24px; font-size: 11px; }
  .modal { align-items: center; }
  .modal-box { border-radius: 16px; max-height: 92vh; padding: 12px 16px; }
  .event-pop { min-width: 0; width: min(60vh, 300px); padding: 8px 12px; }
  .float-text { font-size: 14px; }
  .audio-btns { top: 4px; right: 4px; }
}

/* Lobby: chọn icon người chơi */
.avatar-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.avatar-picker .ap-label { width: 100%; font-weight: 600; font-size: 14px; }
.ap-btn {
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.ap-btn.on { border: 3px solid var(--ink); box-shadow: 0 0 0 2px #fff inset; transform: scale(1.1); }
.ap-btn.taken { opacity: .25; }

/* ───────── Ô cờ dạng khối 3D ─────────
   --g: màu viền (màu nhóm đất), --face: màu mặt ô. Mép trên sáng, đáy có bóng cùng tông màu nhóm. */
#board { gap: 3px; padding: 3px 3px 7px; }
.tile {
  --g: #cbbfa8;
  --face: var(--tile);
  --depth: 4px;
  border: 2px solid var(--g);
  border-radius: 7px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--face) 55%, #fff) 0%,
    var(--face) 45%,
    color-mix(in srgb, var(--face) 90%, #000) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .8),
    inset 0 -2px 0 rgba(0, 0, 0, .1),
    0 var(--depth) 0 color-mix(in srgb, var(--g) 62%, #000),
    0 calc(var(--depth) + 2px) 6px rgba(0, 0, 0, .25);
  transition: transform .1s, box-shadow .1s, background .3s;
}
.tile.prop { border-width: 3px; }
.tile.corner { --face: #fff3d6; --g: #d6bf8e; }
.tile.t-chance { --g: #b39ddb; }
.tile.t-tax { --g: #ef9a9a; }
.tile.owned { --face: color-mix(in srgb, var(--owner) 24%, var(--tile)); }

/* Chạm vào ô: ô lún xuống như bấm nút */
.tile:active {
  transform: translateY(calc(var(--depth) - 1px));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .8),
    inset 0 -2px 0 rgba(0, 0, 0, .1),
    0 1px 0 color-mix(in srgb, var(--g) 62%, #000),
    0 2px 3px rgba(0, 0, 0, .25);
}

/* Ô người đang đi đứng: nổi cao hơn, viền đậm */
.tile.here {
  z-index: 1;
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 2px var(--ink),
    inset 0 2px 0 rgba(255, 255, 255, .8),
    0 calc(var(--depth) + 2px) 0 color-mix(in srgb, var(--g) 62%, #000),
    0 calc(var(--depth) + 6px) 10px rgba(0, 0, 0, .3);
}

/* Chữ trên mặt ô hơi nổi */
.tile .t-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }

/* Giữa bàn lõm xuống để các ô xung quanh trông nổi hơn */
#center { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(255, 255, 255, .6); }

@media (orientation: landscape) and (max-height: 600px) {
  .tile { --depth: 3px; border-radius: 5px; }
  #board { gap: 2px; padding: 2px 2px 5px; }
}