/* =====================================================================
   [GIAO DIỆN] style.css — dùng chung cho gateway, game, admin
   ---------------------------------------------------------------------
   Bảng màu (đổi ở :root là đổi toàn trang):
     --nen   : nền xanh navy sâu (đêm Chầu Thánh Thể)
     --tam   : nền tấm/hộp nổi
     --vang  : MÀU NHẤN DUY NHẤT — vàng phụng vụ (nút, đồng hồ, Bánh Thánh)
     --giay  : trắng ngà Bánh Thánh (mặt chữ của thẻ)
     --muc   : chữ đậm trên nền sáng
   Nếu hỏng: giao diện "trần trụi" không màu → file này không tải được,
   kiểm tra đường dẫn assets/style.css (game nằm trong thư mục con nên
   dùng ../assets/style.css).
   ===================================================================== */
:root {
  --nen:  #0F1830;
  --tam:  #17223F;
  --vien: #2B3A66;
  --vang: #E8BC4F;
  --vang-dam: #211502;
  --giay: #F7F2E4;
  --muc:  #241B08;
  --chu:  #EDEEF4;
  --chu-mo: #9AA7CC;
  --do:   #FF7A64;
  --bk: 14px;                    /* bo góc thống nhất toàn trang */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}
::selection { background: var(--vang); color: var(--vang-dam); }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 0; }
h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; }
code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: #0B1226; border: 1px solid var(--vien);
  border-radius: 6px; padding: 1px 6px; font-size: 0.9em;
}

/* ---------- [BÁNH THÁNH PIXEL] điểm nhấn nhận diện của trạm ---------- */
/* Vẽ bằng box-shadow trên lưới 7×7 — đổi cỡ bằng biến --u              */
.banh-thanh { --u: 8px; width: calc(var(--u)*7); height: calc(var(--u)*7); margin: 0 auto 14px; }
.banh-thanh.nho { --u: 4px; margin: 0; }
.banh-thanh i {
  display: block; width: var(--u); height: var(--u); background: transparent;
  box-shadow:
    calc(var(--u)*1) 0 var(--vang), calc(var(--u)*2) 0 var(--vang), calc(var(--u)*3) 0 var(--vang), calc(var(--u)*4) 0 var(--vang), calc(var(--u)*5) 0 var(--vang),
    0 var(--u) var(--vang), calc(var(--u)*1) var(--u) var(--vang), calc(var(--u)*3) var(--u) var(--vang), calc(var(--u)*5) var(--u) var(--vang), calc(var(--u)*6) var(--u) var(--vang),
    0 calc(var(--u)*2) var(--vang), calc(var(--u)*3) calc(var(--u)*2) var(--vang), calc(var(--u)*6) calc(var(--u)*2) var(--vang),
    0 calc(var(--u)*3) var(--vang), calc(var(--u)*1) calc(var(--u)*3) var(--vang), calc(var(--u)*2) calc(var(--u)*3) var(--vang), calc(var(--u)*3) calc(var(--u)*3) var(--vang), calc(var(--u)*4) calc(var(--u)*3) var(--vang), calc(var(--u)*5) calc(var(--u)*3) var(--vang), calc(var(--u)*6) calc(var(--u)*3) var(--vang),
    0 calc(var(--u)*4) var(--vang), calc(var(--u)*3) calc(var(--u)*4) var(--vang), calc(var(--u)*6) calc(var(--u)*4) var(--vang),
    0 calc(var(--u)*5) var(--vang), calc(var(--u)*1) calc(var(--u)*5) var(--vang), calc(var(--u)*3) calc(var(--u)*5) var(--vang), calc(var(--u)*5) calc(var(--u)*5) var(--vang), calc(var(--u)*6) calc(var(--u)*5) var(--vang),
    calc(var(--u)*1) calc(var(--u)*6) var(--vang), calc(var(--u)*2) calc(var(--u)*6) var(--vang), calc(var(--u)*3) calc(var(--u)*6) var(--vang), calc(var(--u)*4) calc(var(--u)*6) var(--vang), calc(var(--u)*5) calc(var(--u)*6) var(--vang);
}

/* ---------- [ĐẦU TRANG] tên trạm + đồng hồ dán dính ------------------ */
.dau-trang {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px calc(12px);
  background: color-mix(in srgb, var(--nen) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--vien);
}
.nhan-tram {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--vang);
}
.dong-ho {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; color: var(--vang);
  background: #0B1226; border: 1px solid var(--vien);
  border-radius: var(--bk); padding: 8px 14px; min-width: 96px; text-align: center;
}
.dong-ho.canh { color: var(--do); border-color: var(--do); }
.dong-ho.gap  { animation: nhip 0.8s ease-in-out infinite; }
@keyframes nhip { 50% { transform: scale(1.06); } }

