/* g1-ui.css — bộ giao diện dùng chung Game1Tap (sinh tự động bởi cong-cu/tao-css.py; sửa ở đó rồi chạy lại).
   Hình: ảnh D1 do giám đốc tạo bằng ChatGPT, cắt thành mảnh trong anh/. Chữ do mã chồng lên, không có chữ trong ảnh.
   Không tải gì từ ngoài: phông chữ là phông có sẵn của máy. */

:root {
  --g1-vien-chu: #000c49;                     /* viền chữ xanh đậm, cùng màu viền nhãn dán của bộ hình */
  --g1-phong: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Hiragino Sans GB",
              "Microsoft YaHei", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* chữ có viền tám hướng + bóng dưới: đọc rõ trên mọi màu nút */
.g1-nut, .g1-khung-diem, .g1-nhan, .g1-chuoi, .g1-hop__tieu-de, .g1-chu-vien {
  color: #fff;
  font-family: var(--g1-phong);
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow:
    .06em 0 0 var(--g1-vien-chu), -.06em 0 0 var(--g1-vien-chu), 0 .06em 0 var(--g1-vien-chu), 0 -.06em 0 var(--g1-vien-chu),
    .045em .045em 0 var(--g1-vien-chu), -.045em .045em 0 var(--g1-vien-chu), .045em -.045em 0 var(--g1-vien-chu), -.045em -.045em 0 var(--g1-vien-chu),
    0 .11em 0 var(--g1-vien-chu);
}

/* ---------- nút dài (co giãn ngang theo chữ) ---------- */
.g1-nut {
  --h: 56px;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  height: var(--h); min-width: calc(var(--h) * 2.6); max-width: 100%;
  padding: 0 calc(var(--h) * .55) calc(var(--h) * .06);
  border: 0 solid transparent; border-radius: calc(var(--h) / 2);
  background: none;
  font-size: calc(var(--h) * .38); line-height: 1; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .26s cubic-bezier(.34, 1.9, .5, 1), filter .15s;
}
.g1-nut > span { overflow: hidden; text-overflow: ellipsis; }
.g1-nut--nho { --h: 46px; }
.g1-nut--to { --h: 68px; }
.g1-nut--rong { display: flex; width: 100%; }
.g1-nut, .g1-nut--vang {
  border-image-source: url("anh/nut-vang@2x.webp");
  border-image-source: -webkit-image-set(url("anh/nut-vang@1x.webp") 1x, url("anh/nut-vang@2x.webp") 2x);
  border-image-source: image-set(url("anh/nut-vang@1x.webp") 1x, url("anh/nut-vang@2x.webp") 2x);
  border-image-slice: 49.36% 19.70% 49.36% 19.70% fill;
  border-image-width: calc(var(--h) * 0.4936) calc(var(--h) * 0.5) calc(var(--h) * 0.4936) calc(var(--h) * 0.5);
}
.g1-nut--xanh {
  border-image-source: url("anh/nut-xanh@2x.webp");
  border-image-source: -webkit-image-set(url("anh/nut-xanh@1x.webp") 1x, url("anh/nut-xanh@2x.webp") 2x);
  border-image-source: image-set(url("anh/nut-xanh@1x.webp") 1x, url("anh/nut-xanh@2x.webp") 2x);
  border-image-slice: 49.36% 19.80% 49.36% 19.80% fill;
  border-image-width: calc(var(--h) * 0.4936) calc(var(--h) * 0.5) calc(var(--h) * 0.4936) calc(var(--h) * 0.5);
}
.g1-nut--do {
  border-image-source: url("anh/nut-do@2x.webp");
  border-image-source: -webkit-image-set(url("anh/nut-do@1x.webp") 1x, url("anh/nut-do@2x.webp") 2x);
  border-image-source: image-set(url("anh/nut-do@1x.webp") 1x, url("anh/nut-do@2x.webp") 2x);
  border-image-slice: 49.36% 19.92% 49.36% 19.92% fill;
  border-image-width: calc(var(--h) * 0.4936) calc(var(--h) * 0.5) calc(var(--h) * 0.4936) calc(var(--h) * 0.5);
}

/* nhấn: lún và co lại ngay, thả: nảy về */
.g1-nut:active, .g1-tron:active { transform: translateY(2px) scale(.92); transition-duration: .06s; }
.g1-nut:focus-visible, .g1-tron:focus-visible { outline: 3px solid #01e8fd; outline-offset: 3px; }
.g1-nut:disabled, .g1-nut[aria-disabled="true"], .g1-tron:disabled, .g1-tron[aria-disabled="true"] {
  filter: grayscale(1) brightness(.8) contrast(.85); opacity: .7; cursor: not-allowed; transform: none; pointer-events: none;
}

/* ---------- khung điểm, nhãn màn, nhãn chuỗi lửa (co giãn ngang) ---------- */
.g1-khung-diem, .g1-nhan, .g1-chuoi {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0 solid transparent; white-space: nowrap; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.g1-khung-diem { --h: 52px; height: var(--h); min-width: calc(var(--h) * 3); padding: 0 calc(var(--h) * .55) calc(var(--h) * .04); font-size: calc(var(--h) * .5); }
.g1-khung-diem {
  border-image-source: url("anh/khung-diem@2x.webp");
  border-image-source: -webkit-image-set(url("anh/khung-diem@1x.webp") 1x, url("anh/khung-diem@2x.webp") 2x);
  border-image-source: image-set(url("anh/khung-diem@1x.webp") 1x, url("anh/khung-diem@2x.webp") 2x);
  border-image-slice: 49.48% 12.90% 49.48% 12.90% fill;
  border-image-width: calc(var(--h) * 0.4948) calc(var(--h) * 0.5) calc(var(--h) * 0.4948) calc(var(--h) * 0.5);
}
.g1-nhan { --h: 40px; height: var(--h); min-width: calc(var(--h) * 2.6); padding: 0 calc(var(--h) * .6) calc(var(--h) * .04); font-size: calc(var(--h) * .42); }
.g1-nhan {
  border-image-source: url("anh/nhan-man@2x.webp");
  border-image-source: -webkit-image-set(url("anh/nhan-man@1x.webp") 1x, url("anh/nhan-man@2x.webp") 2x);
  border-image-source: image-set(url("anh/nhan-man@1x.webp") 1x, url("anh/nhan-man@2x.webp") 2x);
  border-image-slice: 49.33% 19.45% 49.33% 19.45% fill;
  border-image-width: calc(var(--h) * 0.4933) calc(var(--h) * 0.5) calc(var(--h) * 0.4933) calc(var(--h) * 0.5);
}
.g1-chuoi {
  --h: 56px; height: var(--h);
  min-width: calc(var(--h) * 1.8976);
  padding: 0 calc(var(--h) * 0.2796) calc(var(--h) * 0.0735) calc(var(--h) * 0.6967);
  font-size: calc(var(--h) * .4);
}
.g1-chuoi {
  border-image-source: url("anh/nhan-chuoi@2x.webp");
  border-image-source: -webkit-image-set(url("anh/nhan-chuoi@1x.webp") 1x, url("anh/nhan-chuoi@2x.webp") 2x);
  border-image-source: image-set(url("anh/nhan-chuoi@1x.webp") 1x, url("anh/nhan-chuoi@2x.webp") 2x);
  border-image-slice: 49.53% 21.64% 49.53% 31.38% fill;
  border-image-width: calc(var(--h) * 0.4953) calc(var(--h) * 0.6114) calc(var(--h) * 0.4953) calc(var(--h) * 0.8863);
}

/* ---------- hộp thoại (co giãn cả ngang lẫn dọc), tiêu đề nằm trong dải xanh ---------- */
.g1-hop {
  --k: .5;                                  /* điểm CSS trên mỗi điểm ảnh gốc; .5 = vừa điện thoại */
  position: relative; box-sizing: border-box;
  min-width: calc(var(--k) * 345px); min-height: calc(var(--k) * 271px);
  padding: calc(var(--k) * 149px + 6px) calc(var(--k) * 56px) calc(var(--k) * 52px);
  border: 0 solid transparent;
  border-image-source: url("anh/hop-thoai@2x.webp");
  border-image-source: -webkit-image-set(url("anh/hop-thoai@1x.webp") 1x, url("anh/hop-thoai@2x.webp") 2x);
  border-image-source: image-set(url("anh/hop-thoai@1x.webp") 1x, url("anh/hop-thoai@2x.webp") 2x);
  border-image-slice: 26.75% 18.90% 14.72% 20.05% fill;
  border-image-width: calc(var(--k) * 149px) calc(var(--k) * 148px) calc(var(--k) * 82px) calc(var(--k) * 157px);
  color: #0b1a5c; font-family: var(--g1-phong);
}
.g1-hop__tieu-de {
  position: absolute; margin: 0;
  left: calc(var(--k) * 89px); right: calc(var(--k) * 81px);
  top: calc(var(--k) * 9px); height: calc(var(--k) * 120px);
  display: flex; align-items: center; justify-content: center; padding: 0 1em .1em;
  font-size: calc(var(--k) * 52px); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- nút tròn (có hình sẵn, phải ghi aria-label) ---------- */
.g1-tron {
  --d: 52px;
  box-sizing: border-box; width: var(--d); height: var(--d); min-width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none center / contain no-repeat;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .26s cubic-bezier(.34, 1.9, .5, 1), filter .15s;
}
.g1-tron--tam-dung { background-image: url("anh/nut-tam-dung@2x.webp"); background-image: -webkit-image-set(url("anh/nut-tam-dung@1x.webp") 1x, url("anh/nut-tam-dung@2x.webp") 2x); background-image: image-set(url("anh/nut-tam-dung@1x.webp") 1x, url("anh/nut-tam-dung@2x.webp") 2x); }
.g1-tron--choi { background-image: url("anh/nut-choi@2x.webp"); background-image: -webkit-image-set(url("anh/nut-choi@1x.webp") 1x, url("anh/nut-choi@2x.webp") 2x); background-image: image-set(url("anh/nut-choi@1x.webp") 1x, url("anh/nut-choi@2x.webp") 2x); }
.g1-tron--loa { background-image: url("anh/nut-loa@2x.webp"); background-image: -webkit-image-set(url("anh/nut-loa@1x.webp") 1x, url("anh/nut-loa@2x.webp") 2x); background-image: image-set(url("anh/nut-loa@1x.webp") 1x, url("anh/nut-loa@2x.webp") 2x); }
.g1-tron--tat-loa { background-image: url("anh/nut-tat-loa@2x.webp"); background-image: -webkit-image-set(url("anh/nut-tat-loa@1x.webp") 1x, url("anh/nut-tat-loa@2x.webp") 2x); background-image: image-set(url("anh/nut-tat-loa@1x.webp") 1x, url("anh/nut-tat-loa@2x.webp") 2x); }
.g1-tron--dong { background-image: url("anh/nut-dong@2x.webp"); background-image: -webkit-image-set(url("anh/nut-dong@1x.webp") 1x, url("anh/nut-dong@2x.webp") 2x); background-image: image-set(url("anh/nut-dong@1x.webp") 1x, url("anh/nut-dong@2x.webp") 2x); }
.g1-tron--nha { background-image: url("anh/nut-nha@2x.webp"); background-image: -webkit-image-set(url("anh/nut-nha@1x.webp") 1x, url("anh/nut-nha@2x.webp") 2x); background-image: image-set(url("anh/nut-nha@1x.webp") 1x, url("anh/nut-nha@2x.webp") 2x); }

/* ---------- hình nhỏ: vé, sao ---------- */
.g1-ve, .g1-sao { display: inline-block; vertical-align: middle; background: none center / contain no-repeat; }
.g1-ve { --d: 32px; width: var(--d); height: calc(var(--d) * 0.6828); }
.g1-sao { --d: 32px; width: var(--d); height: calc(var(--d) * 0.932); }
.g1-ve { background-image: url("anh/ve@2x.webp"); background-image: -webkit-image-set(url("anh/ve@1x.webp") 1x, url("anh/ve@2x.webp") 2x); background-image: image-set(url("anh/ve@1x.webp") 1x, url("anh/ve@2x.webp") 2x); }
.g1-sao { background-image: url("anh/sao@2x.webp"); background-image: -webkit-image-set(url("anh/sao@1x.webp") 1x, url("anh/sao@2x.webp") 2x); background-image: image-set(url("anh/sao@1x.webp") 1x, url("anh/sao@2x.webp") 2x); }

@media (prefers-reduced-motion: reduce) {
  .g1-nut, .g1-tron { transition: none; }
  .g1-nut:active, .g1-tron:active { transform: none; filter: brightness(.9); }
}