/* KỶ ĐỒ ĐÁ — giao diện theo hệ "Organic": mộc, bo tròn, nền kem, xanh rêu.
 * Mặc định SÁNG (theo bản Organic gốc), có bản tối cho ai chơi buổi đêm, và nút
 * 3 nấc trên thanh đầu để tự chọn: theo máy → sáng → tối. */

/* ---------- BẢNG MÀU "ORGANIC" — mộc, bo tròn ----------
 * Lấy theo bản Organic trong Bot Crypto của chủ dự án: nền kem ấm, thẻ trắng,
 * viền chỉ một sợi rất nhạt, điểm nhấn xanh rêu đậm, chữ nâu-đen chứ không đen tuyền.
 * Sắc xám đều ngả ấm (hơi vàng) cho ăn với nền kem — xám trung tính nhìn ra ngay là
 * xám mặc định, không phải xám được chọn.
 *
 * ⚠️ Ba trạng thái, không phải hai:
 *   `:root` trần        = bản SÁNG đầy đủ (mặc định, và là bản tham chiếu)
 *   media dark + guard  = người dùng để máy tự động, máy đang tối
 *   [data-theme=...]    = người dùng tự bấm nút, phải THẮNG cả hai chiều
 * Mọi màu chỉ được định nghĩa Ở ĐÂY. Đặt màu thẳng trong khối media hay khối
 * [data-theme] là sinh ra ca "chữ theme này trên nền theme kia".                */
:root{
  --nen:#f4f1ea; --nen2:#eae5da; --vach:#ffffff; --vien:#e2ddd1;
  --chu:#24211c; --chu-mo:#7b7365;
  --son:#2f6b45; --oc:#8a6b2c; --xanh:#3c7d52; --do:#a8432f;
  --bong:0 1px 2px rgba(45,38,26,.05), 0 6px 18px rgba(45,38,26,.05);
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --nen:#1a1815; --nen2:#22201b; --vach:#2a2721; --vien:#3a362e;
    --chu:#ede7da; --chu-mo:#a29883;
    --son:#63a57b; --oc:#c9a961; --xanh:#6fa87f; --do:#cc7059;
    --bong:0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.32);
  }
}
:root[data-theme="dark"]{
  --nen:#1a1815; --nen2:#22201b; --vach:#2a2721; --vien:#3a362e;
  --chu:#ede7da; --chu-mo:#a29883;
  --son:#63a57b; --oc:#c9a961; --xanh:#6fa87f; --do:#cc7059;
  --bong:0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.32);
}
:root[data-theme="light"]{
  --nen:#f4f1ea; --nen2:#eae5da; --vach:#ffffff; --vien:#e2ddd1;
  --chu:#24211c; --chu-mo:#7b7365;
  --son:#2f6b45; --oc:#8a6b2c; --xanh:#3c7d52; --do:#a8432f;
  --bong:0 1px 2px rgba(45,38,26,.05), 0 6px 18px rgba(45,38,26,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--nen); color:var(--chu); min-height:100vh; overflow-x:hidden;
     font:15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
     -webkit-text-size-adjust:100%}
button{font:inherit; color:inherit}
.man{padding:14px; min-height:100vh}
[hidden]{display:none !important}

/* ---------- nút & ô nhập ---------- */
.nut{display:block; width:100%; margin:8px 0; padding:12px 16px; background:var(--son);
     color:#fff; border:0; border-radius:var(--r); font-weight:600; cursor:pointer;
     transition:filter .15s, transform .08s}
.nut:hover{filter:brightness(1.1)}
.nut:active{transform:translateY(1px)}
.nut:focus-visible{outline:3px solid var(--oc); outline-offset:2px}
.nut:disabled{opacity:.45; cursor:not-allowed}
.nut.phu{background:var(--vach); color:var(--chu); border:1px solid var(--vien)}
.nut.nho{width:auto; padding:8px 14px; margin:0; font-size:.9rem}
.nut.nut-to{padding:15px; font-size:1.05rem}
.hang-nut{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:10px 0}

.o-nhap{display:block; margin:14px 0}
.o-nhap span{display:block; font-size:.82rem; color:var(--chu-mo); margin-bottom:5px}
.o-nhap input{width:100%; padding:12px; background:var(--vach); color:var(--chu);
              border:1px solid var(--vien); border-radius:var(--r); font-size:1rem}
.o-nhap input:focus{outline:2px solid var(--son); border-color:var(--son)}

/* ---------- sảnh ---------- */
.hop-giua{max-width:430px; margin:min(7vh,60px) auto; padding:0 4px}
.hop-giua.rong{max-width:660px}
.hieu{margin:0; font-size:clamp(2rem,9vw,3rem); letter-spacing:.16em; text-align:center;
      color:var(--oc); font-weight:800}
.hieu-nho{margin:0 0 14px; text-align:center; color:var(--oc); font-size:1.4rem}
.hieu-phu{margin:6px 0 22px; text-align:center; color:var(--chu-mo); font-size:.9rem}
.nhan-nho{margin:0; text-align:center; color:var(--chu-mo); font-size:.8rem}
.ma-to{text-align:center; font-size:clamp(2.4rem,14vw,3.6rem); font-weight:800;
       letter-spacing:.22em; color:var(--oc); margin:4px 0 2px; font-variant-numeric:tabular-nums}
.chia{display:flex; align-items:center; gap:10px; margin:22px 0; color:var(--chu-mo); font-size:.8rem}
.chia::before,.chia::after{content:""; flex:1; height:1px; background:var(--vien)}
.loi{margin:12px 0 0; padding:10px 12px; background:rgba(184,72,60,.16);
     border-left:3px solid var(--do); border-radius:6px; font-size:.88rem}
