/* ============================================================
   sticker-icons.css — 4 lớp của bộ icon sticker (`js/sticker-icons.js`).
   Nạp SAU `css/common.css`, TRƯỚC `css/<trang>.css` (để trang override được cỡ).

   ⚠️ Bảng màu lấy từ chính art nhân vật + thiên thạch tím, không tự chọn:
      tím #8b5cf6→#a855f7 · hồng #e879f9 · navy viền #1b1038 · cyan #22d3ee
      (màn hình Byte) · lime #a3e635 (đèn đáy Byte) · magenta #ec4899 (lửa Luna).
   ============================================================ */

.sic {
  /* Bảng màu mặc định: TÍM — tông của thiên thạch tím và của Quark.
     BA nấc, không phải hai: `img/tt.png` sáng gần trắng ở mặt hứng sáng rồi mới
     xuống tím đậm, nên gradient 2 nấc cho ra một mảng phẳng, không ra chất đá quý. */
  --sic-a: #f0d9ff;     /* mặt hứng sáng — lilac gần trắng */
  --sic-b: #a855f7;     /* thân */
  --sic-c: #5b21b6;     /* mặt tối */
  --sic-ink: #1b1038;   /* navy viền, KHÔNG dùng đen thuần: art dùng navy nên đen
                           thuần đặt cạnh sẽ đọc ra như một icon của bộ khác */
  --sic-rim: #fff;

  width: 1em;
  height: 1em;
  display: block;
  flex: none;
}

/* ⓞ Nét ngoài cùng — thứ làm sticker đọc được trên nền SÁNG (xem ghi chú đầu
      `js/sticker-icons.js`). Tô luôn màu navy để hình không bị rỗng ruột ở khe. */
.sic-edge {
  fill: var(--sic-ink);
  stroke: var(--sic-ink);
  stroke-width: 13;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ① Rìa sticker — tô đặc + nét dày cùng màu để thành một khối trắng liền,
      không phải một đường viền rỗng (art là sticker cắt rời, không phải outline). */
.sic-rim {
  fill: var(--sic-rim);
  stroke: var(--sic-rim);
  stroke-width: 9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ② Thân — `paint-order:stroke` cho nét navy vẽ TRƯỚC rồi phần tô đè lên nửa
      trong của nét, nên mép trong sắc gọn và nét mỏng đi một nửa về phía trong.
      Không có nó thì nét 4 ăn vào hình, chi tiết nhỏ bị bịt. */
.sic-ink {
  stroke: var(--sic-ink);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke;
}
.sic-ink .f-w    { fill: #fff; }
.sic-ink .f-lt   { fill: var(--sic-a); }  /* cùng họ màu, sáng hơn thân — dùng cho vành
                                             Sao Thổ: xem ghi chú "vành mũ" trong JS */
.sic-ink .f-dk   { fill: #3b2a63; }   /* hố lõm / lỗ khoá — sẫm hơn thân, không phải đen */
.sic-ink .f-cy   { fill: #22d3ee; }
.sic-ink .f-lime { fill: #a3e635; }
.sic-ink .f-mag  { fill: #ec4899; }

/* ③ Nét chi tiết bên trong — mảnh hơn nét bao, không tô. */
.sic-line {
  fill: none;
  stroke: var(--sic-ink);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .85;
}

/* ④ Gloss + sparkle — trắng, KHÔNG nét: thêm nét vào đây là mất cảm giác
      "ánh sáng phản chiếu", nó thành một cái hình dán lên. */
.sic-lite {
  fill: #fff;
  stroke: none;
  opacity: .82;
}

/* ── Bảng màu phụ, đổi bằng class ở ngoài ────────────────────────────────
   Chỉ đổi hai stop; nét navy và rìa trắng GIỮ NGUYÊN ở mọi bảng màu — đó là
   thứ làm cả bộ đọc ra là một bộ. */
.sic--cyan { --sic-a: #d5fbff; --sic-b: #22d3ee; --sic-c: #0e7490; }
.sic--gold { --sic-a: #fff3c4; --sic-b: #fbbf24; --sic-c: #b45309; }
.sic--lime { --sic-a: #eafcc0; --sic-b: #a3e635; --sic-c: #3f6212; }
.sic--mag  { --sic-a: #ffd9ee; --sic-b: #ec4899; --sic-c: #9d174d; }
/* ⚠️ `.sic--slate` ĐÃ XOÁ 13/08/2026: khai từ 12/08 mà không một chỗ nào dùng, và
   `--sic-b` của nó (#94a3b8) TRÙNG với `.sic--off` ngay dưới — tức một bảng màu xám
   thứ hai không mang thêm nghĩa nào. Không bịa việc cho nó chỉ để giữ lại; phép kiểm
   [21] nay canh "không bảng màu nào bỏ không" nên nó không quay lại được trong im
   lặng. Tra lại: `git show d5f140e:css/sticker-icons.css`. */
/* ⚠️ BẢNG MÀU THỨ SÁU, thêm 13/08/2026 vì SÁU khu vực trên dashboard có SÁU tông
   `--ic-bg` khác nhau (cyan · cam · tím · xanh lá · hồng · hổ phách) mà bộ này chỉ có
   năm bảng + tím mặc định — tức hai khu buộc phải dùng chung một màu. `gold` để cho
   Sổ Tay (hổ phách), `orange` cho Khu Huấn Luyện (cam). */
.sic--orange{ --sic-a: #ffe0c2; --sic-b: #fb923c; --sic-c: #9a3412; }
/* ⚠️ BẢNG MÀU THỨ BẢY, thêm 16/08/2026 cho chương trình SINH TỒN (ARCADE-07).
   Không dùng lại `lime` — đó là màu của Mê Cung (chương trình Định hướng), và hai
   chương trình KHÔNG liên quan gì nhau mà cùng một tông thì màu thôi mang nghĩa.
   Dùng chung màu chỉ đúng khi hai game thuộc CÙNG chương trình, như Né Thiên Thạch
   và Bắt Sao Băng đều `cyan` (Phản xạ). */
.sic--teal  { --sic-a: #ccfbf1; --sic-b: #2dd4bf; --sic-c: #115e59; }
/* ARCADE-12 Trạm Phân Loại — chương trình `mlearn`. Lam-điện, CỐ Ý không phải tím:
   tím là màu của Thiên thạch tím, một icon tông tím đứng cạnh chip số dư thì hai
   thứ đọc ra như một. Cũng đủ xa `sic--cyan` để không lẫn với ba thẻ cyan. */
.sic--iris  { --sic-a: #ddd6fe; --sic-b: #818cf8; --sic-c: #3730a3; }

/* Trạng thái KHOÁ / CHƯA MỞ — bạc xám + nhạt bớt.
   ⚠️ KHÔNG dùng `filter:grayscale()` (bài học đã trả giá 3 lần trong dự án: trên
      nền gradient sáng nó cho ra một khối xám SÁNG HƠN icon bình thường). */
.sic--off { --sic-a: #e2e8f0; --sic-b: #94a3b8; --sic-c: #475569; opacity: .55; }
.sic--off .sic-lite { opacity: .4; }

/* Giảm chuyển động: bộ này không có animation nào, nhưng khai ở đây để lượt sau
   ai thêm sparkle nhấp nháy thì đã có chỗ đúng để tắt. */
@media (prefers-reduced-motion: reduce) {
  .sic * { animation: none !important; }
}