/* ---------- [BÀN CỜ] lưới thẻ lật ------------------------------------ */
.than-trang { max-width: 560px; margin: 0 auto; padding: 16px 14px 36px; }
.ban-co {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 9px; margin-bottom: 22px;
}
.ban-co.tat { pointer-events: none; opacity: 0.4; }
.the {
  appearance: none; border: 0; background: transparent; padding: 0;
  min-height: 82px; cursor: pointer; perspective: 600px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.the:focus-visible { outline: 2px solid var(--vang); outline-offset: 2px; border-radius: 12px; }
.lat {
  position: relative; display: block; width: 100%; height: 100%; min-height: 82px;
  transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(.2,.7,.25,1);
}
.the.mo .lat { transform: rotateY(180deg); }
.the:active .lat { transform: scale(0.96); }
.the.mo:active .lat { transform: rotateY(180deg) scale(0.96); }
.mat {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding: 6px;
}
.mat-up  { background: var(--tam); border: 1px solid var(--vien); }
.mat-chu {
  background: var(--giay); color: var(--muc); transform: rotateY(180deg);
  font-weight: 600; font-size: 12.5px; line-height: 1.3; text-align: center;
  border: 1px solid #E4D9BC; overflow-wrap: anywhere;
}

/* ---------- [KHU ĐÁP ÁN] ô nhập + nút -------------------------------- */
.khu-dap-an label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
#oDapAn {
  width: 100%; resize: vertical; min-height: 84px;
  background: #0B1226; color: var(--chu);
  border: 1px solid var(--vien); border-radius: var(--bk);
  padding: 12px 14px; font: inherit; font-size: 15px;
}
#oDapAn::placeholder { color: var(--chu-mo); }
#oDapAn:focus { outline: 2px solid var(--vang); outline-offset: 1px; border-color: var(--vang); }
.mau-go { font-size: 12.5px; color: var(--chu-mo); margin: 8px 0 0; }
.bao-loi { color: var(--do); font-size: 13.5px; font-weight: 600; margin: 10px 0 0; }
.bao-loi.rung { animation: rung 0.4s; }
@keyframes rung { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.nut {
  appearance: none; display: inline-block; border: 1px solid var(--vien);
  background: #22305A; color: var(--chu);
  border-radius: var(--bk); padding: 13px 22px;
  font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform 0.08s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.nut:active { transform: scale(0.97); }
.nut:focus-visible { outline: 2px solid var(--vang); outline-offset: 2px; }
.nut-chinh { background: var(--vang); border-color: var(--vang); color: var(--vang-dam); }
.nut[disabled] { opacity: 0.55; cursor: default; }
#nutXacNhan { width: 100%; margin-top: 14px; }

.cau-noi {
  margin: 26px auto 0; max-width: 40ch; text-align: center;
  font-style: italic; font-size: 13.5px; color: var(--chu-mo);
}
.cau-noi span { display: block; font-style: normal; font-size: 12px; margin-top: 4px; color: var(--vang); }

/* ---------- [MÀN PHỦ] pop-up mở đầu / khoá / thắng ------------------- */
.man-phu {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 11, 24, 0.92); padding: 22px;
}
.man-phu[hidden] { display: none; }
.hop-phu {
  width: 100%; max-width: 340px; text-align: center;
  background: var(--tam); border: 1px solid var(--vien);
  border-radius: 20px; padding: 28px 22px;
}
.goi-y-nho {
  margin: 0 0 4px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--chu-mo);
}
.phu-de { color: var(--chu-mo); font-size: 14.5px; margin: 8px 0 18px; }
.ma-may {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: var(--vang); font-size: 14px; letter-spacing: 0.1em;
  margin: 14px 0 0;
}
#khuTenDoi { margin: 0 0 16px; text-align: left; }
#khuTenDoi label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
#oTenDoi {
  width: 100%; background: #0B1226; color: var(--chu);
  border: 1px solid var(--vien); border-radius: var(--bk);
  padding: 12px 14px; font: inherit; font-size: 15px;
}
#oTenDoi::placeholder { color: var(--chu-mo); }
#oTenDoi:focus { outline: 2px solid var(--vang); outline-offset: 1px; border-color: var(--vang); }
#khuTenDoi .bao-loi { margin-top: 8px; }
#doiDaLuu { margin: 0 0 16px; }
.hop-phu .nut { width: 100%; }
.hop-phu .cau-noi { margin-top: 18px; }

