/* ================= Bóng Đá Mini — giao diện ================= */
:root {
  --bg: #0d1117;
  --line: #2b3646;
  --txt: #e8eef6;
  --muted: #93a3b8;
  --red: #e04a3f;
  --blue: #3f7ce0;
  --accent: #ffd76a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #1d2836 0%, transparent 60%),
    var(--bg);
  color: var(--txt);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  justify-content: center;
  padding: 14px 12px 24px;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

.wrap {
  width: 100%;
  max-width: 1000px;
}

/* hiện/ẩn theo loại thiết bị và theo khả năng của trình duyệt */
.only-touch { display: none; }
body.is-touch .only-touch { display: block; }
body.is-touch .no-touch { display: none; }

.btn-ghost.only-fs { display: none; }
body.has-fs .btn-ghost.only-fs { display: block; }
/* để sau cùng: máy có toàn màn hình thì bỏ phần mách nước "thêm vào MH chính" */
body.has-fs .no-fs { display: none; }

/* ---------- Thanh tiêu đề ---------- */
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.topbar h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 800;
}

.hint-keys {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Khung sân ---------- */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  background: #0a1410;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

canvas {
  display: block;   /* kích thước + lề dưới do main.js đặt để giữ đúng tỉ lệ */
}

/* ---------- Lớp phủ menu ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 15, .74);
  backdrop-filter: blur(3px);
  padding: 14px;
  z-index: 20;
  /* khung sân chặn mọi cử chỉ chạm, phải mở lại cho menu cuộn được trên iOS */
  touch-action: pan-y;
}

.overlay.hidden,
.panel.hidden,
.touch.hidden { display: none; }

.panel {
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: linear-gradient(180deg, #1b2431, #141b25);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}

.panel-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  text-align: center;
}

.row { margin-bottom: 12px; }

.label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sub-note {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.55;
}

.sub-note b {
  background: #2b3646;
  padding: 1px 5px;
  border-radius: 4px;
  color: #dbe6f3;
}

/* ---------- Nút chọn dạng nhóm ---------- */
.seg {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.seg button {
  flex: 1 1 auto;
  min-width: 92px;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt);
  background: #212c3b;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .08s;
}

.seg-sm button {
  min-width: 74px;
  font-size: 13.5px;
}

.seg button:hover { background: #2a3748; }
.seg button:active { transform: translateY(1px); }

.seg button.active {
  background: linear-gradient(180deg, #3d7de0, #2b62bd);
  border-color: #5b98f5;
  color: #fff;
}

/* ---------- Nút chính ---------- */
.btn-main, .btn-ghost {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  padding: 13px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .14s, transform .08s;
}

.btn-main {
  color: #14200f;
  background: linear-gradient(180deg, #7ee06a, #46b53a);
  border: 1px solid #94ef82;
}

.btn-ghost {
  color: var(--txt);
  background: #212c3b;
  border: 1px solid var(--line);
}

.btn-main:hover, .btn-ghost:hover { filter: brightness(1.1); }
.btn-main:active, .btn-ghost:active { transform: translateY(1px); }

/* nút "CÀI VÀO MÁY" chỉ hiện khi trình duyệt báo là cài được (xem js/pwa.js) */
.btn-ghost.hidden { display: none; }

/* ---------- Bảng đội hình ---------- */
.row-lineup { margin-top: 14px; }

.lineups {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lu-team {
  flex: 1 1 170px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 9px 8px;
}

.lu-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  margin-bottom: 5px;
}

.lu-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  padding: 2px 4px;
  border-radius: 6px;
}

.lu-row.cur {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.lu-row b {
  min-width: 19px;
  height: 18px;
  border-radius: 5px;
  color: #10161f;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lu-name { font-weight: 700; }

.lu-row i {
  margin-left: auto;
  font-style: normal;
  color: var(--muted);
  font-size: 11px;
}

.lu-legend {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.lu-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}

/* ---------- Bảng hướng dẫn ---------- */
.controls {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: #c3cfdd;
  line-height: 1.75;
  flex-wrap: wrap;
}

.ctrl-col { flex: 1 1 200px; }

.ctrl-head {
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ctrl-col b {
  background: #2b3646;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

.dot-red { background: var(--red); }
.dot-blue { background: var(--blue); }

.tip {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* ---------- Kết quả ---------- */
.result-score {
  text-align: center;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 4px;
  margin: 6px 0 2px;
}

.result-sub {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}

/* nhiệm vụ vừa đạt hiện ngay dưới tỉ số */
.result-missions {
  margin: 2px 0 4px;
  padding: 8px 10px;
  background: rgba(255, 215, 106, .07);
  border: 1px solid rgba(255, 215, 106, .3);
  border-radius: 9px;
}

.result-missions.hidden { display: none; }

.ms-earn {
  text-align: center;
  font-size: 13.5px;
  padding: 2px 0;
  color: #dbe6f3;
}

.ms-earn b { color: var(--accent); }

/* ================= Màn hình chào =================
   Kích thước chữ/nút tính theo cqw (1% bề rộng khung sân) để giữ đúng tỉ lệ
   trên mọi máy; giá trị px đứng trước là mức dự phòng cho trình duyệt cũ. */
.overlay { container-type: inline-size; }

.overlay.home-bg { background: rgba(6, 10, 15, .45); }

.panel-home {
  position: absolute;
  inset: 0;
}

.panel-home.hidden { display: none; }

/* ---- thẻ hồ sơ + thẻ điểm ở góc trái trên ---- */
.home-chips {
  position: absolute;
  left: 3%;
  top: 5%;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.home-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  font-size: max(13px, 2.4cqw);
  font-weight: 800;
  text-align: left;
  color: var(--txt);
  background: rgba(16, 22, 31, .8);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: filter .14s, transform .08s;
}

.home-chip:hover { filter: brightness(1.15); }
.home-chip:active { transform: translateY(1px); }

.home-chip-pts {
  color: var(--accent);
  border-color: rgba(255, 215, 106, .45);
  border-radius: 999px;
}

.hc-avatar {
  font-size: 1.5em;
  line-height: 1;
}

.hc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 9em;
}

.hc-info b { line-height: 1.1; }

.hc-level {
  font-size: .72em;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* thanh XP mini ngay trên trang chủ — lúc nào cũng thấy mình sắp lên level chưa */
.hc-bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

.hc-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #7ee06a, #ffd76a);
  transition: width .5s ease;
}

/* ---- tựa đề kiểu nhãn dán: chữ vàng viền trắng, mỗi chữ nghiêng nhẹ ---- */
.home-title {
  position: absolute;
  left: 3%;
  width: 60%;
  top: 27%;
  text-align: center;
}

.home-word {
  display: inline-block;
  font-size: 56px;
  font-size: min(12.5cqw, 130px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--accent);
  filter: drop-shadow(0 .06em 0 rgba(0, 0, 0, .4));
  white-space: nowrap;
}

.hl {
  position: relative;
  display: inline-block;
  z-index: 0;
}

/* lớp viền trắng dày nằm dưới con chữ */
.hl::before {
  content: attr(data-l);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-text-stroke: .13em #f4f7fb;
}

.hl:nth-child(odd)  { transform: rotate(-3deg) translateY(-.02em); }
.hl:nth-child(even) { transform: rotate(2.5deg) translateY(.03em); }

.home-ball {
  display: inline-block;
  font-size: .62em;
  margin-left: .08em;
  vertical-align: .12em;
  animation: home-bounce 1.5s ease-in-out infinite;
}

@keyframes home-bounce {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-.35em) rotate(20deg); }
}

.home-mini {
  display: inline-block;
  margin-top: 12px;
  margin-top: 2.2cqw;
  padding: .2em 1em;
  font-size: 13px;
  font-size: max(13px, 2.6cqw);
  font-weight: 800;
  letter-spacing: .55em;
  text-indent: .55em;
  color: var(--txt);
  border: 2px solid rgba(244, 247, 251, .65);
  border-radius: 999px;
  background: rgba(6, 12, 9, .35);
}

/* ---- khung thành + bóng bay vào lưới + GOAL! ---- */
.home-goal {
  position: absolute;
  right: 3.5%;
  top: 7%;
  width: 33%;
  transform: rotate(-3deg);
  pointer-events: none;
}

.home-goal svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.home-traj { animation: home-traj 3.6s linear infinite; }

@keyframes home-traj {
  0%, 6%    { opacity: 0; }
  12%, 40%  { opacity: .8; }
  55%, 100% { opacity: 0; }
}

.home-fly {
  position: absolute;
  left: 40%;
  top: 42%;
  font-size: 32px;
  font-size: min(8.5cqw, 80px);
  line-height: 1;
  animation: home-fly 3.6s ease-out infinite;
}

@keyframes home-fly {
  0%        { transform: translate(-150%, 165%) scale(.65) rotate(0turn); opacity: 0; }
  8%        { opacity: 1; }
  36%       { transform: translate(0, 0) scale(1) rotate(1.6turn); }
  42%       { transform: translate(14%, 8%) scale(1) rotate(1.7turn); }
  84%       { transform: translate(14%, 8%) scale(1) rotate(1.7turn); opacity: 1; }
  93%, 100% { transform: translate(14%, 8%) scale(1) rotate(1.7turn); opacity: 0; }
}

.home-goaltext {
  position: absolute;
  right: -2%;
  bottom: -26%;
  font-size: 26px;
  font-size: min(6.5cqw, 60px);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--accent);
  transform: rotate(-6deg);
  text-shadow:
    .04em 0 0 #f4f7fb, -.04em 0 0 #f4f7fb, 0 .04em 0 #f4f7fb, 0 -.04em 0 #f4f7fb,
    .03em .03em 0 #f4f7fb, -.03em .03em 0 #f4f7fb, .03em -.03em 0 #f4f7fb, -.03em -.03em 0 #f4f7fb,
    0 .12em 0 rgba(0, 0, 0, .4);
  animation: home-goalpop 3.6s ease-out infinite;
}

@keyframes home-goalpop {
  0%, 30%   { opacity: 0; transform: rotate(-6deg) scale(.4); }
  38%       { opacity: 1; transform: rotate(-6deg) scale(1.15); }
  46%       { transform: rotate(-6deg) scale(1); }
  84%       { opacity: 1; }
  93%, 100% { opacity: 0; }
}

/* ---- ba nút dưới đáy: Nhiệm vụ · Chế độ · Vào chơi ---- */
.home-btns {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 6%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2%;
}

.home-btn {
  font: inherit;
  font-weight: 800;
  letter-spacing: .1em;
  border-radius: 12px;
  padding: .65em 1.2em;
  min-height: 44px;
  cursor: pointer;
  transition: filter .14s, transform .08s;
  white-space: nowrap;
}

.home-btn:hover { filter: brightness(1.12); }
.home-btn:active { transform: translateY(2px); }

.home-btn-play {
  font-size: 16px;
  font-size: max(16px, 3.6cqw);
  padding: .65em 1.5em;
  color: #14200f;
  background: linear-gradient(180deg, #7ee06a, #46b53a);
  border: 2px solid #94ef82;
  animation: home-glow 2.2s ease-in-out infinite;
}

@keyframes home-glow {
  0%, 100% { box-shadow: 0 8px 24px rgba(70, 181, 58, .35), 0 0 0 0 rgba(126, 224, 106, .45); }
  50%      { box-shadow: 0 8px 30px rgba(70, 181, 58, .55), 0 0 0 12px rgba(126, 224, 106, 0); }
}

/* máy chọn "giảm chuyển động": tắt hoạt ảnh, bóng nằm sẵn trong lưới */
@media (prefers-reduced-motion: reduce) {
  .home-ball, .home-fly, .home-goaltext, .home-btn-play, .home-traj { animation: none; }
  .home-fly { transform: translate(14%, 8%); opacity: 1; }
  .home-goaltext { opacity: 1; }
  .home-traj { opacity: .6; }
}

/* ================= Bảng nhiệm vụ ================= */
.ms-total {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
}

.ms-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 11px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 9px;
}

/* đã làm đủ lượt hôm nay */
.ms-row.maxed { opacity: .55; }

.ms-icon {
  flex: none;
  font-size: 20px;
  margin-top: 1px;
}

.ms-body { flex: 1; min-width: 0; }

.ms-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
}

.ms-pts {
  color: var(--accent);
  font-weight: 800;
  white-space: nowrap;
}

.ms-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

.ms-prog {
  font-size: 11.5px;
  color: #c3cfdd;
  margin-top: 3px;
}

.ms-prog b {
  color: var(--accent);
  letter-spacing: 2px;
  margin-right: 2px;
}

/* nhiệm vụ chưa tới level: mờ + khóa, mồi cho bé muốn lên level */
.ms-row.locked { opacity: .5; border-style: dashed; }
.ms-row.locked .ms-desc b { color: var(--accent); }

/* ================= Thanh XP (dùng chung hồ sơ + kết trận) ================= */
.xpbar {
  height: 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--line);
  overflow: hidden;
}

.xpbar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #7ee06a, #ffd76a);
  transition: width .9s cubic-bezier(.2, .7, .3, 1);
}

/* ================= Màn chào mừng (tạo/sửa hồ sơ) ================= */
.wc-intro {
  font-size: 13px;
  line-height: 1.6;
  color: #c3cfdd;
  margin-bottom: 12px;
}

/* người chơi cũ: hộp vàng báo "bắt đầu ngay ở Level N" */
.wc-seed {
  margin-bottom: 12px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #dbe6f3;
  background: rgba(255, 215, 106, .08);
  border: 1px solid rgba(255, 215, 106, .4);
  border-radius: 9px;
}

.wc-seed.hidden { display: none; }
.wc-seed b { color: var(--accent); }

.wc-name {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--txt);
  background: #212c3b;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
}

