/* ==========================================================
   games.css — phần RIÊNG của games.html (Sảnh Trò Chơi).

   Khung chung (tokens, nền, .wrap, header .hub-top, .hero, .currency,
   .lang-switch, .toast) ở css/page-shell.css — nạp trước file này.
   Trước 29/07/2026 file này có bản copy riêng của toàn bộ phần đó.

   Chỉ giữ lại những chỗ THẬT SỰ khác với khung chung, kèm lý do.
   ========================================================== */

/* Cỡ chữ hero của Sảnh to hơn khung chung một chút (24→38 thay vì 23→36):
   đây là trang "chọn trò chơi", tiêu đề là thứ đầu tiên trẻ đọc. */
.hero h1{font-size:clamp(24px,4.4vw,38px);}
.hero p{max-width:560px;}

/* ============ GAME GRID ============ */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:22px;margin-top:30px;}
.gcard{position:relative;display:flex;flex-direction:column;border-radius:18px;padding:20px 20px 18px;
  --neon:rgba(56,189,248,.4); --neonS:rgba(56,189,248,.9);
  border:1px solid var(--neon);
  background:linear-gradient(180deg, rgba(15,23,42,.62), rgba(15,23,42,.5));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 22px 50px -24px rgba(0,0,0,.72), 0 0 26px -6px var(--neon), inset 0 0 34px -16px var(--neonS);
  transition:transform .35s var(--jelly),box-shadow .35s var(--ease),border-color .35s var(--ease);}
.gcard:hover{transform:translateY(-8px) scale(1.02);border-color:var(--neonS);
  box-shadow:0 34px 66px -22px rgba(0,0,0,.78), 0 0 46px -2px var(--neonS), inset 0 0 40px -12px var(--neonS);}
.gcard .hud-line{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;}
.gcard .hud-line.top{margin-bottom:14px;}
.gcard .hud-line.foot{margin-top:12px;border-top:1px dashed rgba(150,180,255,.2);padding-top:10px;}
.gcard .hud-line .led{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.6s steps(1,end) infinite;margin-right:6px;}
.gcard .hud-line .soon{color:var(--amber);}
/* Đèn của thẻ sắp ra mắt: hổ phách và ĐỨNG YÊN. Nhấp nháy là dấu hiệu "đang
   chạy"; để nó nhấp nháy trên một thẻ chưa vào được là nói ngược. */
.gcard .hud-line .led.standby{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:none;}
.gcard .hud-line .online{color:var(--green);}
.gcard .ic{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:30px;
  background:var(--ic-bg,rgba(56,189,248,.16));border:1px solid var(--neon);box-shadow:inset 0 0 18px -6px var(--neon);
  margin-bottom:14px;transition:transform .35s var(--jelly);}
/* Icon sticker choán chỗ ít hơn emoji ở cùng cỡ chữ (emoji là glyph, vẽ tràn
   gần hết ô em; icon này là SVG 1em nên đúng 1em). Đo trên ảnh chụp: 28px
   trong ô 60px chỉ lấp 46%, nhìn ra là một hình nhỏ lọt giữa ô rỗng. Nới
   riêng ở đây chứ không sửa `.sic` dùng chung — cỡ ô là chuyện của TRANG. */
.gcard .ic .sic{width:40px;height:40px;}
.gcard:hover .ic{transform:scale(1.1) rotate(-6deg);}
.gcard .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.gcard h3{font-family:var(--font-display);font-weight:700;font-size:20px;margin:4px 0 0;}
.gcard p{color:var(--ink-soft);font-size:13.5px;line-height:1.55;margin:10px 0 14px;flex:1;}
.gcard .cost{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-bottom:14px;
  font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--purple);
  background:rgba(192,132,252,.12);border:1px solid rgba(192,132,252,.4);padding:5px 11px;border-radius:999px;}
.gcard .cost img{width:16px;height:16px;object-fit:contain;}
.gcard .cost span{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);letter-spacing:.06em;}
/* Nút "Chơi ngay" — đồng bộ MÀU XANH cho mọi thẻ sẵn sàng */
.play-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:none;width:100%;
  padding:13px 18px;border-radius:14px;font-family:var(--font-display);font-weight:600;font-size:15px;color:#04060f;
  background:linear-gradient(120deg,var(--cyan),#2f80ed);box-shadow:0 12px 26px -12px rgba(56,189,248,.7);
  transition:transform .3s var(--jelly),filter .2s;}