.ds-cho{list-style:none; margin:18px 0; padding:0}
.ds-cho li{display:flex; align-items:center; gap:10px; padding:11px 13px; margin-bottom:7px;
           background:var(--vach); border:1px solid var(--vien); border-radius:var(--r)}
.ds-cho .nhan{margin-left:auto; font-size:.74rem; color:var(--chu-mo)}

/* ---------- bố cục màn chơi ---------- */
.khung{max-width:1420px; margin:0 auto; display:grid; gap:14px}
@media (min-width:1000px){ .khung{grid-template-columns:minmax(0,1fr) 340px; align-items:start} }
.cot-trai{min-width:0}
.cot-phai{display:grid; gap:10px; align-content:start; min-width:0}

.thanh-tren{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.tt-vong{font-weight:700; color:var(--oc); letter-spacing:.06em}
.tt-pha{font-size:.86rem; color:var(--chu-mo)}
/* hai nút tròn (giao diện + tiếng) — đẩy sang phải, xa hai nhãn kia cho khỏi bấm nhầm */
.nut-tron{flex:0 0 auto; width:34px; height:34px; padding:0; background:var(--vach);
          border:1px solid var(--vien); border-radius:50%; font-size:.95rem;
          line-height:1; cursor:pointer; transition:border-color .15s, transform .15s}
.nut-tron:hover{border-color:var(--son); transform:translateY(-1px)}
.nut-tron:focus-visible{outline:2px solid var(--son); outline-offset:2px}
#nut-theme{margin-left:auto}
.nut-roi-choi{font-size:.95rem; opacity:.82}
.nut-roi-choi:hover{opacity:1}
.nut-tieng.tat{opacity:.45}
@media (prefers-reduced-motion:reduce){ .nut-tron{transition:none} .nut-tron:hover{transform:none} }

/* ---------- SÂN CHƠI: thung lũng ở giữa, 4 cạnh 4 bộ tộc ---------- */
/* Cột hai bên để `auto` chứ không ghim 110px: chơi 2-3 người thì cạnh thừa bị
 * `display:none`, cột tự co về 0 thay vì để lại một mảng trống. */
.san-choi{
  display:grid; gap:6px;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:". tren ." "trai ban_do phai" ". duoi .";
}
.canh-trai, .canh-phai{width:118px}
.canh-tren{grid-area:tren} .canh-trai{grid-area:trai}
.canh-phai{grid-area:phai} .canh-duoi{grid-area:duoi}
.ban-do   {grid-area:ban_do}

.canh{
  position:relative; overflow:hidden;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--m, var(--vien)) 12%, var(--vach)), var(--vach) 58%),
    var(--vach);
  border:2px solid color-mix(in srgb, var(--m, var(--vien)) 42%, var(--vien));
  border-radius:14px; padding:8px; display:flex; flex-direction:column; gap:6px; min-width:0;
  border-left-width:6px; border-left-color:var(--m, var(--vien));
  box-shadow:0 3px 0 color-mix(in srgb, var(--m, var(--vien)) 18%, transparent), var(--bong);
}
.canh.trong{display:none}      /* ghế trống thì giấu hẳn, cột tự co lại */
/* cạnh của người ĐANG TỚI LƯỢT thì sáng lên */
.canh.dang{box-shadow:0 0 0 2px var(--m), 0 4px 12px color-mix(in srgb, var(--m) 25%, transparent)}
.canh.la-toi .c-ten{color:var(--oc)}

/* `flex-wrap` + `order` để chip "đang đi" rơi xuống dòng dưới thay vì ăn mất chỗ
 * của TÊN người chơi — cột trái/phải trên máy tính chỉ có 118px, không nhường được. */
.c-dinh{display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700;
         min-width:0; flex-wrap:wrap; padding:5px 6px; border-radius:9px;
         background:color-mix(in srgb, var(--m, var(--vien)) 13%, var(--nen2));
         border:1px solid color-mix(in srgb, var(--m, var(--vien)) 28%, var(--vien));
         box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--m, var(--vien)) 12%, transparent)}