/* ---------- [TRANG CHỜ] trước giờ mở trạm ----------------------------- */
.man-cho { display: grid; place-items: center; padding: 24px; }
.hop-cho { max-width: 360px; text-align: center; }
.loi-dan { color: var(--chu-mo); font-size: 14.5px; }
.dem-cho {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 700; color: var(--vang); margin: 14px 0;
}

/* ---------- [ADMIN] ---------------------------------------------------- */
.man-admin { padding: 22px 16px; }
.hop-admin { max-width: 560px; margin: 0 auto; }
.hop-admin h2 { margin-top: 28px; font-size: 17px; }
.form-admin { display: flex; gap: 10px; margin-top: 14px; }
.form-admin input {
  flex: 1; background: #0B1226; color: var(--chu);
  border: 1px solid var(--vien); border-radius: var(--bk);
  padding: 12px 14px; font: inherit;
}
.bang-admin { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14.5px; }
.bang-admin td { padding: 9px 10px; border-bottom: 1px solid var(--vien); }
.bang-admin td:first-child { color: var(--chu-mo); width: 45%; }
.canh { color: var(--do); font-weight: 700; }
.ok-nho { color: #8FD98A; font-weight: 600; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.khung-log {
  background: #0B1226; border: 1px solid var(--vien); border-radius: var(--bk);
  padding: 14px; font-size: 12px; line-height: 1.6; overflow-x: auto;
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- [HOẠT CẢNH] Carlo pixel gõ code trên trang chờ ------------ */
.canh-code {
  width: min(300px, 86vw); margin: 0 auto 18px;
  background: var(--tam); border: 1px solid var(--vien);
  border-radius: var(--bk); padding: 12px 10px 8px;
}
.canh-code svg { display: block; width: 100%; height: auto; }
.canh-code lottie-player { display: block; width: 100%; height: min(240px, 62vw); margin: 0 auto; }
/* Thứ gì mang thuộc tính hidden trong khung là PHẢI biến mất — sửa lỗi
   hình pixel dự phòng hiện chồng chung với Lottie (display:block ở
   trên từng vô tình đè mất thuộc tính hidden của trình duyệt).        */
.canh-code [hidden] { display: none !important; }
/* Hào quang bồng bềnh — chuyển động mượt, đối lập nhịp gõ máy móc     */
.hao-quang { animation: hao-bay 2.6s ease-in-out infinite alternate; }
@keyframes hao-bay { to { transform: translateY(2.5px); } }
/* Hai tay gõ phím so le nhau                                           */
.tay-1 { animation: go-phim 0.34s steps(1) infinite; }
.tay-2 { animation: go-phim 0.34s steps(1) infinite 0.17s; }
@keyframes go-phim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* 6 dòng code lệch pha nhau → hiệu ứng code cuộn liên tục              */
.dong-code { animation: chay-code 5.4s steps(1) infinite; }
.dong-code.d2 { animation-delay: -4.5s; }
.dong-code.d3 { animation-delay: -3.6s; }
.dong-code.d4 { animation-delay: -2.7s; }
.dong-code.d5 { animation-delay: -1.8s; }
.dong-code.d6 { animation-delay: -0.9s; }
@keyframes chay-code { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 86% { opacity: 0; } 100% { opacity: 0; } }
.con-tro { animation: nhay-tro 1s steps(1) infinite; }
@keyframes nhay-tro { 50% { opacity: 0; } }
/* Thánh giá hiện lên màn hình cuối mỗi nhịp code — như lúc Carlo đăng
   phép lạ Thánh Thể lên website của mình                               */
.thanh-gia-man { animation: hien-thanh-gia 5.4s steps(1) infinite; }
@keyframes hien-thanh-gia { 0%, 58% { opacity: 0; } 62%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ---------- [GIẢM CHUYỂN ĐỘNG] cho máy bật reduced motion ------------- */
@media (prefers-reduced-motion: reduce) {
  .lat { transition: none; }
  .dong-ho.gap { animation: none; }
  .bao-loi.rung { animation: none; }
  .canh-code * { animation: none !important; }
}

/* Màn hình hẹp: thẻ nhỏ lại một chút cho vừa 4 cột */
@media (max-width: 350px) {
  .mat-chu { font-size: 11.5px; }
  .the, .lat { min-height: 74px; }
}