/* =====================================================================
   site-fixes.css — nạp sau cùng, đè lên inpeace.css và church.css
   Phần 1: ẩn số liệu giả (site chạy ở chế độ ngoại tuyến)
   Phần 2: thiết kế lại "Ánh nến trên đá" — trang nghiêm, kiểu sách lễ cổ
   ===================================================================== */

/* ---------- Phần 1: ẩn số liệu giả ---------- */
/* Site chạy với window.__INPEACE_OFFLINE = true (xem index.html), nên mọi con số
   "đang online / đang chờ" do engine tự sinh ra là giả. */
.title .here { display: none !important; }        /* số người ở màn hình chào */
#btn-room { display: none !important; }           /* chọn thánh đường kèm số người giả */
#wed-g-n, #wed-b-n { display: none !important; }  /* "N người chờ" đám cưới */


/* ---------- Phần 2: thiết kế lại ---------- */

/* 2.1 Bộ token: màu & chữ ----------------------------------------------- */
:root {
  --ink: #f4ead6;                              /* ngà ấm */
  --ink-dim: rgba(244, 234, 214, .66);
  --gold: #d9b26f;                             /* vàng cổ, dịu hơn bản cũ */
  --gold-hi: #f1dcac;                          /* vàng sáng cho chữ nhấn */
  --gold-line: rgba(217, 178, 111, .32);
  --line: rgba(244, 234, 214, .14);
  --glass: rgba(14, 11, 8, .58);
  --glass-deep: rgba(14, 11, 8, .86);
  --display: "Cormorant Garamond", "Noto Serif", Georgia, serif;
  --serif: "Noto Serif", "Noto Serif KR", "AppleMyungjo", Georgia, serif;
  --sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", sans-serif;
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cpath d='M0 6h70M90 6h70' stroke='%23d9b26f' stroke-opacity='.55' stroke-width='.8'/%3E%3Cpath d='M80 1l5 5-5 5-5-5z' fill='none' stroke='%23d9b26f' stroke-width='.9'/%3E%3Ccircle cx='80' cy='6' r='1.2' fill='%23d9b26f'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cpath d='M10 1v26M3 8.5h14' stroke='%23e2bf7e' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='8.5' r='2.2' fill='none' stroke='%23e2bf7e' stroke-width='.9'/%3E%3C/svg%3E");
}

/* Dấu chọn bàn phím rõ ràng, theo màu vàng */
:where(button, a, [tabindex]):focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }


/* 2.2 Màn hình chào ----------------------------------------------------- */
.title {
  background:
    radial-gradient(60% 45% at 50% 46%, rgba(10, 7, 4, .72) 0, rgba(10, 7, 4, .4) 60%, transparent 100%),
    linear-gradient(180deg, rgba(5, 5, 7, .55) 0, transparent 22%, transparent 70%, rgba(5, 5, 7, .7) 100%);
}

.wordmark {
  position: relative;
  margin: 0;
  padding-top: 40px;
  font: 500 clamp(52px, 12vw, 76px)/1 var(--display);
  letter-spacing: .06em;
  color: #fbf1dd;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .9), 0 0 42px rgba(255, 196, 120, .28);
}
.wordmark::before {                            /* thánh giá nhỏ phía trên */
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 20px; height: 28px; margin-left: -10px;
  background: var(--cross) center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 200, 120, .55));
}

.place {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 12px 0 30px;
  font: 500 12px var(--sans);
  letter-spacing: .44em;
  text-indent: .44em;                          /* cân lại khoảng cách chữ cuối */
  color: var(--gold-hi);
}
.place::after {                                /* đường kẻ vàng có hình thoi */
  content: "";
  width: 160px; height: 12px;
  background: var(--ornament) center / contain no-repeat;
}

.enter-label {
  font: 400 15px var(--sans) !important;
  letter-spacing: .14em;
  color: var(--ink);
}

.adapted-by {
  font-family: var(--display) !important;
  font-style: italic;
  font-size: 14px !important;
  letter-spacing: .04em;
  color: rgba(244, 234, 214, .55) !important;
}

/* Dòng "N ngọn nến được thắp hôm nay" */
.title .ch-candles {
  margin-top: 6px;
  font: italic 400 15px var(--display);
  letter-spacing: .03em;
  color: var(--gold-hi);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}


/* 2.3 Kính mờ dùng chung: thanh công cụ, thanh hành động, dải ngôn ngữ, lời nhắc âm thanh */
.pill,
nav.actions,
.sound-ask,
.toast,
.ch-banner,
.ch-prompt,
.ch-toast {
  background: var(--glass) !important;
  border: 1px solid var(--gold-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .07), 0 10px 30px rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}

.sound-ask b { font-family: var(--serif); font-weight: 500; letter-spacing: .01em; }
.sound-ask small { color: var(--ink-dim); }