.c-ten{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.c-diem{margin-left:auto; color:var(--oc); font-variant-numeric:tabular-nums; flex:0 0 auto;
        background:var(--vach); border-radius:12px; padding:2px 6px}
.c-dau{font-size:.62rem; color:var(--oc); font-weight:400}

/* làng của họ: lều mọc dần theo số công trình đã xây */
.c-lang{position:relative; display:flex; flex-wrap:wrap; gap:4px; align-items:flex-end;
         min-height:43px; padding:16px 6px 5px; border-radius:10px;
         background:linear-gradient(180deg, color-mix(in srgb, var(--m, var(--vien)) 17%, var(--nen2)),
                                     color-mix(in srgb, var(--m, var(--vien)) 5%, var(--nen2)));
         border:1px solid color-mix(in srgb, var(--m, var(--vien)) 22%, var(--vien));
         box-shadow:inset 0 -5px 0 color-mix(in srgb, var(--m, var(--vien)) 9%, transparent)}
.c-lang::before{content:"🏘️ Làng"; position:absolute; top:3px; left:6px;
                color:var(--chu-mo); font-size:.6rem; font-weight:800; letter-spacing:.04em}
.nha-nho{position:relative; width:18px; height:18px; flex:0 0 auto}
.nha-nho::before{content:""; position:absolute; bottom:0; left:0; right:0; height:8px;
                 background:var(--m); border-radius:1px 1px 2px 2px; opacity:.9}
.nha-nho::after{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
                 border-left:9px solid transparent; border-right:9px solid transparent;
                 border-bottom:9px solid var(--m); filter:brightness(1.35)}
/* ⭐ HOẠT ẢNH XÂY: nhà nhô lên từ mặt đất, nảy một cái rồi đứng yên */
.nha-nho.dang-xay{animation:xay-len .85s cubic-bezier(.25,1.4,.45,1) both}
@keyframes xay-len{
  0%  {transform:translateY(14px) scaleY(.15); opacity:0}
  35% {opacity:1}
  65% {transform:translateY(-3px) scaleY(1.15)}
  82% {transform:translateY(1px) scaleY(.94)}
  100%{transform:none; opacity:1}
}
/* bụi bốc lên chân nhà lúc vừa xây xong */
.nha-nho.dang-xay::marker{content:""}
.bui-xay{position:absolute; bottom:-2px; left:50%; font-size:.62rem; pointer-events:none;
         animation:bui-xay .9s ease-out forwards}
@keyframes bui-xay{
  0%  {opacity:0;   transform:translate(-50%,0) scale(.4)}
  25% {opacity:.9;  transform:translate(-50%,-4px) scale(1)}
  100%{opacity:0;   transform:translate(-50%,-16px) scale(1.5)}
}

/* thẻ Văn Minh đã gom, nhóm theo biểu tượng */
.c-the{display:flex; flex-wrap:wrap; gap:3px; padding:5px 6px; border-radius:9px;
        background:color-mix(in srgb, #7c63a8 7%, var(--nen2));
        border:1px solid color-mix(in srgb, #7c63a8 18%, var(--vien));
        font-size:.82rem; line-height:1.3}
.c-the::before{content:"📜 Thẻ"; flex:0 0 100%; color:var(--chu-mo);
               font-size:.58rem; font-weight:800; letter-spacing:.03em}
.c-the span{background:var(--nen2); border-radius:9px; padding:1px 5px; white-space:nowrap}
.c-the span.moi{animation:the-bay .8s cubic-bezier(.3,1.5,.5,1) both}
@keyframes the-bay{0%{transform:scale(.2) rotate(-25deg); opacity:0}
                   60%{transform:scale(1.25) rotate(6deg); opacity:1}
                   100%{transform:none}}

/* kho tài nguyên hiện ngay trên cạnh */
.c-kho{display:flex; flex-wrap:wrap; gap:4px; padding:5px 6px; border-radius:9px;
       background:color-mix(in srgb, var(--oc) 6%, var(--nen2));
       border:1px solid color-mix(in srgb, var(--oc) 16%, var(--vien));
       font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--chu-mo)}
.c-kho::before{content:"🧺 Kho"; flex:0 0 100%; color:var(--chu-mo);
               font-size:.58rem; font-weight:800; letter-spacing:.03em}
.c-kho b{color:var(--chu); font-weight:600}
.c-kho span.doi{animation:nhay-so .5s ease-out}
@keyframes nhay-so{0%{transform:scale(1.5); color:var(--oc)}100%{transform:none}}
.c-chi{display:flex; flex-wrap:wrap; gap:4px; padding:5px 6px; border-radius:9px;
        background:color-mix(in srgb, var(--m, var(--vien)) 6%, var(--nen2));
        font-size:.78rem; color:var(--chu-mo)}
.c-chi::before{content:"👥 Dân làng"; flex:0 0 100%; color:var(--chu-mo);
                font-size:.58rem; font-weight:800; letter-spacing:.03em}

/* ---------- BẢN ĐỒ ---------- */
.ban-do{position:relative; width:100%; aspect-ratio:100/66; border-radius:14px;
        overflow:hidden; box-shadow:var(--bong); border:2px solid var(--vien)}
.dia-hinh{position:absolute; inset:0; width:100%; height:100%; display:block}
/* mây trôi ngang rất chậm — mỗi đám một tốc độ cho khỏi thành một khối */
.may1{animation:troi 78s linear infinite}
.may2{animation:troi 112s linear infinite; animation-delay:-40s}
.may3{animation:troi 95s linear infinite; animation-delay:-70s}
@keyframes troi{from{transform:translateX(-30px)} to{transform:translateX(130px)}}

/* mỗi công trình trên bản đồ */
.cho{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column;
     align-items:center; gap:2px; padding:5px 7px; border-radius:12px; cursor:default;
     background:rgba(28,22,19,.55); border:2px solid transparent; color:#f4ece0;
     backdrop-filter:blur(2px); transition:border-color .15s, transform .12s, background .15s;
     max-width:30%}
@media (prefers-color-scheme: light){ .cho{background:rgba(255,250,242,.72); color:#2b211a} }
:root[data-theme="light"] .cho{background:rgba(255,250,242,.72); color:#2b211a}
.cho .ic{font-size:clamp(1.1rem,2.6vw,1.7rem); line-height:1}
.cho .ten{font-size:clamp(.5rem,1.15vw,.72rem); font-weight:600; text-align:center;
          line-height:1.15; text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (prefers-color-scheme: light){ .cho .ten{text-shadow:none} }
.cho .cho-trong{display:flex; gap:2px; flex-wrap:wrap; justify-content:center; max-width:92px}
.cho .o-dan{width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.45);
            background:rgba(0,0,0,.25)}
.cho .so-trong{display:none}          /* chỉ dùng ở màn hẹp, xem @media bên dưới */
:root[data-theme="light"] .cho .o-dan{border-color:rgba(0,0,0,.3); background:rgba(0,0,0,.08)}

/* đặt được -> sáng lên, bấm được */
.cho.dat-duoc{cursor:pointer; border-color:var(--oc); animation:tho 1.8s ease-in-out infinite}
.cho.dat-duoc:hover{transform:translate(-50%,-50%) scale(1.07); background:rgba(216,164,65,.35)}
@keyframes tho{0%,100%{box-shadow:0 0 0 0 rgba(216,164,65,.55)}
               50%{box-shadow:0 0 0 7px rgba(216,164,65,0)}}
/* đang thu hoạch ở đây */
.cho.dang-lam{border-color:var(--son); background:rgba(200,100,47,.4)}

/* ---------- NGƯỜI (quân dân) ---------- */
.dan-o{display:flex; gap:3px; flex-wrap:wrap; justify-content:center; max-width:100px; min-height:2px}
.dan{position:relative; width:9px; height:15px; flex:0 0 auto}
.dan::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
             width:6px; height:6px; border-radius:50%; background:var(--m);
             box-shadow:0 1px 2px rgba(0,0,0,.5)}
.dan::after{content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%);
            width:9px; height:10px; border-radius:4px 4px 2px 2px; background:var(--m);
            box-shadow:0 1px 2px rgba(0,0,0,.5)}
/* ⭐ ĐI BỘ TỪ LÀNG RA CHỖ LÀM.
 * `--dx/--dy` do app.js tính (quãng đường ngược chiều, tính bằng pixel).
 * Giữa đường có nhún lên/nghiêng người cho ra dáng bước chân, và hơi thu nhỏ ở
 * đầu quãng để cảm giác "đi từ xa lại". */
.dan.den-noi{animation:di-bo .8s cubic-bezier(.35,.05,.25,1) both}
@keyframes di-bo{
  0%   {transform:translate(var(--dx),var(--dy)) scale(.75); opacity:.15}
  15%  {opacity:1}
  30%  {transform:translate(calc(var(--dx)*.7),calc(var(--dy)*.7 - 3px)) rotate(-9deg) scale(.83)}
  50%  {transform:translate(calc(var(--dx)*.5),calc(var(--dy)*.5)) rotate(8deg) scale(.88)}
  70%  {transform:translate(calc(var(--dx)*.3),calc(var(--dy)*.3 - 3px)) rotate(-7deg) scale(.94)}
  88%  {transform:translate(calc(var(--dx)*.08),calc(var(--dy)*.08)) rotate(4deg) scale(1)}
  100% {transform:none; opacity:1}
}
/* đang làm việc: cả người nhún nhảy như đang cuốc/chặt */
.cho.dang-lam .dan{animation:lam .5s ease-in-out infinite; transform-origin:50% 100%}
@keyframes lam{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg) translateY(-2px)}}
.cho .do-nghe{position:absolute; top:-13px; right:-11px; font-size:.85rem; opacity:0;
              transform-origin:70% 90%}
.cho.dang-lam .do-nghe{opacity:1; animation:bua .5s ease-in-out infinite}
@keyframes bua{0%,100%{transform:rotate(-32deg)}50%{transform:rotate(24deg)}}

/* quầng sáng lan ra khi đang khai thác — cho biết "chỗ này đang có việc" */
.cho.dang-lam::after{
  content:""; position:absolute; inset:-6px; border-radius:14px; pointer-events:none;
  border:2px solid var(--son); animation:quang 1.1s ease-out infinite;
}
@keyframes quang{0%{opacity:.85; transform:scale(.9)}100%{opacity:0; transform:scale(1.35)}}

/* Mảnh vụn văng ra khi đang làm — nội dung do app.js đặt theo từng công trình
 * (lá cây ở rừng, mảnh đá ở mỏ, giọt nước ở sông…). Ba hạt lệch pha nhau. */
.cho .bui{position:absolute; bottom:1px; left:50%; font-size:.6rem; line-height:1;
          opacity:0; pointer-events:none}
.cho.dang-lam .bui{animation:bui 1.1s ease-out infinite}
.cho.dang-lam .bui:nth-child(2){animation-delay:.37s}
.cho.dang-lam .bui:nth-child(3){animation-delay:.74s}
@keyframes bui{
  0%  {opacity:0;   transform:translate(-50%,0) scale(.4) rotate(0)}
  20% {opacity:.95; transform:translate(calc(-50% + 5px),-8px) scale(1) rotate(40deg)}
  100%{opacity:0;   transform:translate(calc(-50% + 22px),-30px) scale(.8) rotate(220deg)}
}

/* con số bay lên khi thu được đồ */
.bay{position:absolute; transform:translate(-50%,-50%); font-weight:800; pointer-events:none;
     font-size:clamp(.8rem,2vw,1.15rem); color:var(--oc); text-shadow:0 2px 5px rgba(0,0,0,.7);
     animation:bay 1.5s ease-out forwards; z-index:5}
@keyframes bay{0%{opacity:0; transform:translate(-50%,-50%) scale(.6)}
               20%{opacity:1; transform:translate(-50%,-120%) scale(1.15)}
               100%{opacity:0; transform:translate(-50%,-280%) scale(1)}}

/* ---------- hàng công trình / thẻ ---------- */
.hang-the{display:grid; gap:12px; margin-top:12px}
@media (min-width:620px){ .hang-the{grid-template-columns:1fr 1fr} }
.nhan-hang{margin:0 0 5px; font-size:.78rem; color:var(--chu-mo); letter-spacing:.05em}
.o-hang{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.la{background:var(--vach); border:2px solid var(--vien); border-radius:9px; padding:6px 4px;
    text-align:center; min-height:78px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px; position:relative; overflow:hidden}
.la .la-ic{font-size:1.15rem; line-height:1}
.la .la-ten{font-size:.56rem; line-height:1.15; color:var(--chu-mo)}
.la .la-gia{font-size:.6rem; color:var(--oc); font-variant-numeric:tabular-nums}
.la .la-diem{position:absolute; top:2px; right:4px; font-size:.6rem; color:var(--oc); font-weight:700}
.la .la-con{position:absolute; top:2px; left:4px; font-size:.55rem; color:var(--chu-mo)}
.la.dat-duoc{cursor:pointer; border-color:var(--oc)}
.la.dat-duoc:hover{background:rgba(216,164,65,.16)}
.la.trong{opacity:.35}
.la .dan-o{position:absolute; bottom:2px; left:0; right:0}

/* ---------- cột phải ---------- */
.khu-lam{background:var(--vach); border:2px solid var(--son); border-radius:var(--r);
         padding:12px; min-height:92px}
.khu-lam.cho-doi{border-color:var(--vien)}
.khu-lam .hoi{font-weight:700; margin:0 0 4px}
.khu-lam .phu-chu{font-size:.8rem; color:var(--chu-mo); margin:0 0 10px}
.khu-lam .doi{color:var(--chu-mo); text-align:center; padding:20px 0}
/* Danh sách chỗ đặt dân có thể dài tới 16 mục — cho cuộn trong khung thay vì
 * đẩy mọi thứ khác xuống dưới màn hình. */
.chon-ds{display:grid; gap:6px; margin-bottom:8px; max-height:min(46vh,430px); overflow-y:auto}
.chon-ds button{display:flex; align-items:center; gap:8px; width:100%; text-align:left;
                padding:9px 11px; background:var(--nen2); border:1px solid var(--vien);
                border-radius:8px; cursor:pointer}
.chon-ds button:hover{border-color:var(--son)}
.chon-ds button:disabled{opacity:.4; cursor:not-allowed}
.chon-ds .phai{margin-left:auto; font-size:.76rem; color:var(--oc); white-space:nowrap}
.chon-ds .nho2{display:block; font-size:.71rem; color:var(--chu-mo); font-weight:400}

.so-dan-chon{display:flex; align-items:center; gap:10px; justify-content:center; margin:10px 0}
.so-dan-chon button{width:38px; height:38px; border-radius:9px; background:var(--nen2);
                    border:1px solid var(--vien); cursor:pointer; font-size:1.2rem; font-weight:700}
.so-dan-chon b{font-size:1.5rem; min-width:34px; text-align:center; font-variant-numeric:tabular-nums}

.xx-hang{display:flex; gap:7px; justify-content:center; margin:8px 0; flex-wrap:wrap}
.xx-hang i{width:32px; height:32px; border-radius:7px; background:var(--chu); color:var(--nen);
           display:grid; place-items:center; font-style:normal; font-weight:800; font-size:1.05rem;
           box-shadow:var(--bong); font-variant-numeric:tabular-nums;
           animation:lan .6s ease-in-out}
/* đang lăn thì nghiêng ngả, dừng lại thì nảy một cái cho dứt khoát */
@keyframes lan{0%{transform:rotate(-120deg) scale(.7)}
               50%{transform:rotate(70deg) scale(1.15)}
               100%{transform:none}}
.xx-hang i.dung{animation:chot .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes chot{0%{transform:scale(1.3)}100%{transform:none}}
.cc-chon{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0}
.cc-chon button{padding:7px 11px; border-radius:8px; background:var(--nen2);
                border:1px solid var(--vien); cursor:pointer; font-size:.85rem}
.cc-chon button.dang{border-color:var(--oc); background:rgba(216,164,65,.2)}
.cc-chon button:disabled{opacity:.35; cursor:not-allowed}

.the-toi{background:var(--vach); border:1px solid var(--vien); border-radius:var(--r); padding:12px}
.ten-toi{display:flex; align-items:center; gap:8px; margin-bottom:9px; font-weight:700}
.kho{display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-bottom:9px}
.kho div{background:var(--nen2); border-radius:7px; padding:6px 2px; text-align:center}
.kho .so{display:block; font-weight:700; font-variant-numeric:tabular-nums; font-size:.95rem}
.kho .ic{font-size:.82rem}
.chi-so{display:flex; flex-wrap:wrap; gap:5px; font-size:.76rem; color:var(--chu-mo)}
.chi-so span{background:var(--nen2); border-radius:20px; padding:3px 9px}
.chi-so b{color:var(--chu)}
.the-cua-toi{margin-top:11px; padding-top:10px; border-top:1px solid var(--vien)}
.the-cua-tieu,.the-nhom-tieu{display:flex; align-items:center; gap:8px; justify-content:space-between}
.the-cua-tieu{margin-bottom:7px; color:var(--oc); font-size:.86rem}
.the-cua-tieu span,.the-nhom-tieu span{font-size:.72rem; color:var(--chu-mo); font-weight:400}
.the-nhom{padding:7px 8px; margin-top:6px; border-radius:9px; background:var(--nen2)}
.the-nhom-xanh{border-left:3px solid #5d9b65}
.the-nhom-vang{border-left:3px solid #c99b35}
.the-nhom-tieu{font-size:.78rem; color:var(--chu)}
.the-so-huu{list-style:none; display:grid; gap:5px; margin:7px 0 0; padding:0}
.the-so-huu-muc{display:grid; grid-template-columns:30px minmax(0,1fr); gap:6px; align-items:start}
.the-so-huu-ic{font-size:1.35rem; line-height:1.15; text-align:center}
.the-so-huu-noi{display:grid; gap:1px; min-width:0; line-height:1.25}
.the-so-huu-noi b{font-size:.78rem; color:var(--chu); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.the-so-huu-noi small{font-size:.68rem; color:var(--chu-mo)}

       border-radius:9px; padding:8px 11px; font-size:.84rem}
                font-variant-numeric:tabular-nums}
.cham{width:11px; height:11px; border-radius:50%; flex:0 0 auto}

.hop{background:var(--vach); border:1px solid var(--vien); border-radius:var(--r)}
.hop summary{padding:10px 13px; cursor:pointer; font-weight:600; font-size:.9rem}
.hop > div{padding:0 13px 13px}
.nhat-ky{max-height:260px; overflow-y:auto; font-size:.78rem; color:var(--chu-mo); line-height:1.5}
.nhat-ky p{margin:0 0 3px}
.nhat-ky p b{color:var(--chu); font-weight:600}
.nhat-ky p.do{color:var(--do)}
.luat-tt{font-size:.8rem; color:var(--chu-mo); line-height:1.6}
.luat-tt b{color:var(--chu)}
.luat-tt ul{margin:6px 0; padding-left:18px}

/* ---------- bảng điểm ---------- */
.hang-diem{background:var(--vach); border:1px solid var(--vien); border-radius:var(--r);
           padding:12px 14px; margin-bottom:9px}
.hang-diem.nhat{border-color:var(--oc); box-shadow:0 0 0 1px var(--oc)}
.hang-diem .dinh{display:flex; align-items:center; gap:9px; font-weight:700}
.hang-diem .tong{margin-left:auto; font-size:1.25rem; color:var(--oc);
                 font-variant-numeric:tabular-nums}
.hang-diem table{width:100%; border-collapse:collapse; margin-top:8px; font-size:.79rem}
.hang-diem td{padding:2px 0; color:var(--chu-mo)}
.hang-diem td:last-child{text-align:right; font-variant-numeric:tabular-nums; color:var(--chu)}

/* ---------- ⭐ TRANH THẺ VĂN MINH ----------
 * Màu tranh để riêng khỏi màu giao diện: tranh hang động phải giữ chất đất son /
 * than / phấn ở CẢ hai giao diện, chỉ đổi độ sáng nền vách cho hợp. */
:root{ --t-nen:#e7dcc8; --t-vet:#00000008; --t-son:#b4632f; --t-than:#3b2f26;
       --t-sang:#f6efe1; --t-xanh:#6d8a4a; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --t-nen:#3a332a; --t-vet:#ffffff08; --t-son:#c07a45;
    --t-than:#1d1813; --t-sang:#e8dcc4; --t-xanh:#7f9c5c; }
}
:root[data-theme="dark"]{ --t-nen:#3a332a; --t-vet:#ffffff08; --t-son:#c07a45;
  --t-than:#1d1813; --t-sang:#e8dcc4; --t-xanh:#7f9c5c; }
:root[data-theme="light"]{ --t-nen:#e7dcc8; --t-vet:#00000008; --t-son:#b4632f;
  --t-than:#3b2f26; --t-sang:#f6efe1; --t-xanh:#6d8a4a; }

.la-ic .tranh{display:block; width:100%; height:38px; border-radius:8px}
.bt-tranh{margin:2px 0 10px; border-radius:10px; overflow:hidden;
          border:1px solid var(--vien)}
.bt-tranh .tranh{display:block; width:100%; height:126px}

/* ---------- ⭐ ĐỒNG HỒ ĐẾM LƯỢT ---------- */
.dong-ho{font-variant-numeric:tabular-nums; font-weight:800; font-size:.8rem;
         padding:3px 10px; border-radius:20px; background:var(--nen2);
         border:1px solid var(--vien); color:var(--chu-mo); white-space:nowrap}
.dong-ho.la-toi{color:var(--chu); border-color:var(--son)}
.dong-ho.gap{color:#fff; background:var(--do); border-color:var(--do); animation:dh-tho .9s ease-in-out infinite}
@keyframes dh-tho{0%,100%{opacity:1} 50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .dong-ho.gap{animation:none} }

/* chọn giờ ở phòng chờ */
.khu-gio{margin-top:14px; padding:12px; border:1px solid var(--vien);
         border-radius:var(--r); background:var(--vach); text-align:left}
.chon-gio{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px}
.chon-gio button{padding:6px 12px; border-radius:20px; background:var(--nen2);
                 border:1px solid var(--vien); font-size:.78rem; cursor:pointer;
                 color:var(--chu)}
.chon-gio button:hover{border-color:var(--son)}
.chon-gio button.dang{background:var(--son); border-color:var(--son); color:#fff; font-weight:700}
.gio-tay{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.78rem;
         color:var(--chu-mo)}
.gio-tay input{width:90px; padding:7px 10px; border-radius:10px; background:var(--nen);
               border:1px solid var(--vien); color:var(--chu); font:inherit}
.gio-tay .nut{width:auto; margin:0; padding:7px 14px}
#gio-hien{margin:9px 0 0; line-height:1.45}

/* ---------- ⭐ BẢNG ĐANG DẪN (trong ván) ---------- */
.hop-xh:empty{display:none}
.hop-xh{background:var(--vach); border:1px solid var(--vien); border-radius:var(--r);
        padding:11px 12px; display:flex; flex-direction:column; gap:5px}
.xh-dinh{font-size:.78rem; font-weight:800; color:var(--chu)}
.xh-phu{font-weight:400; font-size:.68rem; color:var(--chu-mo)}
.xh-hang{display:flex; align-items:center; gap:7px; font-size:.8rem; padding:3px 0}
.xh-hang.la-toi{font-weight:700}
.xh-hang.la-toi .xh-ten{color:var(--son)}
.xh-so{width:16px; text-align:right; color:var(--chu-mo); font-variant-numeric:tabular-nums}
.xh-ten{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.xh-diem{color:var(--oc); font-variant-numeric:tabular-nums}
.bang-tin.rong{max-width:520px}
.xh-bang td.so{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.xh-bang tr.la-may{opacity:.65}
.xh-may{font-size:.62rem; padding:0 5px; border-radius:20px; background:var(--nen2);
        border:1px solid var(--vien); color:var(--chu-mo)}
.xh-gan{margin-top:10px; display:flex; flex-direction:column; gap:3px; font-size:.75rem}
.xh-van{color:var(--chu-mo)}
.xh-van b{color:var(--oc)}

/* ---------- ⭐ HƯỚNG DẪN LUẬT CHI TIẾT ----------
 * Đây là thứ người mới đọc một lần rồi thôi, nên ưu tiên DỄ QUÉT MẮT hơn là gọn:
 * đề mục có số, bảng có kẻ hàng, ví dụ tách hẳn ra khối riêng. */
.luat-tt{font-size:.82rem; line-height:1.6; color:var(--chu-mo)}
.luat-tt b{color:var(--chu)}
.luat-tt h4{margin:16px 0 6px; font-size:.8rem; font-weight:800; color:var(--son);
            letter-spacing:.03em; text-transform:uppercase}
.luat-tt h4:first-of-type{margin-top:10px}
.luat-mo{margin:0 0 4px; padding:9px 11px; border-radius:var(--r);
         background:var(--nen2); color:var(--chu)}
.luat-so, .luat-ds{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px}
.luat-ds ul{margin:5px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
.luat-phu{margin:5px 0 0}
.luat-vd{margin:7px 0 0; padding:7px 10px; border-radius:10px; background:var(--nen2);
         border-left:3px solid var(--oc); color:var(--chu)}
.canh-bao{color:var(--do)}
/* bảng: cho tự trượt ngang trong khung của nó, đừng bắt cả trang trượt theo */
.luat-bang{overflow-x:auto; margin-top:6px}
.luat-bang table{width:100%; border-collapse:collapse; font-size:.78rem}
.luat-bang th{text-align:left; font-weight:700; color:var(--chu-mo); font-size:.7rem;
              text-transform:uppercase; letter-spacing:.04em; padding:0 8px 4px 0}
.luat-bang td{padding:5px 8px 5px 0; border-top:1px solid var(--vien);
              vertical-align:top; color:var(--chu)}
.luat-bang td.so{font-variant-numeric:tabular-nums; font-weight:700; color:var(--oc);
                 white-space:nowrap}

/* ---------- ⭐ "ĐẾN LƯỢT BẠN" ----------
 * Trước chỉ có cái viền sáng nhè nhẹ quanh cạnh mình, chơi trên điện thoại rất
 * hay bỏ lỡ lượt. Nay nói thẳng bằng chữ, kèm chấm thở cho đập vào mắt.        */
.den-luot{
  display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:9px 12px;
  border-radius:var(--r); border:2px solid var(--son); color:var(--chu);
  background:color-mix(in srgb, var(--son) 20%, var(--vach));
  font-weight:800; font-size:.86rem; letter-spacing:.04em;
}
.dl-cham{width:9px; height:9px; border-radius:50%; background:var(--son); flex:0 0 auto;
         animation:dl-tho 1.15s ease-in-out infinite}
@keyframes dl-tho{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.3; transform:scale(.65)}}

/* chip nhỏ trên thẻ từng bộ tộc: liếc cái là biết ai đang đi */
.c-luot{order:9; font-size:.58rem; font-weight:700; padding:1px 6px; border-radius:20px;
        background:var(--vien); color:var(--chu-mo); white-space:nowrap; flex:0 0 auto}
.c-luot.la-toi{background:var(--son); color:#fff}

/* ---------- ⭐ vòng này họ để dân ở đâu ---------- */
.c-dat{display:flex; flex-wrap:wrap; gap:4px; padding:5px 6px; border-radius:9px;
        background:color-mix(in srgb, var(--oc) 9%, var(--nen2));
        border:1px dashed color-mix(in srgb, var(--oc) 32%, var(--vien))}
.c-dat::before{content:"🌾 Đang làm"; flex:0 0 100%; color:var(--chu-mo);
               font-size:.58rem; font-weight:800; letter-spacing:.03em}
.c-dat-o{display:inline-flex; align-items:center; gap:3px; font-size:.8rem;
         padding:1px 5px; border-radius:20px; background:var(--nen2);
         border:1px solid var(--vien); white-space:nowrap}
.c-dat-o b{color:var(--oc); font-weight:700}
.c-dat-ten{display:none}          /* cạnh hai bên chỉ 118px — máy tính chỉ để icon */

/* ---------- ⭐ bảng XEM công trình ---------- */
.bang-tin-nen{position:fixed; inset:0; z-index:60; display:flex; padding:16px;
              align-items:center; justify-content:center;
              background:rgba(0,0,0,.55); animation:bt-hien .14s ease-out}
@keyframes bt-hien{from{opacity:0} to{opacity:1}}
.bang-tin{position:relative; width:100%; max-width:340px; max-height:88vh; overflow-y:auto;
          background:var(--vach); border:2px solid var(--vien); border-radius:14px;
          padding:16px 16px 14px; box-shadow:var(--bong); animation:bt-len .16s ease-out}
@keyframes bt-len{from{transform:translateY(10px) scale(.97)} to{transform:none}}
.bt-dong{position:absolute; top:6px; right:6px; width:30px; height:30px; padding:0;
         background:none; border:none; color:var(--chu-mo); font-size:1rem;
         cursor:pointer; border-radius:8px; line-height:1}
.bt-dong:hover{background:var(--vien); color:var(--chu)}
.bt-ten{margin:0 26px 6px 0; font-size:1.02rem; font-weight:800}
.bt-mota{margin:0 0 8px; font-size:.8rem; color:var(--chu-mo); line-height:1.5}
.bt-cho{margin:0 0 8px; font-size:.78rem; color:var(--oc); font-weight:700}
.bt-visao{margin:10px 0 0; padding:8px 10px; border-radius:8px; font-size:.78rem;
          background:var(--nen2); color:var(--chu-mo); line-height:1.45}
.bt-visao b{color:var(--chu)}
.tin-trong{margin:6px 0 0; font-size:.78rem; color:var(--chu-mo); font-style:italic}
.tin-ai{display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 0}
.tin-nguoi{display:inline-flex; align-items:center; gap:5px; font-size:.75rem;
           padding:3px 8px; border-radius:20px; background:var(--nen2);
           border:1px solid var(--vien)}
.tin-nguoi.la-toi{border-color:var(--son)}
.tin-nguoi b{color:var(--oc); font-weight:700}
.tin-nguoi .cham{width:8px; height:8px; border-radius:50%; flex:0 0 auto}
.ds-cho li.mat-mang{opacity:.58}

/* ---------- ⭐ BAO · BÚA · KÉO chọn người đi đầu ---------- */
.bbk-nen{position:fixed; inset:0; z-index:90; display:flex; align-items:center;
         justify-content:center; padding:16px; background:rgba(0,0,0,.58);
         animation:bt-hien .14s ease-out}
.bbk{width:min(100%,430px); padding:22px 18px 18px; text-align:center;
     background:var(--vach); color:var(--chu); border:2px solid var(--vien);
     border-radius:18px; box-shadow:var(--bong); animation:bt-len .16s ease-out}
.bbk-tieu{font-size:1.35rem; font-weight:800; color:var(--oc)}
.bbk-phu,.bbk-vong{margin:7px 0; color:var(--chu-mo); font-size:.82rem; line-height:1.45}
.bbk-vong{font-weight:700; color:var(--chu)}
.bbk-lua{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.bbk-nut{display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px;
         background:var(--nen2); color:var(--chu); border:1px solid var(--vien);
         border-radius:13px; cursor:pointer; font:inherit}
.bbk-nut span{font-size:2rem; line-height:1}
.bbk-nut:hover{border-color:var(--son); transform:translateY(-1px)}
.bbk-nut:disabled{opacity:.42; cursor:not-allowed; transform:none}
.bbk-ket{margin:13px 0 8px; padding:9px; border-radius:10px; background:var(--nen2);
         color:var(--oc); font-size:.9rem}
.bbk-ds{display:flex; flex-wrap:wrap; justify-content:center; gap:5px}
.bbk-nguoi{padding:3px 8px; border:1px solid var(--vien); border-radius:20px;
           color:var(--chu-mo); font-size:.72rem}
/* phần chọn số dân nằm NGAY trong bảng thông tin — một bảng lo cả xem lẫn đặt */
.bt-dat-khu{margin-top:12px; padding-top:12px; border-top:1px solid var(--vien)}
.bt-dat-khu .nut{margin:6px 0 0}

/* ---------- màn hẹp: bản đồ co lại thì nhãn chữ đè lên nhau ----------
 * 🐞 Bắt được 12/08 bằng ảnh chụp 390px: ở cỡ điện thoại, 8 công trình có tên
 *    dài nằm sát nhau nên "Mỏ Đất Sét" đè lên "Nương Rẫy" đè lên "Lều Tình Yêu".
 *    Bài kiểm chồng-lấn lúc đó chỉ chạy ở 1400px nên không thấy — nay chạy MỌI cỡ.
 * Cách chữa: dưới 760px bỏ chữ, chỉ để icon tròn; tên vẫn đọc được ở danh sách
 * bên dưới và khi bấm vào. Ô trống đổi từ 7 chấm sang dạng "2/7" cho gọn.        */
@media (max-width:759px){
  /* Màn hẹp không đủ chỗ vây quanh: xếp dọc, bản đồ trước, cạnh của MÌNH ngay dưới,
     rồi tới ba bộ tộc kia. */
  .san-choi{display:flex; flex-direction:column; gap:6px}
  .ban-do{order:1} .canh-duoi{order:2} .canh-trai{order:3}
  .canh-phai{order:4} .canh-tren{order:5}
  .canh.trong{display:none}
  /* 🐞 Bắt được 12/08 khi CHƠI THẬT trên điện thoại: hai cạnh trái/phải vẫn giữ
   *    `width:118px` của kiểu vây-quanh bản đồ, nên lúc xếp dọc chúng cụt lủn còn
   *    118px trong khi cạnh trên/dưới rộng 372px — kho tài nguyên của người thứ 2
   *    và thứ 3 bị bó lại, xuống dòng lộn xộn. Xếp dọc rồi thì bỏ chiều rộng cứng.
   *    Bài kiểm cũ không thấy vì chỉ đo CHỒNG LẤN, không đo BỀ RỘNG các cạnh.     */
  .canh-trai, .canh-phai{width:auto}
  /* thẻ rộng cả màn rồi thì hiện luôn TÊN công trình đang để dân, khỏi đoán icon */
  .c-dat-ten{display:inline; margin-left:1px}
  .c-dat-o{font-size:.8rem; padding:3px 8px}

  .ban-do{aspect-ratio:100/78}
  .cho{padding:0; border-radius:50%; max-width:none; background:rgba(28,22,19,.62)}
  .cho .ten{display:none}
  .cho .ic{font-size:1.35rem; padding:5px}
  .cho .cho-trong{position:absolute; top:-5px; right:-7px; background:var(--vach);
                  border:1px solid var(--vien); border-radius:20px; padding:0 4px;
                  font-size:.56rem; color:var(--chu); max-width:none; line-height:1.5}
  .cho .o-dan{display:none}
  .cho .so-trong{display:inline; font-variant-numeric:tabular-nums}
  .cho .dan-o{position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
              max-width:70px; gap:1px}
  .cho .dan{width:7px; height:11px}
  .cho .dan::before{width:5px; height:5px}
  .cho .dan::after{top:4px; width:7px; height:7px}
}
@media (max-width:999px){ .man{padding:9px} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }