/* ==========================================================================
   CYBERPUNK PIXEL UI
   --------------------------------------------------------------------------
   Nạp SAU tokens.css / base.css / components.css.

   Khác bản trước ở chỗ nào: bản cũ dựng toàn bộ cảm giác nổi khối bằng nhiều
   lớp box-shadow. Bản này dùng thẳng art của bộ kit CraftPix qua CSS
   border-image, nên nút và khung có đúng nét vẽ của bộ asset thay vì mô phỏng.

   Ảnh nguồn nằm ở /assets/img/ui/, đều là ảnh 9-slice đã cắt gọn: bộ kit phát
   hành dạng tile 32x32 rời, để nguyên thì border-width phải là 32px. Mỗi ảnh
   được ghép lại còn đúng (viền trái + 2px + viền phải) x (viền trên + 2px +
   viền dưới), giữ tỉ lệ pixel 1:1 nên không bị nội suy mờ.

   Con số border-width PHẢI khớp với border-image-slice, nếu không trình duyệt
   co giãn phần viền và nét pixel vỡ ngay.
   ========================================================================== */

/* Font đi kèm bộ kit. Đã đọc bảng cmap: 104 ký tự ASCII, không có tiếng Việt —
   xem ghi chú ở tokens.css. font-display: swap để chữ hiện ngay bằng font dự
   phòng, không chớp trắng. */
@font-face {
  font-family: 'CyberpunkPixel';
  src: url('/assets/fonts/cyberpunk-pixel.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --px-unit: 4px;                 /* một "pixel" của hệ thống */
  --px-ink: var(--pixel-outline);

  /* Viền của nút, đo được từ art: trên 6 / phải 8 / dưới 2 / trái 4 */
  --btn-slice: 6 8 2 4;
  --btn-border: 6px 8px 2px 4px;
  --btn-slice-active: 5 8 2 4;
  --btn-border-active: 5px 8px 2px 4px;

  /* Khung lớn (frame79) và khung nhẹ (frame80) */
  --win-slice: 15 13 15 13;
  --win-border: 15px 13px 15px 13px;
  --panel-slice: 15 11 12 11;
  --panel-border: 15px 11px 12px 11px;
}

/* --------------------------------------------------------------------------
   1. TIỆN ÍCH
   -------------------------------------------------------------------------- */

/* Ảnh pixel phóng to KHÔNG được nội suy, nếu không là nhoè hết nét. */
.pixelated,
.pixelated img,
img.pixelated,
canvas.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* dự phòng cho engine cũ */
}