.play-btn:hover{filter:brightness(1.07);transform:translateY(-2px);}
.play-btn:active{transform:scale(.93);}
/* Nút "Sắp ra mắt" — trong suốt (chỉ viền nét đứt mờ) */
.play-btn.locked{background:transparent;color:var(--ink-faint);border:1px dashed rgba(120,160,255,.32);box-shadow:none;cursor:not-allowed;}
.play-btn.locked:hover{filter:none;transform:none;}
/* Thẻ "Sắp ra mắt" — chỉ mờ nhẹ (đã bỏ nhãn góc phải) */
.gcard.soon{opacity:.9;}

.card--gravity{--neon:rgba(56,189,248,.4);--neonS:rgba(56,189,248,.9);--ic-bg:rgba(56,189,248,.18);}
.card--racer  {--neon:rgba(251,146,60,.42);--neonS:rgba(251,146,60,.95);--ic-bg:rgba(251,146,60,.18);}
.card--blaster{--neon:rgba(239,68,68,.42);--neonS:rgba(239,68,68,.95);--ic-bg:rgba(239,68,68,.18);}
.card--maze   {--neon:rgba(74,222,128,.42);--neonS:rgba(74,222,128,.95);--ic-bg:rgba(74,222,128,.18);}
.card--catch  {--neon:rgba(255,207,107,.45);--neonS:rgba(255,207,107,.95);--ic-bg:rgba(255,207,107,.2);}
.card--match  {--neon:rgba(192,132,252,.42);--neonS:rgba(192,132,252,.95);--ic-bg:rgba(192,132,252,.18);}
/* ARCADE-07 Trạm Sinh Tồn — chương trình Sinh tồn. Tông ngọc lam RIÊNG, không
   mượn xanh lá của Mê Cung: hai chương trình khác nhau mà cùng màu thì màu
   thôi mang nghĩa (xem ghi chú `.sic--teal` ở css/sticker-icons.css). */
.card--survival{--neon:rgba(45,212,191,.42);--neonS:rgba(45,212,191,.95);--ic-bg:rgba(45,212,191,.18);}
/* ARCADE-08 Trạm Liên Lạc — chương trình Liên lạc. Tông chàm, tách khỏi cyan
   của Phản xạ: hai chương trình khác nhau thì màu phải khác. */
.card--comms  {--neon:rgba(129,140,248,.42);--neonS:rgba(129,140,248,.95);--ic-bg:rgba(129,140,248,.18);}
/* ARCADE-09 Trạm Tuần Hoàn — chương trình Giữ mạng sống. Xanh lá dùng CHUNG
   với Mê Cung là chấp nhận được ở đây: bảng màu icon (`sic--*`) mới là thứ
   phân biệt chương trình, còn `--neon` của thẻ chỉ có 6 tông dễ phân biệt và
   hai thẻ này không bao giờ đứng cạnh nhau trong lưới (sort theo trạng thái). */
.card--recycle{--neon:rgba(52,211,153,.42);--neonS:rgba(52,211,153,.95);--ic-bg:rgba(52,211,153,.18);}
/* ARCADE-10 Trạm Đối Chiếu — chương trình Kiểm chứng dữ liệu. Vàng hổ phách,
   cùng tông với 📏 của bài đọc nguồn. Dùng chung `sic--gold` với Ghép Chòm Sao
   là chấp nhận được (xem ghi chú `.card--recycle` ngay trên). */
.card--units  {--neon:rgba(255,207,107,.42);--neonS:rgba(255,207,107,.95);--ic-bg:rgba(255,207,107,.18);}
/* ARCADE-12 Trạm Phân Loại — tông lam-điện của chương trình `mlearn`.
   ⚠️ Chọn lam chứ không chọn tím: tím đã là màu của Thiên thạch tím, một thẻ game
      tông tím đứng cạnh chip số dư thì hai thứ đọc ra như một. */
.card--classify{--neon:rgba(129,140,248,.42);--neonS:rgba(129,140,248,.95);--ic-bg:rgba(129,140,248,.18);}
/* ARCADE-11 Trạm Dẫn Tuyến — vàng CHANH, đậm hơn hẳn tông vàng nhạt của Trạm Đối
   Chiếu ngay trên. ⚠️ Hai thẻ dùng CHUNG `sic--gold` cho icon (xem ghi chú
   `.card--recycle`), nên `--neon` là thứ duy nhất phân biệt chúng trong lưới —
   đổi nó về gần 255,207,107 là hai thẻ đọc ra như một. */
