/* v422 — Bảng hoạt động (hub). Chỉ transform/opacity khi chuyển động; tắt khi prefers-reduced-motion. */
.hub-bar { position: fixed; left: 0; right: 0; bottom: 70px; z-index: 22; display: flex; align-items: stretch; gap: 6px;
  padding: 6px 6px 6px 6px; box-sizing: border-box; pointer-events: auto;
  background: linear-gradient(180deg, rgba(20,13,8,0) 0%, rgba(20,13,8,.72) 22%, rgba(20,13,8,.86) 100%); }
.hub-bar.is-hidden { visibility: hidden; pointer-events: none; }
.hub-all { flex: none; position: relative; width: 64px; min-height: 80px; align-self: flex-end; border-radius: 16px; cursor: pointer; padding: 6px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(160deg, #6a4a22, #3a2616); border: 1.5px solid #d9b25f; color: #fff0cf; font: 600 12.5px/1.1 var(--serif, Georgia, serif); -webkit-tap-highlight-color: transparent; }
.hub-all-ic { display: grid; grid-template-columns: 13px 13px; gap: 4px; }
.hub-all-ic i { width: 13px; height: 13px; border-radius: 4px; background: #f3d58e; display: block; }
.hub-strip { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; contain: layout paint; padding-top: 8px; margin-top: -8px; }
.hub-strip::-webkit-scrollbar { display: none; }
.hub-t { flex: none; position: relative; width: 70px; min-height: 80px; padding: 5px 2px 4px; border-radius: 16px; cursor: pointer; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  background: rgba(44, 30, 20, .92); border: 1px solid rgba(201, 162, 74, .45); color: #f6e9d0; -webkit-tap-highlight-color: transparent; }
.hub-t:active, .hub-all:active, .hub-pin:active { transform: scale(.94); }
.hub-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; line-height: 1;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.35); }
.hub-g-relax .hub-ic { background: radial-gradient(circle at 35% 30%, #c8f0d2, #4f9b6c 70%); }
.hub-g-pray .hub-ic { background: radial-gradient(circle at 35% 30%, #fff1c4, #c99a3c 70%); }
.hub-g-learn .hub-ic { background: radial-gradient(circle at 35% 30%, #d8e6ff, #5378b8 70%); }
.hub-g-me .hub-ic { background: radial-gradient(circle at 35% 30%, #ffd9e2, #b85c78 70%); }
.hub-l { font: 500 11.5px/1.15 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; max-width: 66px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-t.is-pick { border-color: #f0c96a; background: linear-gradient(180deg, rgba(92,64,26,.95), rgba(44,30,20,.95)); }
.hub-t.is-big { border-color: #8fd3a5; background: linear-gradient(180deg, rgba(30,70,46,.95), rgba(26,40,30,.95)); }
.hub-rib { position: absolute; top: -1px; left: 50%; transform: translate(-50%, -45%); padding: 1px 6px; border-radius: 8px; background: #f0c96a; color: #2a1b0e;
  font: 700 9.5px/1.4 system-ui, sans-serif; white-space: nowrap; }
.hub-dot { position: absolute; top: 3px; right: 5px; width: 11px; height: 11px; border-radius: 50%; background: #ff4b3e; box-shadow: 0 0 0 2px #2a1b0e; }
.hub-dot[hidden] { display: none; }
/* hàng kinh nhanh cũ: gộp vào ô «Kinh nhanh» khi dải hoạt động hiện (vẫn mở lại khi đang đọc kinh) */
body.hub-bar-on:not(.prayer-rail-open) .prayer-rail .prayer-tabs { display: none !important; }

/* chip chuỗi ngày */
/* v423: hạ xuống hàng thứ hai — góc trên trái đã có chip «Hôm nay» (today-chip/aside) của game */
.hub-streak { position: absolute; top: calc(max(16px, env(safe-area-inset-top, 0px)) + 62px); left: max(14px, env(safe-area-inset-left, 0px)); z-index: 2;
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; min-width: 60px; padding: 0 12px; border-radius: 22px; cursor: pointer;
  background: rgba(30, 20, 12, .82); border: 1px solid rgba(240, 160, 80, .7); color: #ffd9a8; font: 700 17px/1 system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
body:not(.hub-bar-on) .hub-streak { visibility: hidden; }
.hub-streak span { font-size: 16px; filter: grayscale(.8); opacity: .75; }
.hub-streak.is-today span { filter: none; opacity: 1; }

/* điểm chạm trong nhà thờ */
.hub-pins { position: fixed; inset: 0; z-index: 9; pointer-events: none; contain: layout style; }
.hub-pins.is-hidden { display: none; }
.hub-pin { position: absolute; left: 0; top: 0; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; will-change: transform;
  -webkit-tap-highlight-color: transparent; }
.hub-pin.is-off { display: none; }
.hub-pin-ic { position: absolute; inset: 4px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(255,246,214,.98), rgba(214,170,80,.95) 72%); border: 1.5px solid #fff3c9;
  box-shadow: 0 0 12px 3px rgba(255, 214, 120, .55), 0 2px 6px rgba(0,0,0,.45); font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.hub-pin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 224, 150, .85); opacity: 0;
  animation: hub-ping 2.6s ease-out 0s 5; }
.hub-pin-l { position: absolute; top: 42px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 9px; white-space: nowrap;
  background: rgba(20, 13, 8, .82); color: #ffeec8; font: 600 11.5px/1.45 system-ui, sans-serif; }
@keyframes hub-ping { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* bảng «Tất cả» */
body.hub-on #view { visibility: hidden; }
body.hub-on .dock, body.hub-on #prayer-rail, body.hub-on #hud-stand, body.hub-on #hint, body.hub-on .look-label, body.hub-on #coach-tip,
body.hub-on .top-bar, body.hub-on .home-pill, body.hub-on #home-pill, body.hub-on .ssn-chip, body.hub-on #first-tips { visibility: hidden !important; }
.hub-sheet { position: fixed; inset: 0; z-index: 40; color: #f6e9d0; }
.hub-sheet[hidden] { display: none; }
.hub-sheet-card { position: absolute; inset: 0; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 50% 0%, #4a3220 0%, #24170e 60%); }
.hub-sheet-head { flex: none; display: flex; align-items: center; padding: max(10px, env(safe-area-inset-top, 0px)) 10px 8px 16px; border-bottom: 1px solid rgba(201,162,74,.35); }
.hub-sheet-head h2 { flex: 1; margin: 0; font: 600 21px/1.2 var(--serif, Georgia, serif); color: #ffe7b0; }
.hub-sheet-x { width: 46px; height: 46px; border-radius: 23px; border: 1px solid rgba(201,162,74,.6); background: rgba(20,13,8,.5); color: #ffe7b0; font-size: 28px; line-height: 1; cursor: pointer; }
.hub-sheet-body { flex: 1; overflow-y: auto; padding: 4px 12px calc(18px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.hub-sec h3 { margin: 14px 4px 8px; font: 600 15px/1.2 system-ui, sans-serif; color: #f0c96a; letter-spacing: .02em; }
.hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hub-grid .hub-t { width: auto; min-height: 92px; padding-top: 9px; }
.hub-grid .hub-ic { width: 48px; height: 48px; font-size: 27px; }
.hub-grid .hub-l { font-size: 12.5px; max-width: none; }
.hub-foot { margin: 16px 4px 0; font: 12px/1.4 system-ui, sans-serif; color: #c8b28c; }

/* hướng dẫn lần đầu */
.hub-tour { position: fixed; left: 14px; right: 14px; bottom: 182px; z-index: 45; max-width: 420px; margin: 0 auto; padding: 14px 16px 12px; border-radius: 18px;
  background: #fff6e2; color: #2a1b0e; box-shadow: 0 10px 30px rgba(0,0,0,.5); font: 15px/1.4 system-ui, sans-serif; }
.hub-tour h3 { margin: 2px 0 4px; font: 700 18px/1.2 var(--serif, Georgia, serif); }
.hub-tour p { margin: 0; }
.hub-tour-k { font-size: 12px !important; color: #8a6234; font-weight: 700; }
.hub-tour-a { display: flex; justify-content: space-between; margin-top: 10px; }
.hub-tour-a button { min-height: 44px; padding: 0 18px; border-radius: 22px; font: 600 15px system-ui, sans-serif; cursor: pointer; }
.hub-tour-skip { background: none; border: 1px solid #c9a24a; color: #6a4a22; }
.hub-tour-next { background: #6a4a22; border: 0; color: #fff3d6; }
.hub-spot { outline: 3px solid #ffd76a !important; outline-offset: 2px; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .hub-pin::before { animation: none; } .hub-t:active, .hub-all:active, .hub-pin:active { transform: none; } }
body.large-text .hub-l { font-size: 12.5px; }

/* v423 · chip «N người đang cùng cầu nguyện» (chỉ hiện khi có số liệu thật) */
.hub-online { position: absolute; top: calc(max(10px, env(safe-area-inset-top, 0px)) + 50px); left: 50%; transform: translateX(-50%); z-index: 7;
  display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 12px; border-radius: 20px; max-width: min(260px, calc(100vw - 168px)); overflow: hidden; white-space: nowrap; cursor: pointer;
  background: rgba(30, 20, 12, .78); border: 1px solid rgba(120, 220, 150, .55); color: #e9ffe9; font: 600 13px/1 system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.hub-online[hidden], body:not(.hub-bar-on) .hub-online { display: none; }
/* v436: do not cover «Bốn bước nhẹ» or the left home/parish column */
body:has(#first-tips.show) .hub-online,
body:has(.first-tips.show) .hub-online { visibility: hidden; pointer-events: none; }
.hub-online b { font-size: 14px; color: #b9ffc9; }
.hub-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #5be27f; box-shadow: 0 0 0 0 rgba(91,226,127,.6); animation: hubLive 2.4s ease-out 6; }
@keyframes hubLive { 0% { box-shadow: 0 0 0 0 rgba(91,226,127,.6); } 100% { box-shadow: 0 0 0 9px rgba(91,226,127,0); } }
/* quà cầu nguyện nhận qua link */
.hub-gift { position: fixed; left: 16px; right: 16px; top: 22%; z-index: 46; max-width: 400px; margin: 0 auto; padding: 18px 18px 14px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, #fff6e2, #f3dfb6); color: #3a2614; border: 2px solid #d9b25f; box-shadow: 0 18px 50px rgba(0,0,0,.55); font: 16px/1.45 system-ui, sans-serif; }
.hub-gift-ic { font-size: 54px; line-height: 1; }
.hub-gift-k { margin: 6px 0 2px; font-size: 13px; font-weight: 700; color: #8a6234; text-transform: uppercase; letter-spacing: .04em; }
.hub-gift-t { margin: 0 0 12px; font-size: 18px; }
.hub-gift-a { display: flex; gap: 10px; }
.hub-gift-a button { flex: 1; min-height: 46px; border-radius: 23px; border: 1px solid #c9a24a; background: none; color: #6a4a22; font: 600 15px system-ui, sans-serif; cursor: pointer; }
.hub-gift-a button.pri { background: #6a4a22; color: #fff3d6; border: 0; }
@media (prefers-reduced-motion: reduce) { .hub-online-dot { animation: none; } }

/* v439 — Sân đình chooser: Phơi lúa / Ô ăn quan */
#sd-chooser { position: fixed; inset: 0; z-index: 42; display: none; align-items: center; justify-content: center; background: #0006; padding: 24px 16px; }
#sd-chooser.open { display: flex; }
#sd-chooser .sd-card { width: min(360px, 100%); background: #2a1c12; color: #f7ecd8; border-radius: 16px; padding: 16px 16px 18px; box-shadow: 0 12px 40px #0007; }
#sd-chooser .sd-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
#sd-chooser .sd-head h2 { flex: 1; margin: 0; font: 700 20px/1.2 system-ui, sans-serif; }
#sd-chooser .sd-x { width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: #f7ecd8; font-size: 28px; line-height: 1; cursor: pointer; }
#sd-chooser .sd-lead { margin: 0 0 14px; opacity: 0.85; font: 400 15px/1.4 system-ui, sans-serif; }
#sd-chooser .sd-row { display: flex; flex-direction: column; gap: 10px; }
#sd-chooser .sd-btn { min-height: 48px; border-radius: 12px; border: 1px solid #e8c27a88; background: #7a5a2c; color: #fff6d8; font: 600 16px/1.2 system-ui, sans-serif; cursor: pointer; }
#sd-chooser .sd-btn:focus-visible { outline: 2px solid #ffe7a8; outline-offset: 2px; }