/* Chữ pixel chỉ dùng cho nội dung CHẮC CHẮN không có dấu tiếng Việt. */
.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* Chữ neon: viền sáng quanh nét chữ. Dùng cho tiêu đề trên nền tối. */
.neon {
  color: var(--accent);
  text-shadow:
    0 0 4px color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Icon glyph của kit là ảnh trắng trên nền trong suốt. Đổ qua mask thay vì đặt
   làm <img> để đổi màu được theo biến CSS. */
.ui-icon {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* Chỉ khai báo những glyph đang thực sự được dùng. Bộ kit có 40 icon nhưng
   đưa hết vào đây thì thành 34 file ảnh không ai gọi tới. */
.ui-icon--search { --icon: url('/assets/img/ui/icon/search.png'); }
.ui-icon--play { --icon: url('/assets/img/ui/icon/play.png'); }
.ui-icon--grid { --icon: url('/assets/img/ui/icon/grid.png'); }
.ui-icon--star { --icon: url('/assets/img/ui/icon/star.png'); }
.ui-icon--trophy { --icon: url('/assets/img/ui/icon/trophy.png'); }
.ui-icon--clock { --icon: url('/assets/img/ui/icon/clock.png'); }

/* --------------------------------------------------------------------------
   2. NÚT — art thật của bộ kit qua border-image
   -------------------------------------------------------------------------- */

.pixel-btn {
  --btn-img: url('/assets/img/ui/btn10.png');
  --btn-img-active: url('/assets/img/ui/btn10-active.png');

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: none;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 0.55);
  cursor: pointer;

  border-style: solid;
  border-width: var(--btn-border);
  border-image-source: var(--btn-img);
  border-image-slice: var(--btn-slice) fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;

  transition: filter var(--t-fast);
}

.pixel-btn:hover {
  filter: brightness(1.15);
}

/* Nhấn xuống: đổi hẳn sang art trạng thái nhấn của kit (tối, vạch sáng tắt) và
   dịch xuống 1px cho khớp cảm giác lún. Viền trên của art nhấn mỏng hơn 1px nên
   border-width cũng phải đổi theo, nếu không nét bị kéo giãn. */
.pixel-btn:active {
  border-width: var(--btn-border-active);
  border-image-source: var(--btn-img-active);
  border-image-slice: var(--btn-slice-active) fill;
  transform: translateY(1px);
  filter: none;
}

.pixel-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pixel-btn[disabled],
.pixel-btn[aria-disabled='true'] {
  filter: grayscale(0.8) brightness(0.7);
  cursor: not-allowed;
}

.pixel-btn--primary {
  --btn-img: url('/assets/img/ui/btn3.png');
  --btn-img-active: url('/assets/img/ui/btn3-active.png');
}
.pixel-btn--success {
  --btn-img: url('/assets/img/ui/btn7.png');
  --btn-img-active: url('/assets/img/ui/btn7-active.png');
}
.pixel-btn--danger {
  --btn-img: url('/assets/img/ui/btn1.png');
  --btn-img-active: url('/assets/img/ui/btn1-active.png');
}
.pixel-btn--accent {
  --btn-img: url('/assets/img/ui/btn5.png');
  --btn-img-active: url('/assets/img/ui/btn5-active.png');
  color: #2b1a00;
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   3. KHUNG CỬA SỔ
   -------------------------------------------------------------------------- */

.pixel-window {
  position: relative;
  padding: var(--sp-4) var(--sp-5);
  color: var(--text);

  border-style: solid;
  border-width: var(--win-border);
  border-image-source: url('/assets/img/ui/frame79.png');
  border-image-slice: var(--win-slice) fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}

/* Chữ bên trong không được dính image-rendering: pixelated của khung */
.pixel-window > * {
  image-rendering: auto;
}

.pixel-window__title {
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  /* VT323 chứ KHÔNG phải font kit: tiêu đề khung là chữ do người viết đặt, gần
     như chắc chắn có dấu tiếng Việt, mà font kit thì không có dấu — trộn hai
     font trong cùng một dòng làm nét chữ lệch hẳn. */
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pixel-window p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. PANEL MẠCH ĐIỆN — thay cho bảng gỗ của theme cũ
   Khung nhẹ của kit + lưới mạch và vệt quét vẽ bằng gradient.
   -------------------------------------------------------------------------- */

.pixel-board {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  color: var(--text);

  border-style: solid;
  border-width: var(--panel-border);
  border-image-source: url('/assets/img/ui/frame80.png');
  border-image-slice: var(--panel-slice) fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}

/* Lưới mạch + vệt quét ngang. Đặt ở lớp phủ riêng để không đụng tới border-image
   (background của phần tử bị phần fill của border-image che mất). */
.pixel-board::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* điểm nối mạch */
    radial-gradient(circle at 16px 16px,
      color-mix(in srgb, var(--accent) 26%, transparent) 0 2px, transparent 2px),
    /* lưới dọc */
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--accent) 10%, transparent) 0 1px, transparent 1px 32px),
    /* vệt quét ngang kiểu màn CRT */
    repeating-linear-gradient(to bottom,
      rgb(0 0 0 / 0.16) 0 1px, transparent 1px 3px);
  background-size: 32px 32px, 32px 32px, 100% 3px;
}

.pixel-board > * { position: relative; }

/* --------------------------------------------------------------------------
   5. THANH CHỈ SỐ
   Máng và ruột đều là art của kit, kéo giãn ngang bằng border-image.
   -------------------------------------------------------------------------- */

.pixel-bar {
  position: relative;
  height: 14px;
  border-style: solid;
  border-width: 0 4px;
  border-image-source: url('/assets/img/ui/bar-track.png');
  border-image-slice: 0 4 fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  overflow: hidden;
}

.pixel-bar__fill {
  height: 100%;
  width: var(--value, 100%);
  border-style: solid;
  border-width: 0 4px;
  border-image-source: url('/assets/img/ui/bar-fill.png');
  border-image-slice: 0 4 fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  transition: width var(--t-base) steps(8, end);
}

/* Ba biến thể xoay màu trên cùng một dải art. Art gốc là thanh máu đỏ-hồng,
   sắc độ nền khoảng 345°: cộng 225° ra lam cho MP, cộng 60° ra vàng cho XP. */
.pixel-bar--hp .pixel-bar__fill { filter: none; }
.pixel-bar--mp .pixel-bar__fill { filter: hue-rotate(225deg); }
.pixel-bar--xp .pixel-bar__fill { filter: hue-rotate(60deg) saturate(1.2); }

.pixel-bar__label {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--sp-1);
  color: var(--text-muted);
  font-family: var(--font-pixel);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .pixel-btn,
  .pixel-bar__fill { transition: none; }
  .pixel-btn:active { transform: none; }
}