.card--route  {--neon:rgba(250,204,21,.45);--neonS:rgba(250,204,21,.98);--ic-bg:rgba(250,204,21,.2);}

/* ============ MODAL "chưa đủ" + TOAST ============ */
.modal{z-index:60;padding:20px;background:rgba(4,6,20,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .3s;}
.modal-card{width:100%;max-width:400px;text-align:center;padding:30px 26px 24px;border-radius:24px;
  background:linear-gradient(180deg, rgba(16,22,40,.97), rgba(11,15,25,.98));
  border:1px solid rgba(192,132,252,.45);box-shadow:0 24px 60px -24px rgba(0,0,0,.9), 0 0 40px -10px rgba(192,132,252,.5);}
.modal-ic{font-size:44px;}
.modal-card h3{font-family:var(--font-display);font-weight:700;font-size:21px;margin:12px 0 0;}
.modal-card p{color:var(--ink-soft);font-size:14px;line-height:1.6;margin:12px 0 0;}
.modal-actions{flex-wrap:wrap;margin-top:22px;}
.m-btn{border:1px solid var(--brd);background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;
  border-radius:14px;padding:12px 20px;font-family:var(--font-display);font-weight:600;font-size:14px;transition:transform .2s var(--jelly),background .18s;}
.m-btn:hover{background:rgba(255,255,255,.12);}
.m-btn:active{transform:scale(.93);}
.m-btn.primary{border:none;color:#04060f;background:linear-gradient(120deg,var(--cyan),var(--purple));}

/* Toast cao hơn khung chung (74px thay vì 80px) vì header của Sảnh thấp hơn. */
.toast{top:74px;z-index:80;}

/* ═══════════ TRUNG TÂM ĐÀO TẠO (14/08/2026) ═══════════
   Khu này đổi vai từ "sảnh game" sang "trung tâm đào tạo phi hành gia": mỗi game
   là một KHOÁ HỌC của một CHƯƠNG TRÌNH kỹ năng. Phần dưới là chỗ hiển thị của
   việc đổi vai đó — hồ sơ huấn luyện, nhãn chương trình, dòng kỹ năng, đường
   sang bài đọc liên quan. */

/* ── Hồ sơ huấn luyện ── */
.record{
  max-width:min(880px,100%); margin:0 auto 18px; padding:12px 16px;
  border:1px solid rgba(120,140,190,.20); border-radius:14px;
  background:rgba(13,20,48,.55);
}
/* [hidden] — BẪY ĐÃ MẮC 10 LẦN trong dự án (#time-ok · .lk-btn · .pt-empty ·
   .co-steps · #wl-done · .exp-ctl · .brag · .deskrow · .sess · .mb-body):
   `display` của tác giả THẮNG `display:none` mà trình duyệt áp cho [hidden],
   nên phải khai lại. Thiếu dòng này thì khối hồ sơ hiện ra với cả trẻ chưa
   đăng nhập lần nào. */
.record[hidden]{ display:none; }
.rec-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rec-lb{
  font-family:var(--mono,ui-monospace,monospace); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#8ea3c9;
}
.rec-n{ font-weight:700; font-size:14px; color:#dbe6ff; }
.rec-dots{ display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
/* Mỗi chương trình một thanh, tô theo TỈ LỆ cấp đã đạt — nhìn một cái là thấy
   mình mạnh chỗ nào và còn chỗ nào chưa động tới. Trước đây đây là chấm sáng/tắt
   (đạt/chưa), tức không phân biệt được "mới bắt đầu" với "sắp xong". */
.rd{
  width:34px; height:6px; border-radius:99px; overflow:hidden;
  background:rgba(120,140,190,.24);
}
.rd i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#5fd3ff,#7ee07a);
}
.rec-note{ margin:9px 0 0; font-size:12.5px; color:#9db0d4; line-height:1.5; }
.rec-note[hidden]{ display:none; }

/* ── Nhãn CHƯƠNG TRÌNH trên thẻ (thay nhãn thể loại cũ) ──
   ⚠️ NẰM CẠNH ICON, KHÔNG NẰM DƯỚI (đổi 15/08/2026, chủ dự án: *"chữ quá bé"*).
      Bản cũ để nhãn dưới icon ở cỡ mono 10px viết hoa giãn chữ — cỡ đó dành cho
      nhãn hệ thống (`MOD-04`, `SYS.ONLINE`), không dành cho thứ trẻ phải ĐỌC để
      biết thẻ này luyện cái gì. Bên phải icon là khoảng trống rộng gần nửa thẻ,
      nên chuyển sang đó thì chữ to lên gấp rưỡi mà thẻ không cao thêm pixel nào.
   ⚠️ Chữ THƯỜNG, không viết hoa toàn bộ: "QUAN SÁT THIÊN VĂN" đọc chậm hơn hẳn
      "Quan sát thiên văn", và chữ Việt viết hoa toàn bộ còn mất dấu ở vài font. */
.gc-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.gcard .gc-head .ic{ margin-bottom:0; flex:none; }
.gcard .tag.prog{
  text-transform:none; letter-spacing:.01em;
  font-family:var(--font-display); font-weight:600; font-size:14px;
  line-height:1.25; color:#dbe7ff; min-width:0;
}
/* Màn hẹp: icon nhỏ lại một chút cho nhãn đủ chỗ trên một hàng. */
@media (max-width:420px){
  .gcard .gc-head .ic{ width:52px; height:52px; border-radius:15px; }
  .gcard .gc-head .ic .sic{ width:32px; height:32px; }
  .gcard .tag.prog{ font-size:13px; }
}

/* ── CẤP HUẤN LUYỆN + mốc kế tiếp ──
   ⚠️ Trước 14/08/2026 chỗ này là huy hiệu "ĐÃ ĐẠT" nền xanh — một dấu chấm hết.
      Nay là một CẤP kèm thanh tiến độ tới mốc kế tiếp, nên thẻ luôn nói ra thứ
      trẻ được nếu luyện tiếp. Chỉ khi lên cấp cao nhất mới tô xanh, và ngay cả
      lúc đó câu chữ vẫn mời phá kỷ lục của chính mình. */
.gcard .cert{
  display:inline-block; margin:0 0 2px; padding:2px 9px; border-radius:99px;
  font-family:var(--mono,ui-monospace,monospace); font-size:10px;
  letter-spacing:.1em; color:#9db0d4;
  border:1px solid rgba(120,140,190,.26); background:rgba(120,140,190,.10);
}
.gcard .cert.on{
  color:#0f2018; border-color:transparent;
  background:linear-gradient(90deg,#7ee07a,#5fd3ff); font-weight:700;
}
/* Thẻ đã lên cấp cao nhất: viền sáng nhẹ. CỐ Ý không làm mờ hay khoá — trẻ vẫn
   chơi lại được, và ở cấp cao nhất thì chơi lại CHÍNH LÀ việc còn lại để làm. */
.gcard.top{ border-color:rgba(126,224,122,.34); }

/* Thanh tiến độ tới mốc kế tiếp. Mảnh và không có animation: nó là thông tin,
   không phải thứ để hối thúc. */
.gcard .lvbar{
  height:4px; border-radius:99px; margin:0 0 2px;
  background:rgba(120,140,190,.20); overflow:hidden;
}
.gcard .lvbar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#5fd3ff,#7ee07a);
}
/* Câu "còn bao nhiêu nữa lên cấp sau" — thứ giữ trẻ quay lại. */
.gcard .nextgoal{
  margin:0 0 2px; font-size:12px; line-height:1.5; color:#8fd4ff;
}

/* ── Dòng KỸ NĂNG ── */
.gcard .skill{
  margin:0 0 2px; font-size:12.5px; line-height:1.5; color:#9db0d4;
}
.gcard .skill b{ color:#c3d2f0; font-weight:600; }

/* ── Đường sang bài đọc liên quan ──
   GỢI Ý, KHÔNG KHOÁ: trẻ bấm "Chơi ngay" được luôn. Vùng chạm 44px theo WCAG
   2.5.5 vì đây là một liên kết đứng riêng, không nằm giữa câu. */
.gcard .readlink{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  margin:0 0 2px; font-size:12.5px; line-height:1.4;
  color:#8fd4ff; text-decoration:none; border-bottom:1px solid transparent;
}
.gcard .readlink:hover,
.gcard .readlink:focus-visible{ color:#bfe6ff; border-bottom-color:currentColor; }

@media (max-width:560px){
  .record{ padding:11px 13px; }
  .rd{ width:28px; }
}