.wc-name:focus { border-color: #5b98f5; background: #243143; }

.wc-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wc-avatars button {
  flex: none;
  width: 52px;
  height: 52px;
  font-size: 26px;
  line-height: 1;
  background: #212c3b;
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .08s, border-color .14s, background .14s;
}

.wc-avatars button:hover { background: #2a3748; }
.wc-avatars button:active { transform: translateY(1px); }

.wc-avatars button.active {
  border-color: var(--accent);
  background: rgba(255, 215, 106, .14);
  transform: scale(1.08);
}

/* ================= Hồ sơ cầu thủ ================= */
.pf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pf-avatar {
  flex: none;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  font-size: 32px;
  background: rgba(255, 255, 255, .06);
  border: 2px solid var(--line);
  border-radius: 14px;
}

.pf-who { flex: 1; min-width: 0; }

.pf-name {
  font-size: 19px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-id {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .5px;
}

/* danh hiệu kiểu nhãn dán vàng — cùng chất với chữ GOAL! ở trang chủ */
.pf-badge {
  flex: none;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(255, 215, 106, .09);
  border: 1px solid rgba(255, 215, 106, .4);
  border-radius: 999px;
  transform: rotate(2deg);
}

.pf-levelbox {
  padding: 11px 13px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.pf-level-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
  font-size: 14px;
}

.pf-level-row b { color: var(--accent); font-size: 16px; }
.pf-level-row span { font-size: 12.5px; color: #c3cfdd; }

/* rào số trận: XP đầy vẫn phải ra sân — dòng này nói rõ còn thiếu gì */
.pf-gate {
  margin-top: 7px;
  font-size: 12px;
  color: #c3cfdd;
}

.pf-gate.ok { color: #7ee06a; }

.pf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 4px;
}

.pf-stat {
  padding: 8px 4px;
  text-align: center;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.pf-stat b {
  display: block;
  font-size: 17px;
  color: var(--txt);
}

.pf-stat span {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* nút tái sinh: vàng GOAT, chỉ hiện khi đứng ở level trần */
.btn-rebirth {
  color: #241a04;
  background: linear-gradient(180deg, #ffd76a, #e0a72e);
  border: 1px solid #ffe49a;
}

.btn-rebirth.hidden { display: none; }

/* ================= XP ở màn kết trận ================= */
.result-xp {
  margin: 10px 2px 2px;
  padding: 10px 12px;
  background: rgba(126, 224, 106, .06);
  border: 1px solid rgba(126, 224, 106, .3);
  border-radius: 9px;
}

.result-xp.hidden { display: none; }

.xp-lines {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin-bottom: 6px;
}

.xp-line {
  font-size: 12px;
  color: #c3cfdd;
}

.xp-line b { color: #7ee06a; }
.xp-line b.neg { color: #ff9d8a; }

.xp-total {
  text-align: center;
  font-size: 17px;
  font-weight: 900;
  color: #7ee06a;
  margin-bottom: 7px;
}

.xp-level-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
  font-size: 12.5px;
}

.xp-level-row b { color: var(--accent); }
.xp-level-row span { color: #c3cfdd; }

/* chữ dán LÊN LEVEL — cùng họ với GOAL! ở màn hình chào */
.levelup {
  margin-top: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--accent);
  transform: rotate(-3deg);
  text-shadow:
    .04em 0 0 #f4f7fb, -.04em 0 0 #f4f7fb, 0 .04em 0 #f4f7fb, 0 -.04em 0 #f4f7fb,
    0 .12em 0 rgba(0, 0, 0, .4);
  animation: levelup-pop .6s cubic-bezier(.2, 1.4, .4, 1) both;
}

.levelup.hidden { display: none; }

@keyframes levelup-pop {
  0%   { opacity: 0; transform: rotate(-3deg) scale(.3); }
  70%  { opacity: 1; transform: rotate(-3deg) scale(1.15); }
  100% { transform: rotate(-3deg) scale(1); }
}

.unlockmsg {
  margin-top: 6px;
  text-align: center;
  font-size: 12.5px;
  color: #c3cfdd;
}

.unlockmsg.hidden { display: none; }
.unlockmsg b { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .levelup { animation: none; }
  .xpbar i, .hc-bar i { transition: none; }
}

/* ================= Điều khiển cảm ứng =================
   --u = 1% chiều cao khung sân, do main.js đặt, nên mọi nút
   giữ đúng tỉ lệ trên mọi kích thước máy. */
.touch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}

/* Vùng bắt ngón tay của cần điều khiển: chạm đâu cũng được, vòng sẽ hiện ra đó */
.stickzone {
  position: absolute;
  left: var(--sl);
  bottom: var(--sb);
  width: 44%;
  height: 78%;
  pointer-events: auto;
  touch-action: none;
  z-index: 1;
}

.stick {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  max-width: 200px;
  max-height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
  border: 2px solid rgba(255, 255, 255, .38);
  pointer-events: none;   /* .stickzone lo phần nhận ngón tay */
  opacity: .34;
  transition: opacity .12s;
}

.stick.live { opacity: 1; }

.knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.tbtn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  z-index: 2;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  border: 2px solid rgba(255, 255, 255, .5);
  transition: transform .07s, filter .12s, opacity .15s, box-shadow .12s;
}

.tbtn span {
  white-space: nowrap;
  font-size: calc(var(--u) * 4.2);
  font-size: min(calc(var(--u) * 4.2), 28px);
}

.tbtn.down { transform: scale(.93); filter: brightness(1.35); }

/* --- Điện thoại nằm ngang: hai bên đã có dải trống, xếp nút dọc bên phải --- */
.t-kick {
  right: calc(var(--u) * 3 + var(--sr));
  bottom: calc(var(--u) * 3 + var(--sb));
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  max-width: 150px;
  max-height: 150px;
  background: rgba(224, 74, 63, .82);
}

.t-kick span {
  font-size: calc(var(--u) * 3.9);
  font-size: min(calc(var(--u) * 3.9), 26px);
}

.t-tackle {
  right: calc(var(--u) * 3.5 + var(--sr));
  bottom: calc(var(--u) * 30 + var(--sb));
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 19);
  max-width: 120px;
  max-height: 120px;
  background: rgba(63, 124, 224, .82);
}

.t-tackle.cool {
  opacity: .34;
  filter: grayscale(.6);
}

.t-swap {
  right: calc(var(--u) * 5 + var(--sr));
  bottom: calc(var(--u) * 52 + var(--sb));
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  max-width: 96px;
  max-height: 96px;
  background: rgba(88, 102, 122, .78);
}

.t-swap span {
  font-size: calc(var(--u) * 3.4);
  font-size: min(calc(var(--u) * 3.4), 21px);
}

/* --- Máy tính bảng: main.js chừa một dải trống dưới đáy (.band),
       nút xếp thành vòng cung trong dải đó nên không đè lên mặt sân. --- */
.stage.band .t-kick {
  right: calc(var(--u) * 3 + var(--sr));
  bottom: calc(var(--u) * 2.5 + var(--sb));
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  max-width: 152px;
  max-height: 152px;
}

.stage.band .t-tackle {
  right: calc(var(--u) * 24 + var(--sr));
  bottom: calc(var(--u) * 4 + var(--sb));
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
  max-width: 122px;
  max-height: 122px;
}

.stage.band .t-swap {
  right: calc(var(--u) * 43 + var(--sr));
  bottom: calc(var(--u) * 6 + var(--sb));
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  max-width: 96px;
  max-height: 96px;
}

/* Vòng lực trên nút SÚT: cho biết nhả bây giờ là chuyền hay sút mạnh */
.t-kick .chg {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(var(--ring, #9be86a) calc(var(--p, 0) * 360deg), rgba(0, 0, 0, 0) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  opacity: 0;
  transition: opacity .1s;
  pointer-events: none;
}

.t-kick.charging .chg { opacity: 1; }
.t-kick.shoot .chg { --ring: #ffd76a; }
.t-kick.shoot { box-shadow: 0 0 0 3px rgba(255, 215, 106, .45); }

.t-pause {
  right: calc(var(--u) * 3 + var(--sr));
  top: calc(var(--u) * 3);
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  max-width: 56px;
  max-height: 56px;
  background: rgba(10, 16, 24, .6);
  border-color: rgba(255, 255, 255, .32);
}

.t-pause span {
  font-size: calc(var(--u) * 3.6);
  font-size: min(calc(var(--u) * 3.6), 22px);
}

/* ---------- Nhắc quay ngang máy ---------- */
.rotate {
  position: fixed;    /* phủ kín màn hình, không chỉ khung sân */
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 15, .93);
  text-align: center;
  padding: 20px;
}

/* game chỉ chơi ngang: mọi máy cảm ứng để dọc đều bị nhắc, kể cả máy tính bảng */
body.is-touch.portrait .rotate { display: flex; }

.rotate-icon {
  font-size: 54px;
  animation: tilt 1.6s ease-in-out infinite;
}

.rotate-text {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.rotate-text small {
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
}

@keyframes tilt {
  0%, 100% { transform: rotate(0deg); }
  55% { transform: rotate(-90deg); }
  90% { transform: rotate(-90deg); }
}

/* ---------- Chân trang ---------- */
.footer {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: #5c6b7f;
}

/* ---------- Dải nhắc có bản mới ----------
   Nổi trên mọi thứ (kể cả chế độ toàn màn hình) nhưng KHÔNG tự tải lại —
   người chơi bấm khi nào rảnh, không bị cắt ngang trận đang đá. */
.updatebar {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 16px;
  font-size: 13px;
  color: var(--txt);
  background: rgba(20, 27, 38, 0.95);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}

.updatebar.hidden { display: none; }

.updatebar button {
  flex: none;
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #14200f;
  background: linear-gradient(180deg, #7ee06a, #46b53a);
  border: 1px solid #94ef82;
  border-radius: 8px;
  cursor: pointer;
}

.updatebar button:hover { filter: brightness(1.1); }
.updatebar button:active { transform: translateY(1px); }

/* ================= Chơi bằng ngón tay: sân chiếm cả màn hình =================
   main.js đặt class .immersive khi đang ở chế độ cảm ứng và hướng máy dùng được. */
body.immersive {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
}

body.immersive .wrap {
  max-width: none;
  height: 100%;
}

body.immersive .topbar,
body.immersive .footer { display: none; }

body.immersive .stage {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

/* màn hình thấp: thu gọn menu cho vừa */
@media (max-height: 470px) {
  .panel { padding: 12px 14px; }
  .panel-title { font-size: 15px; margin-bottom: 9px; letter-spacing: .5px; }
  .row { margin-bottom: 8px; }
  .label { margin-bottom: 4px; font-size: 11px; }
  .seg button { min-height: 40px; padding: 8px 10px; font-size: 14px; }
  .btn-main, .btn-ghost { min-height: 40px; padding: 10px; margin-top: 8px; font-size: 14px; }
  .controls { margin-top: 8px; padding-top: 8px; line-height: 1.45; font-size: 11.5px; gap: 10px; }
  .row-lineup { margin-top: 8px; }
  .lu-row { font-size: 11.5px; padding: 1px 4px; }
  .result-score { font-size: 34px; }
  .tip, .lu-legend { display: none; }
}

@media (max-width: 560px) {
  .topbar h1 { font-size: 16px; }
  .hint-keys { display: none; }
  body { padding: 8px 8px 14px; }
}

/* ---------- Chọn đội (panelTeams) ---------- */
.team-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.team-tabs button {
  flex: 1;
  min-height: 44px;
  padding: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--txt);
  background: #212c3b;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.team-tabs button.active {
  background: linear-gradient(180deg, #3d7de0, #2b62bd);
  border-color: #5b98f5;
  color: #fff;
}

/* dải chip chọn giải: cuộn ngang trên máy hẹp */
.league-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  margin-bottom: 10px;
  scrollbar-width: thin;
}
.league-row button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--txt);
  background: #1c2634;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.league-row button.active { background: #31538c; border-color: #5b98f5; color: #fff; }

/* lưới thẻ đội */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  font: inherit;
  color: var(--txt);
  background: #1c2634;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  min-height: 104px;
}
.team-card:hover { background: #24334a; }
.team-card:active { transform: translateY(1px); }
.team-card.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.team-card .tc-name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.team-card .tc-ovr { font-size: 12px; font-weight: 800; color: var(--muted); }
.team-card .tc-ovr b { color: var(--accent); font-size: 13.5px; }

/* huy hiệu tự vẽ: khiên màu áo + mã tắt (không dùng logo thật) */
.tbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 52px;
  height: 40px;
  padding: 0 8px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 1px;
  border: 2px solid #fff;
  border-radius: 10px 10px 14px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.tbadge i { font-style: normal; font-size: 13px; }
.tbadge.big { min-width: 70px; height: 54px; font-size: 19px; border-radius: 12px 12px 18px 18px; }

/* ---------- Màn xác nhận trước trận (panelVersus) ---------- */
.vs-box { display: flex; align-items: stretch; gap: 8px; }
.vs-side { flex: 1; min-width: 0; }
.vs-side .vs-who {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  text-align: center;
}
.vs-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.vs-head .vs-name { font-size: 14.5px; font-weight: 800; text-align: center; line-height: 1.15; }
.vs-head .vs-ovr { font-size: 12.5px; color: var(--muted); }
.vs-head .vs-ovr b { color: var(--accent); font-size: 14px; }
.vs-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  padding: 0 2px;
}
.vs-five { display: flex; flex-direction: column; gap: 3px; }
.vs-five .vp {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1c2634;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 7px;
  font-size: 12.5px;
  min-width: 0;
}
.vs-five .vp b {
  flex: 0 0 auto;
  width: 26px;
  text-align: center;
  border-radius: 6px;
  font-size: 11px;
  padding: 2px 0;
  color: #15202e;
}
.vs-five .vp .vp-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vs-five .vp .vp-o { flex: 0 0 auto; font-weight: 800; color: var(--muted); }
.vs-note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 8px; }

/* ---------- Xếp đội hình / thay người (panelLineup) ---------- */
.lf-formations button { flex-direction: column; gap: 1px; line-height: 1.15; min-width: 70px; }
.lf-formations button b { font-size: 15px; font-weight: 800; }
.lf-formations button i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.lf-formations button.active i { color: rgba(255, 255, 255, .88); }
.lf-formdesc { font-size: 12px; color: var(--muted); text-align: center; margin: 6px 2px 10px; min-height: 15px; }

/* sân mini — tấn công sang phải, cầu môn nhà bên trái */
.lf-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 1.7 / 1;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .22);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .22) 50%, transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 50%, transparent 12%, rgba(255, 255, 255, .16) 12.6%, transparent 14%),
    repeating-linear-gradient(90deg, #2f7f3c 0 9%, #2a7436 9% 18%);
  overflow: hidden;
  touch-action: manipulation;
}

.lf-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 74px;
  padding: 4px 3px 3px;
  background: rgba(8, 12, 18, .72);
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: transform .08s, border-color .14s, background .14s;
}
.lf-slot:active { transform: translate(-50%, -50%) scale(.96); }
.lf-slot.sel { border-color: var(--accent); background: rgba(59, 124, 224, .5); box-shadow: 0 0 0 2px rgba(91, 152, 245, .5); }
.lf-slot b, .lf-card b {
  display: inline-block;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: #15202e;
}
.lf-slot .lf-nm { font-size: 11px; font-weight: 700; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-slot .lf-ov { font-size: 11px; font-weight: 800; color: #ffd76a; }

.lf-benchhead { margin: 14px 0 6px; font-weight: 700; font-size: 13px; color: var(--txt); }
/* 10 dự bị xếp xuống sẽ đẩy nút XONG ra khỏi tầm nhìn ở màn hình ngang —
   cho khu ghế tự cuộn trong khung của nó, panel bên ngoài giữ nguyên chiều cao */
.lf-bench {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  max-height: 132px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 4px;
}
.lf-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: #212c3b;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--txt);
  cursor: pointer;
  font: inherit;
  transition: background .14s, transform .08s;
}
.lf-card:hover { background: #2a3748; }
.lf-card:active { transform: translateY(1px); }
.lf-card .lf-nm { font-size: 13px; font-weight: 600; }
.lf-card .lf-ov { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.lf-empty { font-size: 12.5px; color: var(--muted); padding: 6px 2px; }
.lf-hint { margin: 12px 2px; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- Panel Tài khoản & đồng bộ (/sdk/portal.js) ---------- */
/* Repo không có rule .hidden toàn cục — phải khai riêng cho các phần tử này,
   nếu không classList.toggle('hidden') vô tác dụng (form + info cùng hiện). */
#acctForm.hidden,
#acctInfo.hidden,
#wcAccountRow.hidden,
.acct-msg.hidden,
.fr-section.hidden { display: none; }

.acct-intro {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 12px;
}
.acct-inp {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font: inherit;
  font-size: 16px;
  color: var(--txt);
  background: #212c3b;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
}
.acct-inp:focus { border-color: var(--accent); }
.acct-msg {
  font-size: 13px;
  margin: 4px 0 10px;
  color: #ff8a75;
}
.acct-msg.ok { color: #7fd4a0; }
.acct-who {
  text-align: center;
  padding: 10px 0 4px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #1a2331;
}
.acct-name { font-size: 20px; font-weight: 800; color: var(--txt); }
.acct-code { font-size: 13px; color: var(--muted); margin-top: 4px; }
.acct-sync { font-size: 12.5px; color: #7fd4a0; margin-top: 6px; }

/* ---------- Bảng xếp hạng (panelLeaderboard) ---------- */
.lb-list { margin: 4px 0 12px; max-height: 46vh; overflow-y: auto; }
.lb-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 16px 0; }
.lb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: #1a2331; border: 1px solid var(--line); border-radius: 10px;
}
.lb-row.me { border-color: var(--accent); background: #2a2a1c; }
.lb-rank { width: 26px; font-weight: 800; color: var(--muted); text-align: center; }
.lb-av { font-size: 20px; }
.lb-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-lv { font-size: 12px; color: var(--muted); }
.lb-pts { font-size: 13px; font-weight: 700; color: var(--accent); }

/* ---------- Bạn bè (panelFriends) ---------- */
.fr-add { display: flex; gap: 8px; align-items: stretch; }
.fr-add .acct-inp { margin-bottom: 0; flex: 1; }
.fr-add .btn-main { width: auto; white-space: nowrap; padding: 0 14px; }
.fr-section { margin-top: 12px; }
.fr-head { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.fr-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: #1a2331; border: 1px solid var(--line); border-radius: 10px;
}
.fr-info { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.fr-info b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-info small { font-size: 11px; color: var(--muted); }
.fr-actions { display: flex; gap: 6px; }
.fr-btn {
  font: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px;
  color: var(--txt); background: #2b3646; border: 1px solid var(--line); cursor: pointer;
}
.fr-btn.ok { background: #1e5b3a; border-color: #2e7d52; }

/* ---------- Lối vào online nổi ở trang chủ ---------- */
/* Đặt absolute ngay DƯỚI thẻ hồ sơ (góc trái trên), thành hàng gọn — không bị
   thẻ hồ sơ (cũng absolute) che, không đè khung thành bên phải. */


/* ======================================================================
   2026-10: Vòng quay thưởng · Nhiệm vụ tuần/thành tích · Đá online 1-1
   ====================================================================== */
.badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: #e0313f; color: #fff;
  font-style: normal; font-size: 11px; font-weight: 900; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px #0d1117; animation: badgePop 1.6s ease-in-out infinite;
}
.badge.hidden { display: none; }
@keyframes badgePop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

.panel-wide { width: min(760px, 100%); }
.btn-main:disabled, .sp-hub:disabled { filter: grayscale(.7) brightness(.75); cursor: not-allowed; }

/* ---- Nhiệm vụ: tab + rương + thanh tiến độ ---- */
.ms-tabs { margin-bottom: 10px; }
.ms-sub { font-size: 12px; color: var(--muted); margin: 2px 0 8px; text-align: center; }
.ms-bar { height: 7px; border-radius: 4px; background: #0e141c; border: 1px solid var(--line); overflow: hidden; margin: 6px 0 3px; }
.ms-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3fbf7f, #ffd76a); border-radius: 4px; transition: width .5s; }
.ms-row.dim { opacity: .62; }
.ch-box { background: rgba(255, 215, 106, .06); border: 1px solid rgba(255, 215, 106, .28); border-radius: 12px; padding: 10px 14px 26px; margin-bottom: 10px; }
.ch-head { font-size: 13px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ch-head b { color: var(--accent); }
.ch-tip { color: var(--muted); font-size: 11px; }
.ch-track { position: relative; height: 10px; margin: 16px 8px 0; border-radius: 5px; background: #0e141c; border: 1px solid var(--line); }
.ch-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, #d68a1f, #ffd76a); transition: width .5s; }
.ch-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.ch-mark b { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.ch-mark small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.ch-mark.open b { animation: none; }
.ch-mark:not(.open) b { animation: chestWiggle 2.4s ease-in-out infinite; }
@keyframes chestWiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }

/* ---- Màn kết trận: phần thưởng ---- */
.result-rewards { margin: 8px 0 10px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(201, 164, 0, .14), rgba(201, 164, 0, .05)); border: 1px solid rgba(255, 215, 106, .35); }
.result-rewards.hidden { display: none; }
.rw-head { font-size: 17px; font-weight: 900; color: var(--accent); text-align: center; }
.rw-head small { font-size: 12px; color: var(--muted); font-weight: 600; }
.rw-line { font-size: 12px; color: var(--muted); text-align: center; margin-top: 3px; }
.rw-item { font-size: 13px; margin-top: 6px; padding: 5px 8px; background: rgba(0, 0, 0, .25); border-radius: 8px; }
.rw-item.ach { border-left: 3px solid #ffd76a; }

/* ---- Vòng quay ---- */
.sp-layout { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.sp-wheelbox { position: relative; width: min(300px, 70vw, 52vh); aspect-ratio: 1; flex: none; }
.sp-wheel {
  position: absolute; inset: 0; border-radius: 50%;
  border: 6px solid #f4d36a;
  box-shadow: 0 0 0 4px #5a3d00, 0 10px 30px rgba(0, 0, 0, .55), inset 0 0 22px rgba(0, 0, 0, .35);
  will-change: transform;
}
.sp-seg { position: absolute; left: 50%; top: 0; height: 50%; width: 0; transform-origin: 50% 100%; }
.sp-seg span {
  position: absolute; left: 50%; top: 9%; transform: translateX(-50%);
  width: 76px; text-align: center;
  font-size: 11px; font-weight: 900; color: #fff; line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.sp-seg span i { display: block; font-style: normal; font-size: 22px; margin-bottom: 2px; }
.sp-pointer {
  position: absolute; left: 50%; top: -12px; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 28px solid #ff3b47; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6));
}
.sp-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  border: 4px solid #f4d36a; background: radial-gradient(circle at 35% 30%, #ffe9a3, #d18e00);
  color: #3a2500; font: inherit; font-weight: 900; font-size: 15px; letter-spacing: 1px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.sp-hub:not(:disabled):active { transform: translate(-50%, -50%) scale(.95); }
.sp-side { flex: 1 1 220px; max-width: 320px; display: flex; flex-direction: column; gap: 8px; }
.sp-tickets { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.sp-tickets span { font-size: 26px; }
.sp-tickets b { font-size: 34px; color: var(--accent); }
.sp-tickets small { color: var(--muted); }
.sp-result { text-align: center; padding: 10px; border-radius: 12px; background: rgba(63, 191, 127, .14); border: 1px solid rgba(63, 191, 127, .5); animation: resPop .45s cubic-bezier(.2, 1.6, .4, 1); }
.sp-result.big { background: linear-gradient(135deg, rgba(255, 215, 106, .28), rgba(160, 70, 214, .28)); border-color: #ffd76a; }
.sp-result.hidden { display: none; }
.sp-res-icon { font-size: 40px; line-height: 1.1; }
.sp-res-text { font-weight: 800; }
.sp-res-ach { margin-top: 6px; font-size: 12px; color: var(--accent); }
@keyframes resPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sp-pity { font-size: 12px; color: var(--muted); text-align: center; }
.sp-pity b { color: var(--accent); }
.sp-how { font-size: 11px; color: var(--muted); line-height: 1.45; }
.sp-inv { margin-top: 14px; }
.sp-inv small { color: var(--muted); font-weight: 500; }
.sp-balls, .sp-avatars { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.sp-ball {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; padding: 6px 4px;
  border-radius: 10px; border: 1px solid var(--line); background: #10161f; color: var(--txt); font: inherit; font-size: 10px; cursor: pointer;
}
.sp-ball i { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset -3px -3px 6px rgba(0, 0, 0, .35); }
.sp-ball.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 215, 106, .35); }
.sp-ball.locked { opacity: .35; cursor: default; }
.sp-av { width: 38px; height: 38px; display: grid; place-items: center; font-size: 22px; border-radius: 10px; background: #10161f; border: 1px solid var(--line); }
.sp-av.locked { opacity: .35; }
.wc-avatars button.rare { border-color: #a046d6; box-shadow: inset 0 0 10px rgba(160, 70, 214, .45); }

/* ---- Online 1-1 ---- */
.ol-intro { font-size: 13px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.ol-code { text-align: center; font-size: 15px; margin-bottom: 10px; }
.ol-code b { font-size: 34px; letter-spacing: 6px; color: var(--accent); display: block; font-variant-numeric: tabular-nums; }
.ol-players { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.ol-p { flex: 1; max-width: 200px; text-align: center; padding: 10px; border-radius: 12px; background: #10161f; border: 1px solid var(--line); }
.ol-p .av { font-size: 30px; }
.ol-p.red { border-color: var(--red); }
.ol-p.blue { border-color: var(--blue); }
.ol-p.empty { opacity: .45; border-style: dashed; }
.ol-status { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.ol-hud {
  position: absolute; top: 8px; right: 10px; z-index: 4;
  font-size: 11px; color: var(--muted); background: rgba(0, 0, 0, .45); padding: 2px 8px; border-radius: 8px; pointer-events: none;
}
.ol-hud.hidden { display: none; }
.ms-row.ach-done { border-color: rgba(255, 215, 106, .55); background: linear-gradient(90deg, rgba(255, 215, 106, .12), transparent 70%); }

/* ======================================================================
   GIAO DIỆN v2 (2026-10) — đặt cuối file để đè lên kiểu cũ.
   Nguyên tắc: nền tối xanh sân cỏ, thẻ kính mờ, viền sáng nhẹ, góc bo lớn,
   nút có chiều sâu (bóng đổ + viền trên sáng), chữ đậm dễ đọc cho trẻ em.
   ====================================================================== */
:root {
  --bg: #0b1218;
  --card: rgba(20, 28, 38, .92);
  --card2: rgba(28, 38, 52, .9);
  --line: #2a3a4d;
  --line2: rgba(255, 255, 255, .09);
  --txt: #eef3f9;
  --muted: #94a6bb;
  --accent: #ffd34d;
  --accent2: #ffb020;
  --green: #4fd05f;
  --green2: #2ea043;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

body {
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(79, 208, 95, .12), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(63, 124, 224, .12), transparent 60%),
    var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.topbar h1 { color: var(--accent); text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.stage { border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .07); }

/* ---- lớp phủ + bảng ---- */
.overlay { background: radial-gradient(circle at 50% 40%, rgba(8, 14, 20, .62), rgba(4, 8, 12, .86)); backdrop-filter: blur(4px) saturate(1.1); }
.overlay.home-bg { background: linear-gradient(180deg, rgba(4, 8, 12, .55), rgba(4, 8, 12, .15) 35%, rgba(4, 8, 12, .2) 65%, rgba(4, 8, 12, .7)); backdrop-filter: blur(1.5px); }

.panel {
  background: linear-gradient(180deg, rgba(30, 41, 56, .97), rgba(17, 24, 33, .97));
  border: 1px solid var(--line2);
  border-radius: 20px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 20px 22px 22px;
  animation: panelIn .22s cubic-bezier(.2, .9, .3, 1.15);
  scrollbar-width: thin; scrollbar-color: #3a4c63 transparent;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.panel-title {
  position: relative;
  font-size: 19px; font-weight: 900; letter-spacing: 1.5px;
  color: var(--accent);
  margin: -2px 0 16px;
  padding-bottom: 12px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.panel-title::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ---- nút ---- */
.btn-main, .btn-ghost { border-radius: 13px; letter-spacing: 1.2px; }
.btn-main {
  color: #0f2a10;
  background: linear-gradient(180deg, #8af07a 0%, #4fd05f 45%, #2ea043 100%);
  border: 1px solid #a6f597;
  box-shadow: 0 6px 0 #1f7a30, 0 10px 22px rgba(46, 160, 67, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
  margin-bottom: 6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-main:active { transform: translateY(4px); box-shadow: 0 2px 0 #1f7a30, 0 4px 10px rgba(46, 160, 67, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-ghost {
  background: linear-gradient(180deg, #263345, #1c2735);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.btn-ghost:hover { border-color: #3d5370; }

.seg { gap: 6px; background: rgba(0, 0, 0, .22); padding: 4px; border-radius: 13px; border: 1px solid var(--line2); }
.seg button { background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--muted); }
.seg button:hover { background: rgba(255, 255, 255, .05); color: var(--txt); }
.seg button.active {
  background: linear-gradient(180deg, #4b8df0, #2c66c7);
  border-color: #6aa5ff; color: #fff;
  box-shadow: 0 3px 10px rgba(44, 102, 199, .45);
}

.acct-inp, .wc-name {
  background: #0e151e !important; border: 1px solid var(--line) !important; border-radius: 12px !important;
  transition: border-color .15s, box-shadow .15s;
}
.acct-inp:focus, .wc-name:focus { outline: none; border-color: #5b98f5 !important; box-shadow: 0 0 0 3px rgba(91, 152, 245, .25); }

.ms-row { border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015)); border: 1px solid var(--line2); }
.ms-icon { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }

/* ================= Trang chủ v2 ================= */
.home-chips { left: 2.5%; top: 4.5%; gap: 1cqw; align-items: center; }
.home-chip {
  background: linear-gradient(180deg, rgba(24, 33, 45, .9), rgba(14, 20, 28, .9));
  border: 1px solid var(--line2);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: .35em .8em;
}
.home-chip-pts, .home-chip-tix { border-radius: 999px; font-size: max(12px, 2.1cqw); padding: .45em .9em; }
.home-chip-tix { color: #ffb3c4; border-color: rgba(255, 120, 150, .4); }
.home-chip-tix b { color: #fff; }
.hc-avatar { font-size: 1.7em; width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #34465e, #18222f); box-shadow: inset 0 0 0 2px rgba(255, 211, 77, .55); }

.home-dock { position: absolute; right: 2.5%; top: 4.5%; display: flex; gap: .8cqw; z-index: 3; }
.dock-btn {
  display: flex; flex-direction: column; align-items: center; gap: .25em;
  width: max(52px, 8.2cqw); padding: .55em .2em .45em;
  font: inherit; color: var(--txt); cursor: pointer;
  background: linear-gradient(180deg, rgba(24, 33, 45, .88), rgba(14, 20, 28, .88));
  border: 1px solid var(--line2); border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .1s, filter .15s, border-color .15s;
}
.dock-btn i { font-style: normal; font-size: max(18px, 3cqw); line-height: 1; }
.dock-btn span { font-size: max(9px, 1.35cqw); font-weight: 800; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-btn:hover { filter: brightness(1.15); border-color: rgba(255, 211, 77, .45); }
.dock-btn:active { transform: translateY(2px); }

/* khung thành nhỏ lại + lùi xuống để nhường góc phải cho dock */
.home-goal { top: 21%; width: 30%; right: 4%; }
.home-title { top: 22%; }

.home-btns { left: 2.5%; right: 2.5%; bottom: 5%; gap: 1.4cqw; align-items: stretch; }
.home-card {
  position: relative; flex: 1 1 0; min-width: 0;
  padding: .7em .7em !important;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55em; align-items: center;
  padding: .7em .9em; text-align: left;
  font: inherit; color: var(--txt); cursor: pointer;
  border-radius: 16px;
  border: 1px solid var(--line2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .1s, filter .15s;
}
.home-card i { grid-row: 1 / 3; font-style: normal; font-size: max(22px, 4.2cqw); line-height: 1; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.home-card b { font-size: max(11px, 1.65cqw); font-weight: 900; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-card small { font-size: max(9px, 1.35cqw); color: rgba(238, 243, 249, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-card:hover { filter: brightness(1.12); transform: translateY(-2px); }
.home-card:active { transform: translateY(1px); }
.hc-mission { background: linear-gradient(160deg, rgba(150, 100, 0, .92), rgba(70, 45, 0, .92)); border-color: rgba(255, 211, 77, .45); }
.hc-mission b { color: var(--accent); }
.hc-spin { background: linear-gradient(160deg, rgba(150, 40, 120, .92), rgba(70, 18, 70, .92)); border-color: rgba(255, 140, 220, .4); }
.hc-spin b { color: #ffc2ec; }
.hc-online { background: linear-gradient(160deg, rgba(35, 85, 190, .92), rgba(15, 35, 90, .92)); border-color: rgba(120, 170, 255, .45); }
.hc-online b { color: #cfe0ff; }
.hc-spin.has-tix i { animation: spinIcon 3s linear infinite; }
@keyframes spinIcon { to { transform: rotate(360deg); } }

.home-btn-play {
  flex: 1.05 1 0; min-width: 0;
  font-size: max(15px, 2.9cqw);
  border-radius: 18px;
  background: linear-gradient(180deg, #8af07a 0%, #4fd05f 45%, #2ea043 100%);
  border: 2px solid #a6f597;
  box-shadow: 0 7px 0 #1f7a30, 0 14px 30px rgba(46, 160, 67, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.home-btn-play:active { transform: translateY(5px); box-shadow: 0 2px 0 #1f7a30, 0 6px 14px rgba(46, 160, 67, .35); }
.home-card .badge { top: -8px; right: -6px; }

/* màn hẹp (điện thoại ngang nhỏ): ẩn dòng phụ, thu tiêu đề */
@container (max-width: 640px) {
  .home-card small, .dock-btn span { display: none; }
  .home-card { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: .55em .4em; }
  .home-card i { grid-row: auto; }
  .home-chip-pts { display: none; }
}

/* ================= Màn kết quả v2 ================= */
.result-score {
  font-size: 54px; font-weight: 900; letter-spacing: 4px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff, #c9d6e6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35));
}
#panelResult.res-win .panel-title { color: #7df08a; }
#panelResult.res-loss .panel-title { color: #ff9a8a; }
#panelResult.res-draw .panel-title { color: #9cc7ff; }
#panelResult.res-win { border-color: rgba(125, 240, 138, .35); box-shadow: var(--shadow), 0 0 60px rgba(79, 208, 95, .18); }
#panelResult { position: relative; overflow-x: hidden; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.confetti i {
  position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; opacity: .9;
  animation: confFall var(--d, 2.6s) cubic-bezier(.25, .6, .4, 1) var(--delay, 0s) forwards;
}
@keyframes confFall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(520px) rotate(var(--r, 540deg)); opacity: 0; }
}
.xp-total { color: var(--accent); }
.levelup { animation: lvPulse 1s ease-in-out 3; }
@keyframes lvPulse { 50% { transform: scale(1.08); } }

/* ================= Màn chơi: thẻ Tạm dừng nhỏ gọn ================= */
#panelPause { width: min(480px, 100%); }

@media (prefers-reduced-motion: reduce) {
  .panel, .confetti i, .hc-spin.has-tix i, .badge { animation: none !important; }
}
#olLobby.hidden, #olRoom.hidden, .btn-main.hidden, .sub-note.hidden, .result-missions.hidden { display: none; }

/* ---- nút cảm ứng v2: khối nổi, viền sáng, bóng đổ ---- */
.tbtn { box-shadow: 0 8px 18px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -4px 0 rgba(0, 0, 0, .2); border: 2px solid rgba(255, 255, 255, .22); }
.t-kick { background: radial-gradient(circle at 35% 30%, rgba(255, 122, 104, .92), rgba(216, 54, 42, .88) 60%, rgba(161, 31, 23, .88)); }
.t-tackle { background: radial-gradient(circle at 35% 30%, rgba(127, 178, 255, .92), rgba(47, 111, 214, .86) 60%, rgba(29, 74, 160, .86)); }
.t-swap { background: radial-gradient(circle at 35% 30%, rgba(125, 142, 166, .9), rgba(74, 91, 114, .82) 65%); }
.tbtn span { text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }

/* ======================================================================
   CLB của tôi · thẻ cầu thủ kiểu FC · cửa hàng gói · mở gói · quà đăng nhập
   ====================================================================== */
.hc-club { background: linear-gradient(160deg, rgba(20, 120, 90, .92), rgba(8, 55, 45, .92)); border-color: rgba(110, 240, 190, .4); }
.hc-club b { color: #b8ffe3; }
.home-chip-coin { border-radius: 999px; font-size: max(12px, 2.1cqw); padding: .45em .9em; color: #ffe08a; border-color: rgba(255, 211, 77, .45); }
.home-chip-coin b { color: #fff; }

/* ---- thẻ cầu thủ ---- */
.fc-card {
  --c1: #c98a55; --c2: #7a4a26; --ink: #2a1708; --line: rgba(255, 255, 255, .35);
  position: relative; width: 132px; aspect-ratio: 5 / 7; flex: none;
  border-radius: 14px 14px 18px 18px; padding: 8px 8px 7px;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  color: var(--ink); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), inset 0 0 0 2px var(--line), inset 0 2px 0 rgba(255, 255, 255, .45);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.fc-card::before { /* vệt sáng chéo */
  content: ''; position: absolute; inset: -40% -60%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
}
.fc-card.t-silver { --c1: #f1f5fa; --c2: #8f9cab; --ink: #1d2733; }
.fc-card.t-gold { --c1: #fff0a8; --c2: #c9951b; --ink: #3a2600; }
.fc-card.t-elite { --c1: #3b2470; --c2: #0d0a24; --ink: #ffe9a8; --line: rgba(255, 211, 77, .75); }
.fc-card.t-elite::after { /* ánh lấp lánh chạy quanh thẻ huyền thoại */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 70%, rgba(255, 211, 77, .55) 80%, transparent 90%);
  mix-blend-mode: screen; animation: eliteGlow 3s linear infinite;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes eliteGlow { to { --a: 360deg; } }
.fc-top { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 4px; line-height: 1; }
.fc-ovr { font-size: 30px; font-weight: 900; letter-spacing: -1px; }
.fc-pos { grid-column: 1; font-size: 12px; font-weight: 900; opacity: .85; margin-top: 2px; }
.fc-flag { grid-column: 1; font-size: 14px; margin-top: 3px; min-height: 14px; }
.fc-club { position: absolute; right: 0; top: 2px; font-size: 9px; font-weight: 900; color: #fff; padding: 2px 5px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.fc-face { flex: 1; display: grid; place-items: center; font-size: 34px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); margin-top: -18px; }
.fc-name { text-align: center; font-weight: 900; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px 0; }
.fc-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin-top: 4px; }
.fc-stats span { font-size: 8px; font-weight: 800; opacity: .85; display: flex; flex-direction: column; }
.fc-stats b { font-size: 12px; font-weight: 900; opacity: 1; }
.fc-badge { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 0 0 8px 8px; background: #e0313f; color: #fff; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.fc-card.sm { width: 100px; padding: 6px 6px 5px; border-radius: 11px 11px 14px 14px; }
.fc-card.sm .fc-ovr { font-size: 23px; }
.fc-card.sm .fc-face { font-size: 24px; margin-top: -14px; }
.fc-card.sm .fc-name { font-size: 10.5px; }
.fc-card.sm .fc-stats b { font-size: 10px; }
.fc-card.sm .fc-stats span { font-size: 7px; }

/* ---- CLB ---- */
.cl-bar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.cl-bar > span { padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line2); }
.cl-bar b { color: var(--accent); }
.cl-tabs { margin-bottom: 12px; }
.cl-empty { text-align: center; padding: 18px 10px; color: var(--muted); line-height: 1.6; }
.cl-empty b { color: var(--txt); }
.cl-form { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.cl-form b { color: var(--txt); }
.cl-xi { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.cl-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cl-role { font-size: 10px; font-weight: 900; color: #10161f; padding: 2px 8px; border-radius: 6px; }
.cl-tiers { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.ct { font-size: 12px; padding: 4px 10px; border-radius: 8px; font-weight: 800; }
.ct.t-elite { background: #2a1a55; color: #ffe08a; } .ct.t-gold { background: #6b5208; color: #fff0a8; }
.ct.t-silver { background: #4b5664; color: #f1f5fa; } .ct.t-bronze { background: #5a3a20; color: #f3c79c; }
.cl-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 46vh; overflow-y: auto; padding: 4px; }

/* ---- cửa hàng ---- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.st-pack { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px 4px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line2); text-align: center; }
.st-art {
  width: 74px; height: 100px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .35); position: relative; overflow: hidden;
}
.st-art span { font-size: 30px; font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.st-art small { font-size: 10px; font-weight: 900; color: rgba(255, 255, 255, .85); letter-spacing: 2px; }
.st-art::before { content: '⚽'; position: absolute; font-size: 70px; opacity: .14; }
.p-bronze .st-art { background: linear-gradient(160deg, #c98a55, #6e4524); }
.p-silver .st-art { background: linear-gradient(160deg, #e6ecf3, #7d8a99); }
.p-gold .st-art { background: linear-gradient(160deg, #ffe27a, #b8860b); }
.p-elite .st-art { background: linear-gradient(160deg, #6a3fd0, #1a0f40); box-shadow: 0 8px 22px rgba(120, 80, 255, .5), inset 0 0 0 2px rgba(255, 211, 77, .7); }
.st-name { font-weight: 900; }
.st-odds { font-size: 10.5px; color: var(--muted); line-height: 1.4; min-height: 2.8em; }
.st-buy { margin-top: 2px; padding: 9px; min-height: 0; font-size: 14px; }

/* ---- mở gói ---- */
.panel-pack { background: radial-gradient(circle at 50% 40%, rgba(40, 60, 90, .97), rgba(8, 12, 18, .98)); }
.pk-stage { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; min-height: 210px; padding: 10px 0; perspective: 900px; position: relative; }
.pk-stage.walkout::before { /* ánh đèn sân khi ra thẻ Huyền thoại */
  content: ''; position: absolute; inset: -30px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 211, 77, .35), transparent 60%), conic-gradient(from 0deg, transparent, rgba(160, 110, 255, .25), transparent 30%);
  animation: walkout 1.6s ease-out;
}
@keyframes walkout { 0% { opacity: 0; transform: scale(.6) rotate(-20deg); } 40% { opacity: 1; } 100% { opacity: .8; transform: scale(1) rotate(0); } }
.pk-slot { width: 132px; aspect-ratio: 5 / 7; animation: pkIn .4s cubic-bezier(.2, 1.4, .4, 1) calc(var(--i) * 80ms) both; }
@keyframes pkIn { from { opacity: 0; transform: translateY(30px) scale(.8); } }
.pk-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.pk-slot.open .pk-flip { transform: rotateY(180deg); }
.pk-back, .pk-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pk-back {
  border-radius: 14px; display: grid; place-items: center; font-size: 40px;
  background: repeating-linear-gradient(45deg, #1d3557 0 10px, #16294a 10px 20px); box-shadow: inset 0 0 0 3px rgba(255, 211, 77, .5), 0 8px 18px rgba(0, 0, 0, .5);
  animation: pkWiggle 1s ease-in-out infinite;
}
@keyframes pkWiggle { 50% { transform: translateY(-4px); } }
.pk-front { transform: rotateY(180deg); }
.pk-slot.open.t-gold .pk-front { filter: drop-shadow(0 0 14px rgba(255, 211, 77, .7)); }
.pk-slot.open.t-elite .pk-front { filter: drop-shadow(0 0 22px rgba(170, 120, 255, .9)); animation: elitePop .7s ease-out; }
@keyframes elitePop { 0% { transform: rotateY(180deg) scale(1.3); } 100% { transform: rotateY(180deg) scale(1); } }
.pk-sum { text-align: center; font-size: 14px; min-height: 1.4em; margin: 4px 0; }
.pk-sum b { color: var(--accent); }

/* ---- quà đăng nhập ---- */
.lg-sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.lg-sub b { color: var(--accent); }
.lg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 6px; }
.lg-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line2); text-align: center; }
.lg-day small { font-size: 10px; color: var(--muted); font-weight: 800; }
.lg-day i { font-style: normal; font-size: 26px; line-height: 1.1; }
.lg-day span { font-size: 11px; font-weight: 800; }
.lg-day.done { opacity: .5; }
.lg-day.today { border-color: var(--accent); background: rgba(255, 211, 77, .12); box-shadow: 0 0 0 2px rgba(255, 211, 77, .3); animation: lvPulse 1.4s ease-in-out infinite; }
.lg-day.big { grid-column: span 2; background: linear-gradient(160deg, rgba(150, 110, 10, .35), rgba(0, 0, 0, .25)); }
.team-card.mine { border-color: rgba(255, 211, 77, .6) !important; }
#tabMine.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fc-card.t-elite::after, .pk-back, .lg-day.today { animation: none; }
}
/* 5 thẻ hành động: dọc (icon trên · tên · dòng phụ) cho đủ chỗ chữ */
.home-card { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: .15em; padding: .55em .4em !important; }
.home-card i { grid-row: auto; font-size: max(20px, 3.4cqw); }
.home-card b { max-width: 100%; }
.home-card small { max-width: 100%; }
.home-btn-play { font-size: max(14px, 2.5cqw); padding: .4em .6em; letter-spacing: .06em; }

/* ---- đá online v2: băng-rôn đầu trận + cảnh báo mạng ---- */
.ol-hud.warn { color: #ffd34d; background: rgba(120, 60, 0, .75); font-size: 12px; font-weight: 800; padding: 4px 10px; }
.ol-banner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 22px; border-radius: 16px;
  background: rgba(6, 10, 15, .78); border: 1px solid rgba(255, 211, 77, .5); text-align: center; opacity: 0;
}
.ol-banner b { font-size: 22px; font-weight: 900; color: var(--accent); letter-spacing: 1px; }
.ol-banner span { font-size: 13px; color: var(--txt); }
.ol-banner.show { animation: olBanner 3.8s ease-out forwards; }
@keyframes olBanner { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.9); } 10%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; } }

/* ======================================================================
   Mùa giải (Season Pass + Hạng đấu) · sự kiện · chi tiết thẻ · thẻ đặc biệt · ăn ý
   ====================================================================== */
.dock-season { border-color: rgba(199, 155, 255, .45); }
.dock-btn { position: relative; }
.dock-btn .badge { top: -6px; right: -6px; }

.ss-tabs { margin-bottom: 10px; }
.ss-head { text-align: center; margin-bottom: 10px; font-size: 13px; }
.ss-head b { color: var(--accent); font-size: 16px; }
.ss-head small { color: var(--muted); font-size: 11px; }
.ss-pass { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; max-height: 44vh; overflow-y: auto; padding: 2px; }
.ss-tier {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px;
  font: inherit; color: var(--txt); background: rgba(0, 0, 0, .25); border: 1px solid var(--line2); cursor: default;
}
.ss-tier small { font-size: 10px; color: var(--muted); font-weight: 900; }
.ss-tier i { font-style: normal; font-size: 22px; line-height: 1.1; }
.ss-tier span { font-size: 10.5px; font-weight: 800; text-align: center; }
.ss-tier.lock { opacity: .45; }
.ss-tier.got { opacity: .55; }
.ss-tier.can { cursor: pointer; border-color: var(--accent); background: rgba(255, 211, 77, .14); animation: lvPulse 1.4s ease-in-out infinite; }
.ss-tier.big { background: linear-gradient(160deg, rgba(120, 80, 220, .35), rgba(0, 0, 0, .25)); }

.rk-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--dc) 30%, transparent), rgba(0, 0, 0, .3)); border: 1px solid var(--dc); margin-bottom: 10px;
}
.rk-icon { font-size: 52px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.rk-info { display: flex; flex-direction: column; gap: 3px; }
.rk-info b { font-size: 22px; font-weight: 900; color: var(--dc); }
.rk-info small { color: var(--muted); font-size: 11px; }
.rk-wdl { display: flex; flex-direction: column; gap: 2px; font-size: 12px; text-align: right; }
.rk-wdl b { color: var(--txt); }
.rk-ladder { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.rk-row { display: grid; grid-template-columns: 28px 90px 80px 1fr; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .2); font-size: 12px; }
.rk-row i { font-style: normal; font-size: 18px; }
.rk-row small { color: var(--muted); }
.rk-row span { color: var(--muted); font-size: 11px; text-align: right; }
.rk-row.cur { border: 1px solid var(--accent); background: rgba(255, 211, 77, .1); }
.result-rank { text-align: center; font-size: 14px; margin: 4px 0 8px; padding: 8px; border-radius: 10px; background: rgba(120, 80, 220, .15); border: 1px solid rgba(199, 155, 255, .35); }
.result-rank.hidden { display: none; }
.result-rank .up { color: #7df08a; } .result-rank .down { color: #ff9a8a; }
.result-rank small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

.ev-row .ms-desc .tbadge { vertical-align: middle; transform: scale(.8); }
.ev-go { margin-top: 6px; padding: 8px; min-height: 0; font-size: 13px; width: auto; display: inline-block; }

/* ---- thẻ đặc biệt + cấp nâng ---- */
.fc-card.k-totw { --c1: #1f3b2a; --c2: #050b07; --ink: #e9ffe9; --line: rgba(110, 240, 160, .75); }
.fc-card.k-icon { --c1: #fffaf0; --c2: #d8c38a; --ink: #3a2a00; --line: rgba(255, 255, 255, .95); box-shadow: 0 8px 22px rgba(255, 220, 140, .55), inset 0 0 0 2px var(--line); }
.fc-kind { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-size: 8px; font-weight: 900; letter-spacing: 1px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .45); color: #fff; z-index: 1; }
.fc-card.k-icon .fc-kind { background: #b8860b; }
.fc-card.k-totw .fc-kind { background: #1c7c43; }
.fc-lv { position: absolute; right: 6px; bottom: 30%; font-size: 10px; font-weight: 900; color: #fff; background: #2c66c7; padding: 1px 5px; border-radius: 6px; z-index: 1; }
.fc-card.tap { cursor: pointer; transition: transform .12s; }
.fc-card.tap:hover { transform: translateY(-3px) scale(1.03); }

.cd-wrap { display: flex; gap: 16px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.cd-side { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.cd-lv { color: var(--accent); font-weight: 900; letter-spacing: 2px; }
.cd-st { display: grid; grid-template-columns: 74px 1fr 28px; gap: 8px; align-items: center; font-size: 12px; }
.cd-st .ms-bar { margin: 0; }
.cd-st b { text-align: right; }
.cd-kind { font-size: 12px; color: #7df08a; font-weight: 800; }

.cl-chem { font-size: 10px; letter-spacing: 1px; color: #7df08a; }
.cl-chemtip { text-align: center; font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.cl-form .chem { color: #7df08a; }

/* ======================================================================
   Tối ưu + tinh chỉnh (2026-10-24)
   ====================================================================== */
/* máy cảm ứng (điện thoại/iPad): bỏ backdrop-filter — làm mờ lớp phủ đè lên canvas đang vẽ
   là việc nặng nhất của GPU; thay bằng nền tối đặc hơn, nhìn gần như y hệt */
@media (pointer: coarse) {
  .overlay, .overlay.home-bg { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .overlay { background: radial-gradient(circle at 50% 40%, rgba(8, 14, 20, .78), rgba(4, 8, 12, .93)); }
  .panel { box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
  .fc-card.t-elite::after { animation-duration: 5s; }
}

/* nút âm thanh trên thanh tiêu đề */
.top-right { display: flex; align-items: center; gap: 10px; }
.top-btn {
  width: 36px; height: 36px; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer;
  background: linear-gradient(180deg, #263345, #1c2735); border: 1px solid var(--line); color: var(--txt);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
.top-btn:active { transform: translateY(1px); }

/* thông báo nổi */
.toasts { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast {
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 800; color: #fff; white-space: nowrap;
  background: rgba(14, 20, 28, .94); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  animation: toastIn .3s cubic-bezier(.2, 1.4, .4, 1);
}
.toast.ok { border-color: rgba(125, 240, 138, .5); }
.toast.out { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.92); } }

/* điều hướng bằng bàn phím: viền rõ ràng (không hiện khi bấm chuột/chạm) */
button:focus-visible, .seg button:focus-visible, input:focus-visible { outline: 3px solid rgba(255, 211, 77, .85); outline-offset: 2px; }

/* màn thấp (điện thoại nằm ngang): bảng sát mép hơn, tiêu đề gọn */
@media (max-height: 460px) {
  .panel { padding: 12px 14px 14px; border-radius: 16px; }
  .panel-title { font-size: 16px; margin-bottom: 10px; padding-bottom: 8px; }
  .btn-main, .btn-ghost { min-height: 40px; padding: 10px; margin-top: 7px; font-size: 14px; }
  .topbar { margin-bottom: 4px; }
}
/* Cài đặt trận: 2 cột trên màn rộng cho khỏi phải cuộn */
@container (min-width: 720px) {
  #panelMenu:not(.hidden) { width: min(820px, 100%); }
  #panelMenu .panel-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: start; }
  #panelMenu .panel-body > * { grid-column: 1 / -1; }
  #panelMenu .panel-body > .row:not(.row-lineup) { grid-column: auto; }
}

/* ======================================================================
   BỐ CỤC THEO THIẾT BỊ (2026-10-24): tiêu đề · nội dung cuộn · thanh nút cố định
   (DOM do structurePanels() trong main.js sắp lại lúc khởi động)
   ====================================================================== */
.panel:not(.hidden) { display: flex; flex-direction: column; }
.panel { overflow: hidden; max-height: 100%; }
.panel-title { flex: none; }
.panel-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  margin: 0 -6px; padding: 0 6px 4px;            /* chừa chỗ cho viền focus / bóng đổ khỏi bị cắt */
  scrollbar-width: thin; scrollbar-color: #3a4c63 transparent;
}
.panel-body::-webkit-scrollbar { width: 6px; }
.panel-body::-webkit-scrollbar-thumb { background: #3a4c63; border-radius: 3px; }
/* bóng mờ ở mép dưới nội dung: báo hiệu "còn nữa, kéo xuống" */
.panel-body { mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); }

.panel-foot {
  flex: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
  padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line2);
}
.panel-foot > .btn-main, .panel-foot > .btn-ghost { flex: 1 1 150px; width: auto; margin: 0; }
.panel-foot > .btn-main { flex-grow: 2; }
.panel-foot > .hidden { display: none; }

/* nút phụ: lưới 2 cột trong nội dung */
.btn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 10px; }
.btn-grid > .btn-ghost, .btn-grid > .btn-main { margin: 0; width: auto; }
.btn-grid > .hidden { display: none; }
body.has-fs .btn-grid > .only-fs { display: block; }

/* các bảng có ô cuộn riêng bên trong → để thân bảng lo cuộn, bỏ trần cao cũ */
.cl-grid, .ss-pass { max-height: none; overflow: visible; }

/* ---------------- ĐIỆN THOẠI NẰM NGANG (màn thấp) ----------------
   Bảng chiếm trọn chiều cao, rộng hơn để bớt phải cuộn, chữ/nút gọn lại. */
@media (max-height: 520px) {
  .overlay { padding: 6px 8px; align-items: stretch; }
  .panel { width: min(760px, 100%); height: 100%; padding: 8px 14px 10px; border-radius: 14px; }
  .panel-wide { width: min(880px, 100%); }
  .panel-title { font-size: 15px; margin: 0 0 6px; padding-bottom: 6px; letter-spacing: 1px; }
  .panel-title::after { width: 40px; height: 2px; }
  .panel-foot { padding-top: 7px; margin-top: 4px; gap: 6px; }
  .panel-foot > .btn-main, .panel-foot > .btn-ghost,
  .btn-grid > .btn-ghost { min-height: 38px; padding: 8px 10px; font-size: 13px; letter-spacing: .8px; border-radius: 11px; }
  .panel-foot > .btn-main { box-shadow: 0 4px 0 #1f7a30, 0 6px 14px rgba(46, 160, 67, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }
  .btn-grid { gap: 6px; margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .sub-note { font-size: 11px; line-height: 1.45; }
  .seg button { min-height: 36px; padding: 6px 8px; font-size: 13px; }
  .ms-row { padding: 7px 10px; }
  .ms-total, .cl-bar, .ss-head { margin-bottom: 6px; }
  .ms-tabs, .cl-tabs, .ss-tabs { margin-bottom: 8px; }
  /* màn Đối đầu: thu gọn danh sách 5 cầu thủ */
  .vs-box { gap: 8px; }
  .vp { padding: 2px 6px; }
  /* vòng quay nhỏ lại cho vừa chiều cao */
  .sp-wheelbox { width: min(230px, 46vh); }
  .sp-layout { gap: 12px; flex-wrap: nowrap; }
  .sp-tickets b { font-size: 26px; }
  /* màn mở gói: thẻ nhỏ hơn để 3-4 thẻ nằm gọn một hàng */
  .pk-slot, .pk-slot .fc-card { width: 108px; }
  .pk-stage { min-height: 0; padding: 4px 0; gap: 8px; }
  .fc-card:not(.sm) { width: 108px; }
  .fc-card:not(.sm) .fc-ovr { font-size: 24px; }
  .fc-card:not(.sm) .fc-face { font-size: 26px; }
  .result-score { font-size: 36px; }
  .lg-day { padding: 6px 4px; }
  .lg-day i { font-size: 20px; }
  .cd-wrap { flex-wrap: nowrap; }
  .rk-card { padding: 10px 12px; }
  .rk-icon { font-size: 38px; }
}

/* điện thoại rất thấp (≤400px, vd iPhone SE ngang 667×375): bỏ bớt chữ phụ */
@media (max-height: 400px) {
  .panel-title { font-size: 14px; }
  .acct-intro, .ol-intro, .wc-intro, .lg-sub, .ms-sub, .cl-chemtip { display: none; }
  .panel-foot > .btn-main, .panel-foot > .btn-ghost, .btn-grid > .btn-ghost { min-height: 34px; padding: 6px 8px; font-size: 12.5px; }
}

/* ---------------- TRANG CHỦ trên màn thấp/hẹp ---------------- */
@media (max-height: 520px) {
  .home-goaltext { display: none; }        /* chữ GOAL! chồng lên nút VÀO CHƠI */
  .home-goal { top: 20%; width: 26%; }
}
@container (max-width: 960px) {
  .dock-btn { width: max(40px, 6.6cqw); padding: .5em .2em; }
  .dock-btn span { display: none; }
  .dock-btn i { font-size: max(18px, 3.2cqw); }
  .home-chips { max-width: calc(100% - 4 * max(40px, 6.6cqw) - 5 * .8cqw - 6%); }
  .hc-info { min-width: 0; }
  .hc-info b, .hc-level { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22cqw; }
}
/* chip lượt quay chỉ hiện khi thật rộng — số lượt đã có sẵn trên thẻ QUAY THƯỞNG */
@container (max-width: 1150px) {
  .home-chip-tix { display: none; }
}

/* ---------------- MÁY TÍNH BẢNG (cao ≥ 600px) ----------------
   Đủ chỗ: bảng vừa nội dung, căn giữa, nút to dễ bấm bằng ngón tay. */
@media (min-height: 600px) and (pointer: coarse) {
  .panel { max-height: 94%; }
  .panel-foot > .btn-main, .panel-foot > .btn-ghost, .btn-grid > .btn-ghost { min-height: 50px; font-size: 15px; }
  .seg button { min-height: 48px; }
}

/* iPhone nằm ngang: chừa tai thỏ / Dynamic Island / thanh home (viewport-fit=cover đã bật) */
body.immersive .overlay {
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
body.immersive .home-chips { left: max(2.5%, env(safe-area-inset-left)); }
body.immersive .home-title { left: max(3%, env(safe-area-inset-left)); }
body.immersive .home-dock { right: max(2.5%, env(safe-area-inset-right)); }
body.immersive .home-btns {
  left: max(2.5%, env(safe-area-inset-left));
  right: max(2.5%, env(safe-area-inset-right));
  bottom: max(5%, env(safe-area-inset-bottom));
}

/* hệ số thưởng theo độ khó */
.dmul { display: block; font-size: 10.5px; font-weight: 700; opacity: .8; margin-top: 1px; }
.dmul.hot { color: #ffb36b; opacity: 1; }
.seg button.active .dmul.hot { color: #ffe0b3; }
.rw-mul { text-align: center; font-size: 12.5px; font-weight: 800; margin-bottom: 4px; }
.rw-mul.hard { color: #ffb36b; }
.rw-mul.easy { color: var(--muted); }

/* ======================================================================
   Kho đồ · khung avatar · chuyển nhượng (2026-10-25)
   ====================================================================== */
.dock-items { border-color: rgba(110, 240, 190, .4); }
.it-tabs { margin-bottom: 8px; }
.it-tabs button { min-width: 0; }
.it-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; align-content: start; }
.it-tip { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); text-align: center; margin-bottom: 2px; }
.it-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 6px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .2)); border: 1px solid var(--line2); position: relative;
}
.it-card b { font-size: 12px; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
.it-card small { font-size: 10px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.it-card.r-rare { border-color: rgba(91, 156, 255, .45); }
.it-card.r-epic { border-color: rgba(176, 107, 255, .5); background: linear-gradient(180deg, rgba(176, 107, 255, .1), rgba(0, 0, 0, .2)); }
.it-card.r-legendary { border-color: rgba(255, 194, 61, .6); background: linear-gradient(180deg, rgba(255, 194, 61, .12), rgba(0, 0, 0, .2)); }
.it-card:not(.own) > i { filter: saturate(.75) brightness(.9); }
.it-btn { margin: 2px 0 0 !important; width: 100%; min-height: 32px !important; padding: 6px !important; font-size: 12px !important; letter-spacing: .5px; }
.it-btn.on { color: #7df08a; border-color: rgba(125, 240, 138, .5); opacity: 1; }
.it-ball { width: 42px; height: 42px; border-radius: 50%; display: block; box-shadow: inset -4px -4px 8px rgba(0, 0, 0, .35); margin: 4px 0; }
.it-emo { font-style: normal; font-size: 34px; line-height: 50px; height: 50px; display: grid; place-items: center; }
.it-kit { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 26px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.it-frame { width: 50px; border-radius: 50%; font-size: 28px; }

/* khung avatar: dùng chung cho ô avatar trang chủ (.hc-avatar), hồ sơ (#pfAvatar), ô xem trước */
[data-frame] { border-radius: 50%; }
[data-frame="green"]   { box-shadow: 0 0 0 3px #3fbf5f; }
[data-frame="silver"]  { box-shadow: 0 0 0 3px #d9e2ec, 0 0 8px rgba(255, 255, 255, .4); }
[data-frame="gold"]    { box-shadow: 0 0 0 3px #ffd34d, 0 0 12px rgba(255, 211, 77, .6); }
[data-frame="fire"]    { box-shadow: 0 0 0 3px #ff6a1f, 0 0 14px 2px rgba(255, 90, 20, .75); animation: frFire 1.2s ease-in-out infinite alternate; }
[data-frame="ice"]     { box-shadow: 0 0 0 3px #9fe6ff, 0 0 14px 2px rgba(140, 220, 255, .7); }
[data-frame="neon"]    { box-shadow: 0 0 0 3px #2cff8f, 0 0 16px 3px rgba(44, 255, 143, .7); animation: frFire 1s ease-in-out infinite alternate; }
[data-frame="galaxy"]  { box-shadow: 0 0 0 3px #8a5cff, 0 0 18px 4px rgba(120, 80, 255, .7); }
[data-frame="rainbow"] { box-shadow: 0 0 0 3px #ff4d4d, 0 0 0 6px #ffd34d, 0 0 0 9px #4dc3ff, 0 0 16px 6px rgba(255, 255, 255, .3); animation: frHue 3s linear infinite; }
[data-frame="crown"]   { box-shadow: 0 0 0 3px #ffd34d, 0 0 0 6px #b8860b, 0 0 20px 6px rgba(255, 211, 77, .6); }
[data-frame="crown"]::after { content: '👑'; position: absolute; top: -.65em; left: 50%; transform: translateX(-50%); font-size: .55em; }
.hc-avatar, #pfAvatar { position: relative; }
@keyframes frFire { to { filter: brightness(1.25); } }
@keyframes frHue { to { filter: hue-rotate(360deg); } }

/* chuyển nhượng */
.mk-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.mk-refresh { width: auto !important; margin: 0 !important; min-height: 32px !important; padding: 6px 12px !important; font-size: 12px !important; }
.mk-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mk-buy { width: 100px !important; margin: 0 !important; min-height: 30px !important; padding: 5px !important; font-size: 12px !important; }
@media (prefers-reduced-motion: reduce) { [data-frame] { animation: none !important; } }

/* ---- Kim cương 💎 ---- */
.home-chip-gem { border-radius: 999px; font-size: max(12px, 2.1cqw); padding: .45em .9em; color: #b8f3ff; border-color: rgba(127, 233, 255, .45); }
.home-chip-gem b { color: #fff; }
.cl-gems b { color: #7fe9ff !important; }
.gem-tab { color: #b8f3ff !important; }
.gem-btn { background: linear-gradient(180deg, #a8f2ff 0%, #4fc8ff 50%, #2a8fd6 100%) !important; border-color: #c8f7ff !important; color: #04253a !important;
  box-shadow: 0 4px 0 #1f6aa0, 0 8px 18px rgba(79, 200, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .6) !important; }
.gem-card { background: linear-gradient(180deg, rgba(127, 233, 255, .12), rgba(0, 0, 0, .2)); border-color: rgba(127, 233, 255, .5) !important; }
.gem-desc { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; color: var(--muted) !important; font-size: 10.5px !important; min-height: 2.6em; }
.it-card.gem-only::before { content: '💎 ĐỘC QUYỀN'; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 900;
  padding: 1px 6px; border-radius: 6px; background: #2a8fd6; color: #fff; white-space: nowrap; }
/* chọn 1 trong 3 */
.pick-stage { gap: 14px; }
.pick-slot { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: pkIn .45s cubic-bezier(.2, 1.4, .4, 1) calc(var(--i) * 140ms) both; font: inherit; transition: transform .2s, opacity .3s, filter .3s; }
.pick-slot > span { font-size: 12px; font-weight: 900; color: #04253a; background: #7fe9ff; padding: 4px 14px; border-radius: 999px; }
.pick-slot:not(:disabled):hover { transform: translateY(-6px) scale(1.04); }
.pick-slot.chosen { transform: scale(1.1); filter: drop-shadow(0 0 22px rgba(127, 233, 255, .9)); }
.pick-slot.chosen > span { background: #7df08a; }
.pick-slot.dropped { opacity: .25; filter: grayscale(1); transform: scale(.9); }

/* ---- 🧩 Bộ vật phẩm ---- */
.set-tab { color: #ffcf8a !important; }
.set-card {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 16%, transparent), rgba(0, 0, 0, .25)); border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
}
.set-card.wearing { box-shadow: 0 0 0 2px var(--sc), 0 0 18px color-mix(in srgb, var(--sc) 45%, transparent); }
.set-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.set-head b { font-size: 15px; color: var(--sc); }
.set-head span { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.set-pcs { display: flex; gap: 8px; flex-wrap: wrap; }
.set-pc { position: relative; width: 58px; height: 58px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 0, 0, .3); border: 1px dashed var(--line); }
.set-pc > i { transform: scale(.8); }
.set-pc:not(.own) { opacity: .4; filter: grayscale(.6); }
.set-pc.own { border-style: solid; border-color: color-mix(in srgb, var(--sc) 55%, transparent); }
.set-pc.on { box-shadow: 0 0 0 2px var(--sc); }
.set-pc small { position: absolute; right: -4px; bottom: -4px; font-size: 12px; background: #10161f; border-radius: 50%; width: 18px; height: 18px; display: grid; place-items: center; }
.set-card .it-btn { width: auto; align-self: flex-start; padding: 7px 14px !important; }
.set-save { font-size: 10.5px; color: var(--muted); text-decoration: line-through; }

/* ---------- Lối về cổng MonBlock ở thanh tiêu đề ---------- */
.portal-link {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .5px;
  text-decoration: none;
  text-shadow: none;
  vertical-align: middle;
}
.portal-link:hover { color: var(--txt); border-color: #3c4b60; }

/* ---------- Quà từ MonBlock (hộp thư quà) ---------- */
.gf-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; max-height: 46vh; overflow: auto; }
.gf-list li { padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-weight: 600; }