/* Cần điều khiển ảo (chỉ hiện trên màn hình cảm ứng) */
.joy { position: fixed; left: 22px; bottom: calc(96px + var(--safe-b)); width: 124px; height: 124px; border-radius: 50%; z-index: 3; touch-action: none;
  background: radial-gradient(circle, rgba(251, 245, 234, 0.18), rgba(251, 245, 234, 0.42)); border: 2px solid rgba(251, 245, 234, 0.75); box-shadow: 0 6px 20px rgba(40, 25, 15, 0.22); backdrop-filter: blur(3px); display: none; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff8ea, #e8d6b4); box-shadow: 0 3px 10px rgba(40, 25, 15, 0.35); pointer-events: none; }
@media (pointer: coarse) { .joy { display: block; } }
@media (max-width: 600px) { .joy { left: 16px; bottom: calc(84px + var(--safe-b)); width: 112px; height: 112px; } }

/* Nghe kinh */
.kinh-list { display: grid; gap: 8px; margin: 12px 0; }
.kinh-list button { display: block; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 14px; }
.kinh-list button strong { display: block; font-size: 15px; color: var(--son-dark); }
.kinh-list button span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kinh-list button em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--gold); }
.kinh-list button:hover { background: var(--paper-2); }
.kinh-bar { position: fixed; left: 50%; transform: translateX(-50%); top: 112px; width: min(560px, calc(100vw - 16px)); z-index: 25; background: rgba(43, 30, 20, 0.88); color: #fff4dc; border-radius: 16px; padding: 10px 14px 9px; box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.kinh-head { display: flex; align-items: center; gap: 8px; }
.kinh-head strong { font-family: var(--serif); font-size: 15px; color: #f3d27a; }
.kinh-head .muted { color: #d8c6a8; margin-right: auto; }
.kinh-head .icon-btn { color: #fff4dc; font-size: 17px; }
.kinh-text { font-family: var(--serif); font-size: 19px; line-height: 1.5; margin-top: 4px; min-height: 2.9em; }
.kinh-text .w { opacity: 0.45; transition: opacity 0.2s, color 0.2s; }
.kinh-text .w.done { opacity: 0.95; }
.kinh-text .w.now { opacity: 1; color: #ffd36b; text-shadow: 0 0 12px rgba(255, 200, 90, 0.6); }
.kinh-prog { height: 3px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.kinh-prog div { height: 100%; width: 0; background: #e6b84a; }
@media (max-width: 600px) { .kinh-bar { top: 64px; } .kinh-text { font-size: 17px; } }

/* Thông báo luôn nằm trên cần điều khiển; trên màn hình cảm ứng đặt cao hơn vùng cần */
.toasts, .festival { z-index: 4; }
@media (pointer: coarse) {
  .toasts { bottom: calc(222px + var(--safe-b)); }
  .festival { top: 112px; bottom: auto; }
}
@media (pointer: coarse) and (min-width: 601px) {
  .toasts { bottom: calc(240px + var(--safe-b)); }
}

/* Công phu chung */
.cp-banner { position: fixed; left: 50%; transform: translateX(-50%); top: 112px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(124, 36, 28, 0.94); color: #fff3d6; font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow); white-space: nowrap; max-width: calc(100vw - 16px); }
.cp-banner span { overflow: hidden; text-overflow: ellipsis; }
.cp-banner button { border: 0; background: #f3d27a; color: #3b2a20; font-weight: 700; border-radius: 999px; padding: 6px 12px; flex: none; }
@media (max-width: 600px) { .cp-banner { top: 64px; font-size: 12.5px; } }

/* Lời nhắc mỗi ngày */
.card-body { text-align: center; background: radial-gradient(circle at 50% 0%, #fff8ea, var(--paper) 60%); }
.card-lotus { font-size: 48px; }
.card-quote { font-family: var(--serif); font-size: 24px; line-height: 1.45; color: var(--ink); margin: 18px 6px 8px; }
.card-ok { width: 100%; margin-top: 8px; padding: 11px; }

/* Sổ tĩnh tâm */
.logbox { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 10px 0; }
.log-title { font-weight: 700; font-size: 14px; color: var(--son-dark); margin-bottom: 8px; }
.log-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 6px; }
.log-stats b { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.log-stats span { font-size: 12px; color: var(--muted); }
.log-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 70px; margin-top: 10px; padding: 0 4px; }
.log-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.log-col i { display: block; width: 60%; max-width: 22px; border-radius: 4px 4px 2px 2px; background: linear-gradient(var(--gold), var(--son)); }
.log-col span { font-size: 10.5px; color: var(--muted); }
#cardAgain { margin-bottom: 8px; }

/* Nút hạnh lành theo ngữ cảnh (đứng gần bàn thờ, hồ, cây, sân, tàng kinh các) */
.ctx-btn { position: fixed; right: 14px; bottom: calc(96px + var(--safe-b)); z-index: 4; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 16px 10px 12px; background: linear-gradient(135deg, #f3d27a, #e6a83c); color: #3b2a20; font-weight: 700; font-size: 15px; box-shadow: 0 6px 18px rgba(80, 45, 10, 0.35); animation: ctxIn 0.3s ease; }
.ctx-btn span { font-size: 22px; }
.ctx-btn.cool { filter: grayscale(0.7); opacity: 0.6; }
@keyframes ctxIn { from { transform: scale(0.6); opacity: 0; } }
@media (max-width: 600px) { .ctx-btn { bottom: calc(84px + var(--safe-b)); right: 10px; font-size: 14px; } }

/* Đọc sách */
.sach-body { background: radial-gradient(circle at 50% 0%, #fff8ea, var(--paper) 60%); }
.sach-text { font-family: var(--serif); font-size: 19px; line-height: 1.65; color: var(--ink); margin: 12px 2px 16px; }
.sach-nav { display: flex; justify-content: space-between; gap: 8px; }

/* hạnh lành trong sổ */
.log-merit { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }

/* Số liệu thật trên màn vào chùa */
.live-stats { margin: 0 0 10px; font-size: 13px; color: var(--son-dark); font-weight: 600; }

/* Hướng dẫn người mới */
.coach { position: fixed; left: 50%; transform: translateX(-50%); top: 120px; z-index: 30; width: min(380px, calc(100vw - 24px)); background: var(--paper); border-radius: 18px; padding: 16px 16px 12px; box-shadow: 0 12px 40px rgba(30, 18, 8, 0.35); text-align: center; animation: up 0.3s ease; }
.coach-step { font-size: 38px; }
.coach p { margin: 6px 0 10px; font-size: 15.5px; line-height: 1.5; }
.coach-nav { display: flex; align-items: center; gap: 8px; }
.coach-nav .big-btn { margin: 0; width: auto; flex: 1; padding: 10px; }
@media (max-width: 600px) { .coach { top: 76px; } }

/* Đồng bộ sổ */
.sync { margin: 6px 0 10px; }
.sync summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.sync-code { font-family: ui-monospace, Menlo, monospace; font-size: 26px; font-weight: 700; letter-spacing: 3px; text-align: center; color: var(--son-dark); background: #fff; border: 1px dashed var(--gold); border-radius: 12px; padding: 8px; margin: 6px 0; }
.sync-row { display: flex; gap: 6px; margin-top: 8px; }
.sync-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; text-transform: uppercase; letter-spacing: 1px; }

/* Lễ khánh thành */
.kt { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(60, 35, 10, 0.25), rgba(30, 18, 8, 0.55)); }
.kt[hidden] { display: none; }
.kt-body { width: min(420px, calc(100vw - 28px)); background: linear-gradient(#fff8ea, #f6e7c8); border: 2px solid var(--gold); border-radius: 22px; padding: 20px 18px 16px; text-align: center; box-shadow: 0 20px 60px rgba(40, 20, 0, 0.45); animation: up 0.4s ease; }
.kt-lotus { font-size: 54px; }
.kt-body h3 { font-family: var(--serif); color: var(--son-dark); font-size: 30px; margin: 2px 0 6px; }
.kt-body p { margin: 0 0 10px; line-height: 1.5; }
.kt-names { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.kt-names span { background: #fff; border: 1px solid rgba(214, 165, 58, 0.5); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.kt-nav { display: flex; gap: 8px; }
.kt-nav .big-btn { margin: 0; flex: 1; padding: 11px; }
.invite-btn { margin: 4px 0 10px; background: linear-gradient(135deg, #b8452e, #8f2a1f); }

/* gọn: cần điều khiển nhỏ, mờ khi không chạm; nút việc nhỏ lại */
.joy, .joy.on { width: 96px !important; height: 96px !important; left: 14px !important; bottom: calc(68px + var(--safe-b)) !important; opacity: .5; transition: opacity .2s; }
.joy:active, .joy.active { opacity: .9; }
.joy-knob { width: 42px; height: 42px; }
.ctx-btn { right: 10px !important; bottom: calc(70px + var(--safe-b)) !important; padding: 6px 12px 6px 9px; font-size: 13px; gap: 6px; box-shadow: 0 3px 10px rgba(80, 45, 10, .25); }
.ctx-btn span { font-size: 17px; }