/* ================================================================
   LỚP HOÀN THIỆN (nạp sau cùng): chữ, nút, thẻ, khung, chuyển động
   Mục tiêu: nhìn như game online hiện nay: chữ không chân gọn gàng, tiêu đề vàng ánh kim,
   nút bo tròn có lớp sáng, khung kính mờ trên ảnh, mọi thứ chuyển mượt (không nhảy).
   ================================================================ */
:root {
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gold-grad: linear-gradient(180deg, #fff7dc 0%, #f6dc8c 42%, #d9a441 72%, #b07a25 100%);
  --glass: rgba(18, 12, 7, .78);
}
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: var(--font-ui); letter-spacing: .1px; }
button, input, select, textarea { font-family: inherit; }
/* Số tiền, cấp, lượt: chữ số đều nhau cho khỏi nhảy khi đổi */
#topbar .tb-res span, .sp-stamina, .hm-lv, .cx-n, .g-count, .tw-n { font-variant-numeric: tabular-nums; }

/* ---------- Tiêu đề: chữ vàng ánh kim, viền tối ---------- */
.map-title, .panel-head h2, .sp-title, .recruit-box h1, .tw-won h2, .hm-head h2, .rc-board-head b, .cx-box h2, .tw-title {
  font-family: var(--font-title); font-weight: 800; letter-spacing: .3px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #f6dc8c; text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(60, 20, 8, .9)) drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
}
.map-title small, .panel-head h2 small, .hm-head h2 small, .cx-box h2 small, .tw-title small {
  -webkit-text-fill-color: currentColor; font-family: var(--font-ui); font-weight: 500; letter-spacing: .2px;
}
/* Emoji trong tiêu đề vàng: giữ màu gốc, không bị tô thành mảng vàng */
.emj { font-style: normal; -webkit-text-fill-color: initial; }
.panel-head h2 small, .hm-head h2 small, .cx-box h2 small { color: var(--lac-soft); }
.map-title small, .tw-title small { color: #f1d38a; }
.sp-label { font-weight: 600; letter-spacing: 1.2px; font-size: 11.5px; }

/* ---------- Nút ---------- */
.btn-game {
  font-family: var(--font-ui); font-weight: 600; letter-spacing: .3px; border-radius: 10px;
  background: linear-gradient(180deg, #c23a2c 0%, #932419 52%, #6e1a12 100%);
  border: 1px solid #efc566;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .4), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .45);
  transition: filter .18s var(--ease), box-shadow .22s var(--ease), transform .12s var(--ease), border-color .2s;
}
.btn-game:hover:not(:disabled) {
  transform: none; filter: brightness(1.12); border-color: #fff0c2;
  background: linear-gradient(180deg, #c23a2c 0%, #932419 52%, #6e1a12 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .5), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .35), 0 0 18px rgba(246, 190, 90, .35), 0 6px 16px rgba(0, 0, 0, .45);
}
.btn-game:active:not(:disabled) { transform: scale(.97); filter: brightness(.95); }
.btn-game.dark { background: linear-gradient(180deg, rgba(64, 46, 28, .96), rgba(30, 20, 11, .96)); border-color: rgba(233, 196, 106, .55); }
.btn-game.dark:hover:not(:disabled) { background: linear-gradient(180deg, rgba(84, 60, 34, .96), rgba(38, 26, 14, .96)); }
.btn-game:disabled { opacity: .55; filter: grayscale(.5); cursor: not-allowed; }
/* Nút thường (ít trang trí) trong bảng */
.panel button:not(.btn-game):not(.fd-tab):not(.g-card):not(.bh-chip):not(.socket):not(.gem-opt):not(.hm-x),
.hm-box button:not(.btn-game):not(.fd-tab):not(.hm-x):not(.cx-card) {
  border-radius: 8px; transition: background .18s var(--ease), border-color .18s, filter .18s;
}

/* ---------- Thẻ trong thanh trên cùng ---------- */
#topbar { background: linear-gradient(180deg, rgba(36, 25, 15, .97), rgba(16, 11, 6, .97)); backdrop-filter: blur(6px); }
#topbar nav button { transition: background .18s var(--ease), border-color .18s, box-shadow .2s; font-weight: 500; }
#topbar nav button:hover { box-shadow: 0 0 12px rgba(233, 196, 106, .25); }
.tb-res span { font-weight: 600; }

/* ---------- Thẻ chọn (tab) ---------- */
.fd-tab { transition: color .18s var(--ease), background .2s var(--ease), border-color .2s; font-weight: 500; }
:is(.panel, .hm-box, .rc-board) .fd-tab.on { font-weight: 600; }
/* Thẻ trong khung chi tiết tướng: giãn đều cả hàng, khung hẹp thì xuống dòng (không thẻ nào bị che) */
.panel .f-detail .fd-tabs { flex-wrap: wrap; }
.panel .f-detail .fd-tab { flex: 1 0 auto; padding: 8px 6px; font-size: 13.5px; white-space: nowrap; text-align: center; }
/* Hành trang: khung bên phải (chi tiết tướng / món đồ) rộng hơn */
.bag-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); }
/* Lưới chỉ số: mọi bảng cùng 2 cột, số căn phải thẳng hàng; "trước → sau" khi xem trước nâng cấp */
.panel .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel .stats .st b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats .st .arr, .fd-pw .arr { margin: 0 5px; color: var(--lac-soft); font-weight: 400; }
.stats .st .up, .fd-pw b.up { color: #9fd88a; }
.rc-board .fd-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.rc-board .fd-tabs::-webkit-scrollbar { display: none; }
.rc-board .fd-tab { flex: none; padding: 6px 11px; white-space: nowrap; }

/* ---------- Khung: bo tròn hơn, kính mờ khi nằm trên ảnh ---------- */
.panel { border-radius: 12px; }
.stage-panel, .ld-panel, .tw-panel, .recruit-box, .rc-board, .hm-box, .ld-logbox, .tw-ladder, .ld-msg {
  border-radius: 14px; backdrop-filter: blur(8px) saturate(1.15);
}
.stage-panel, .tw-panel, .ld-panel, .recruit-box, .rc-board {
  background: linear-gradient(180deg, rgba(34, 23, 13, .82), rgba(14, 9, 5, .86));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 236, 190, .08);
}
.bld-sign { border-radius: 10px; backdrop-filter: blur(4px); }
.bld-sign b { font-family: var(--font-title); font-weight: 800; }
/* Biển tên trên bức Thành: nhỏ, nền trong (thấy nhà phía sau), nằm trên thân nhà; rê chuột thì đậm lên */
.pmap .bld-sign {
  padding: calc(var(--mw) * .002) calc(var(--mw) * .008) calc(var(--mw) * .0026); border-radius: 8px;
  background: linear-gradient(rgba(58, 22, 12, .58), rgba(24, 10, 5, .62)); border-color: rgba(233, 196, 106, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .35); backdrop-filter: blur(2px);
  transition: background .2s var(--ease), border-color .2s, box-shadow .2s;
}
.pmap .bld-sign b { font-size: clamp(10px, calc(var(--mw) * .0118), 18px); text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.pmap .bld-sign small { font-size: clamp(8.5px, calc(var(--mw) * .0071), 11px); text-shadow: 0 1px 2px rgba(0, 0, 0, .9); opacity: .9; }
.pspot:is(:hover, :focus-visible) .bld-sign {
  background: linear-gradient(rgba(70, 26, 14, .9), rgba(30, 12, 6, .92)); border-color: #fff3d6;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 14px rgba(246, 190, 90, .35);
}
.plot-name { font-family: var(--font-ui); font-weight: 600; }

/* ---------- Thẻ đồ, tướng, ô: chuyển mượt khi rê chuột (không dịch chuyển) ---------- */
.g-card, .cx-card, .q-row, .ld-card, .tw-floor, .socket, .gem-opt, .bh-chip, .mg-step {
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .22s var(--ease), opacity .2s;
}
.panel .g-card { border-radius: 10px; }
.panel .g-card:hover:not(:disabled) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier, #e9c46a) 60%, transparent), 0 8px 20px rgba(0, 0, 0, .35); }
.cx-card { border-radius: 10px; }
.q-chip { border-radius: 999px; }

/* ---------- Tửu Lầu trên màn thấp (điện thoại nằm ngang): hộp chiêu mộ không tràn khỏi màn, nút luôn bấm được ---------- */
@media (min-width: 761px) {
  .recruit-screen .recruit-box { max-height: calc(100% - var(--tb-h) - 22px); overflow-y: auto; }
}
@media (max-height: 520px) {
  .recruit-box { padding: 10px 14px; }
  .recruit-box h1 { font-size: 22px; white-space: nowrap; }
  .recruit-box p { display: none; }
  .recruit-box .rates { font-size: 11px; margin-top: 4px; }
  .recruit-box .have { margin: 4px 0 6px; font-size: 13px; }
  .recruit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .recruit-actions .btn-game { padding: 6px 6px; font-size: 12px; white-space: nowrap; }
  .recruit-actions .btn-game[data-act="buy"] { grid-column: 1 / -1; }
}
@media (max-height: 520px) and (min-width: 761px) {
  .recruit-screen .recruit-box { width: 44%; }
  .recruit-screen .rc-board { width: 51%; }
}

/* ---------- Thành, Ruộng Dược, Mỏ trên màn dẹt: ảnh cao hơn khung thì kéo lên xuống được, biển tên ở mép dưới không bị cắt ---------- */
:is(.home-screen, .land-screen) .pmap-scroll { overflow-y: auto; }
:is(.home-screen, .land-screen) .pmap { top: 0; transform: none; }

/* ---------- Màn thấp (điện thoại nằm ngang): khung bảng gọn lại để phần giữa còn chỗ ---------- */
@media (max-height: 520px) {
  .panel-screen, .has-topbar .panel-screen { padding: 8px 10px; }
  .panel-screen > .panel { padding: 10px 14px; }
  .panel-head h2 { font-size: 20px; }
  .panel-head .fd-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 4px; }
  .panel-head .fd-tabs::-webkit-scrollbar { display: none; }
  .panel-head .fd-tab { flex: none; padding: 6px 10px; white-space: nowrap; }
  .panel-foot, .panel-foot.f-actions { margin-top: 4px; padding-top: 6px; }
  .panel-foot .btn-game { padding: 6px 12px; font-size: 13px; }
}

/* ---------- Logo màn mở đầu: chữ vàng nổi khối (phông Chonburi), "XẠ ĐIÊU" đỏ son, kiếm vắt ngang, quầng sáng ---------- */
.title-logo { top: 6%; display: flex; flex-direction: column; align-items: center; }
.tl-kicker { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 2px; animation: tl-in 1.4s ease-out both; }
.tl-kicker span {
  font: 700 clamp(11px, 1.15vw, 15px) var(--font-ui); letter-spacing: .36em; margin-right: -.36em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff3cf, #e9c46a 60%, #b8862e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9));
}
.tl-kicker i { position: relative; width: clamp(36px, 8vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, #e9c46a); }
.tl-kicker i:last-child { transform: scaleX(-1); }
.tl-kicker i::after { content: ''; position: absolute; right: -4px; top: -3px; width: 7px; height: 7px; transform: rotate(45deg); background: #f6dc8c; box-shadow: 0 0 6px rgba(246, 220, 140, .8); }
.title-logo h1 {
  position: relative; isolation: isolate; margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1;
  font: 400 clamp(36px, min(6vw, 9.4vh), 92px) "Chonburi", var(--font-title); letter-spacing: 0; color: inherit; text-shadow: none;
  animation: tl-in 1.6s .15s ease-out both;
}
/* Quầng sáng ấm phía sau chữ */
.title-logo h1::before {
  content: ''; position: absolute; z-index: -2; left: -20%; right: -20%; top: -12%; bottom: -8%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 58%, rgba(255, 214, 140, .5), rgba(255, 170, 80, .16) 45%, transparent 70%); filter: blur(6px);
}
/* Một chữ = 2 lớp chồng khít: lớp sau là khối đồng (viền + bề dày 3D + bóng), lớp trước là mặt vàng */
.tl-word { position: relative; display: inline-grid; text-transform: uppercase; }
.tl-word.sm { font-size: .48em; letter-spacing: .22em; margin: 0 -.22em -.12em 0; }
.tl-o, .tl-f { grid-area: 1 / 1; padding: .16em .1em .1em; white-space: nowrap; }
.tl-o {
  color: #5a2a08; -webkit-text-stroke: .07em #2a0c02;
  text-shadow: 0 1px 0 #a8641c, 0 2px 0 #96561a, 0 3px 0 #844a16, 0 4px 0 #723e12, 0 5px 0 #60320e, 0 6px 0 #4e270a, 0 7px 0 #3c1d07,
    0 10px 14px rgba(0, 0, 0, .65), 0 0 26px rgba(255, 170, 60, .45);
}
.tl-f {
  position: relative; z-index: 1;
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%) no-repeat,
    linear-gradient(180deg, #fffdf2 0%, #fff0b8 18%, #ffd35c 42%, #c2741c 50%, #e9a640 56%, #ffd77a 76%, #fff6d6 100%);
  background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px rgba(255, 250, 225, .55);
  animation: tl-shine 6s 2s ease-in-out infinite;
}
/* XẠ ĐIÊU: mặt đỏ son */
.tl-word.sm .tl-f {
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .7) 50%, transparent 58%) no-repeat,
    linear-gradient(180deg, #fff2ea 0%, #ffb59c 35%, #e0402c 55%, #9c1a10 100%);
  background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
}
.tl-word.sm .tl-o { color: #3a0a04; text-shadow: 0 1px 0 #6a1a0c, 0 2px 0 #5a140a, 0 3px 0 #4a1008, 0 6px 8px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 120, 60, .35); }
@keyframes tl-shine { 0% { background-position: 160% 0, 0 0; } 45%, 100% { background-position: -60% 0, 0 0; } }
@keyframes tl-in { from { opacity: 0; transform: scale(1.12); filter: blur(6px); } }
/* Kiếm vắt ngang sau chữ ANH HÙNG */
.tl-sword {
  position: absolute; z-index: -1; left: -14%; width: 128%; top: 54%; height: .55em;
  transform: translateY(-50%) rotate(-3deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6));
}
.tl-ribbon { margin-top: 4px; animation: tl-in 1.4s .45s ease-out both; }
.tl-ribbon span {
  display: inline-block; padding: 5px clamp(26px, 5vw, 56px) 6px; font: 600 clamp(12px, 1.2vw, 15px) var(--font-ui); letter-spacing: .05em; color: #ffe9b0;
  text-shadow: 0 1px 2px #000;
  background: linear-gradient(90deg, transparent, rgba(120, 24, 14, .85) 14%, rgba(150, 32, 18, .92) 50%, rgba(120, 24, 14, .85) 86%, transparent);
  border-block: 1px solid; border-image: linear-gradient(90deg, transparent, #e9c46a 20%, #f6dc8c 50%, #e9c46a 80%, transparent) 1;
}
.title-logo p, .title-logo .cn { display: none; }
@media (max-height: 820px) { .title-logo { top: 3%; } }
@media (max-width: 760px) and (orientation: portrait) { .title-logo { top: 58px; } .tl-kicker { display: none; } }   /* điện thoại: logo nằm dưới hàng 18+ */

/* ---------- Phân loại độ tuổi + cảnh báo thời gian chơi (góc trên trái màn mở đầu, như các game khác) ---------- */
.age-rate {
  position: absolute; z-index: 6; left: 14px; top: 12px; display: flex; align-items: center; gap: 9px;
  pointer-events: none; animation: scr-fade .6s ease-out both;
}
.age-badge {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 8px;
  font: 900 18px/1 var(--font-ui); color: #fff; letter-spacing: -.5px;
  background: linear-gradient(180deg, #ef4b33, #b4190f); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .5);
}
.age-rate span { max-width: 280px; text-align: left; font: 500 11.5px/1.4 var(--font-ui); color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .8); }
@media (max-width: 560px) { .age-badge { width: 36px; height: 36px; font-size: 14px; } .age-rate span { font-size: 10px; max-width: 62vw; } }

/* ---------- Thanh cuộn mảnh, màu vàng nhạt ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(233, 196, 106, .35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(233, 196, 106, .32); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(233, 196, 106, .5); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Chuyển màn: màn mới mờ dần hiện ra, khung trượt nhẹ lên ---------- */
.scr-in { animation: scr-fade .35s var(--ease) both; }
.scr-in :is(.panel, .stage-panel, .recruit-box, .rc-board, .tw-side, .tw-panel, .ld-hud, .title-menu) { animation: scr-rise .42s var(--ease) both; }
.home-modal { animation: scr-fade .2s var(--ease) both; }
.home-modal .hm-box { animation: scr-pop .28s var(--ease) both; }
@keyframes scr-fade { from { opacity: 0; } }
@keyframes scr-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes scr-pop { from { opacity: 0; transform: scale(.96); } }
#toast { transition: opacity .25s var(--ease), transform .25s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .scr-in, .scr-in *, .home-modal, .home-modal .hm-box { animation: none !important; }
}