/* 2.4 Thanh hành động dưới cùng ----------------------------------------- */
nav.actions { padding: 6px 8px; gap: 2px; }
nav.actions button { transition: background-color .25s ease, color .25s ease; }
nav.actions button:hover { background: rgba(217, 178, 111, .1); }
nav.actions button:active { background: rgba(217, 178, 111, .18); }

/* nhãn dưới biểu tượng: 10.5px → 11.5px, dễ đọc hơn */
nav.actions .ab-l {
  font: 500 11.5px/1.15 var(--sans) !important;
  letter-spacing: .01em;
  color: var(--ink) !important;
  opacity: .88;
}
/* điện thoại: mỗi nút chỉ rộng ~43px, không đủ chỗ cho nhãn 2 chữ trên một dòng
   -> cho nhãn xuống 2 dòng và nút cao lên (đã đo ở màn 375px: không nhãn nào bị cắt) */
@media (max-width: 520px) {
  nav.actions { padding: 5px 4px !important; gap: 0 !important; }
  nav.actions button {
    height: auto !important; min-height: 50px !important;
    padding: 5px 0 4px !important;
    flex-direction: column !important; gap: 3px !important;
  }
  nav.actions .ab-l {
    font-size: 11px !important; letter-spacing: 0 !important; line-height: 1.12 !important;
    white-space: normal !important; text-align: center !important; overflow: visible !important;
  }
}


/* 2.5 Bảng (sheet) ------------------------------------------------------- */
dialog.sheet {
  background: var(--glass-deep) !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 236, 200, .06);
}
dialog.sheet::backdrop { background: rgba(3, 2, 1, .5); }

dialog.sheet > header {
  padding-bottom: 14px;
  background: var(--ornament) center bottom / 120px 10px no-repeat;   /* hoa văn dưới tiêu đề */
}
dialog.sheet h2 {
  font: 500 21px/1.2 var(--display) !important;
  letter-spacing: .02em;
  color: #fbf1dd;
}
dialog.sheet h2 small { font-family: var(--sans) !important; letter-spacing: .14em; }

/* Lời kinh trong bảng Kinh Truyền Tin */
.ch-prayer {
  background: rgba(255, 240, 210, .035);
  border: 1px solid var(--gold-line);
  font-size: 17px;
  line-height: 1.7;
}
.ch-prayer b { color: var(--gold-hi); }

/* Nút trong các bảng của lớp tính năng riêng */
.ch-btn { font: 500 14px var(--sans); min-height: 40px; border-color: var(--line); }
.ch-btn.gold { border-color: var(--gold); color: var(--gold-hi); background: rgba(217, 178, 111, .08); }
.ch-btn.gold:hover { background: rgba(217, 178, 111, .16); }
.ch-note { font-size: 13.5px; line-height: 1.55; }


/* 2.6 Thông báo nổi ------------------------------------------------------ */
.toast { font: 400 13px var(--sans); }
.toast.notice { font-size: 14px; }


/* 2.8 Dòng ký tên "Limited Edition for the Special One" ------------------
   - Màn hình chào + bảng Giới thiệu: .adapted-by (có sẵn trong index.html)
   - Trong thánh đường, mọi chế độ (đọc kinh, Mân Côi, thắp nến, trò chơi…): #se-mark ở mép dưới
   - Mọi bảng (Hầm mộ, Hạt ước, Âm nhạc, Lộc, Kinh Truyền Tin…): chân trang ::after
   Chữ của #se-mark đặt trong site-fixes.js; chữ chân trang đặt ở biến --signature. */
:root { --signature: "Limited Edition for the Special One"; }

#se-mark {
  position: fixed; left: 50%; bottom: max(3px, calc(env(safe-area-inset-bottom) - 17px));
  transform: translateX(-50%);
  z-index: 2147483000;                         /* nằm trên mọi lớp của engine, kể cả trò chơi toàn màn hình */
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap; pointer-events: none; user-select: none;
  font: italic 500 13px/1.2 var(--display);
  letter-spacing: .06em;
  color: rgba(241, 220, 172, .82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .7);
}
#se-mark::before, #se-mark::after {             /* gạch vàng mảnh hai bên */
  content: ""; width: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 178, 111, .8), transparent);
}
body:not(.in) #se-mark { display: none; }      /* màn hình chào đã có .adapted-by */

/* chân trang trong mọi bảng */
dialog.sheet::after,
dialog.fs-card::after {
  content: var(--signature);
  display: block;
  padding: 10px 18px 14px;
  text-align: center;
  font: italic 500 13px/1.3 var(--display);
  letter-spacing: .06em;
  color: rgba(241, 220, 172, .7);
  background: var(--ornament) center 0 / 90px 8px no-repeat;
}


/* 2.9 Tôn trọng người dùng tắt hiệu ứng chuyển động -------------------- */
@media (prefers-reduced-motion: reduce) {
  .enter .halo, .enter-label, .wordmark::before { animation: none !important; }
}