/* OneAltar Stage 2: music gallery, theater player, live chat, subscriber counters (same indigo/gold glass) */
.ts-host { z-index: 120; }
.sub-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:12.5px; color:var(--text);
  background:linear-gradient(135deg,rgba(212,160,23,.18),rgba(91,63,212,.22)); border:1px solid #f5d76e44; white-space:nowrap; cursor:pointer; }
.sub-pill b { color:var(--gold-soft); font-size:14px; font-variant-numeric:tabular-nums; }
.sub-pill.small { cursor:default; font-size:11.5px; padding:4px 10px; }
.sub-pill .dotlive, .mega-subs .dotlive { width:8px; height:8px; }
@media (max-width: 560px) { .topbar .sub-pill span[data-i18n] { display:none; } .topbar .sub-pill { padding:6px 9px; } }
.mega-subs { display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 18px; border-radius:22px; margin:0 0 12px; flex-wrap:wrap; text-align:center;
  background:linear-gradient(120deg,rgba(212,160,23,.16),rgba(61,42,138,.35),rgba(212,160,23,.12)); border:1px solid #f5d76e33; }
.mega-subs b { font-family:"Playfair Display",serif; font-size:clamp(30px,5vw,48px); line-height:1; color:var(--gold-soft); text-shadow:0 0 24px #f5d76e55; font-variant-numeric:tabular-nums; }
.mega-subs span[data-i18n] { color:var(--text); font-weight:600; }
.mega-watch { margin:4px 0 16px; }
.n.bump { animation: bump .6s ease; }
@keyframes bump { 30% { transform:scale(1.18); color:#fff; } }

/* horizontal rails (pray with music, mega watch) */
.h-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,260px); gap:12px; overflow-x:auto; padding:4px 2px 10px; scroll-snap-type:x proximity; }
.h-rail > * { scroll-snap-align:start; }
.h-rail .empty { grid-column:1/-1; }

/* music cards */
.music-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.m-card { position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:rgba(26,19,51,.6); backdrop-filter:blur(14px);
  cursor:pointer; text-align:start; color:var(--text); transition:transform .18s, border-color .18s, box-shadow .18s; display:flex; flex-direction:column; }
.m-card:hover, .m-card:focus-visible { transform:translateY(-3px); border-color:#f5d76e66; box-shadow:0 16px 40px rgba(0,0,0,.45); outline:none; }
.m-thumb { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,var(--indigo-2),#120c24); overflow:hidden; }
.m-thumb img { width:100%; height:100%; object-fit:cover; }
.m-thumb .ph { position:absolute; inset:0; display:grid; place-items:center; font-size:38px; }
.m-thumb .pbtn { position:absolute; inset:auto 10px 10px auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:15px;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft)); color:#1a1333; box-shadow:0 6px 18px rgba(0,0,0,.5); }
.m-thumb .dur, .m-thumb .tag { position:absolute; top:8px; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; background:rgba(15,10,31,.8); }
.m-thumb .dur { right:8px; } .m-thumb .tag { left:8px; }
.m-thumb .tag.live { background:var(--live); color:#fff; }
.m-body { padding:10px 12px 12px; display:grid; gap:3px; }
.m-title { font-weight:700; font-size:13.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.m-sub { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-eng { font-size:11.5px; color:var(--muted); display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mini-eng i { font-style:normal; display:inline-flex; gap:3px; align-items:center; }
.music-search { margin-top:6px; }
.music-more { display:grid; place-items:center; min-height:60px; }
.music-more .spin { width:26px; height:26px; border-radius:50%; border:3px solid #f5d76e33; border-top-color:var(--gold-soft); animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- theater ---------- */
body.th-open { overflow:hidden; }
.theater { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; overflow:hidden;
  background:radial-gradient(900px 500px at 80% -10%,#5b3fd455,transparent),radial-gradient(700px 400px at 0% 100%,#d4a01722,transparent),rgba(10,7,22,.94);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); animation:thIn .25s ease; }
.theater[hidden] { display:none; }
@keyframes thIn { from { opacity:0; transform:scale(.985); } }
.th-bar { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); background:rgba(15,10,31,.6); flex:none; }
.th-bar-title { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; color:var(--gold-soft); }
.th-grid { flex:1; min-height:0; display:grid; grid-template-columns:250px minmax(0,1fr) 330px; gap:14px; padding:14px 16px; overflow:hidden; }
.th-queue, .th-main, .th-chat { min-height:0; }
.th-queue { overflow-y:auto; padding-right:4px; }
.th-main { overflow-y:auto; padding-right:4px; }
.th-h { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:2px 0 8px; }
.th-tabs { display:grid; gap:8px; }
.th-tab { display:grid; grid-template-columns:104px 1fr; gap:8px; align-items:center; padding:6px; border-radius:14px; text-align:start; color:var(--text);
  border:1px solid transparent; background:rgba(255,255,255,.035); transition:background .15s, border-color .15s; }
.th-tab:hover { background:rgba(255,255,255,.08); }
.th-tab.on { border-color:#f5d76e88; background:linear-gradient(135deg,rgba(212,160,23,.16),rgba(91,63,212,.2)); }
.th-tab .tt { position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,var(--indigo-2),#120c24); }
.th-tab .tt img { width:100%; height:100%; object-fit:cover; }
.th-tab .tt .ph { position:absolute; inset:0; display:grid; place-items:center; font-size:22px; }
.th-tab .tt .tag { position:absolute; left:4px; top:4px; font-size:9px; font-weight:800; padding:1px 5px; border-radius:999px; background:var(--live); color:#fff; }
.th-tab .tt .eq { position:absolute; inset:0; display:grid; place-items:center; background:rgba(15,10,31,.55); font-size:18px; }
.th-tab .tx { min-width:0; display:grid; gap:2px; }
.th-tab .tx b { font-size:12.5px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.th-tab .tx small { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.th-player { position:relative; aspect-ratio:16/9; width:100%; border-radius:20px; overflow:hidden; background:#000; border:1px solid #f5d76e33;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(91,63,212,.25),0 0 60px rgba(91,63,212,.25); }
.th-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.th-player .noembed { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:20px; gap:10px;
  background:linear-gradient(135deg,var(--indigo),#120c24); }
.th-info { padding:12px 2px 4px; }
.th-info h2 { font-family:"Playfair Display",serif; font-size:clamp(18px,2.2vw,24px); line-height:1.25; }
.th-info .meta { color:var(--muted); font-size:13px; margin-top:2px; }
.th-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.xa { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px; font-size:13px; font-weight:600; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid var(--line); transition:background .15s, color .15s, transform .1s; }
.xa:hover { background:rgba(255,255,255,.12); } .xa:active { transform:scale(.96); }
.xa svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.xa.like.on { color:#f91880; border-color:#f9188055; background:rgba(249,24,128,.1); } .xa.like.on svg { fill:#f91880; }
.xa.like:hover { color:#f91880; } .xa.share:hover { color:#00ba7c; } .xa.cm:hover { color:#1d9bf0; }
.xa.views { cursor:default; } .xa .n { font-variant-numeric:tabular-nums; }
.th-seg { display:none; margin:12px 0 0; }
.th-comments { margin-top:14px; padding:14px; }
.th-comments .composer, .th-chat .composer { display:flex; gap:8px; margin:6px 0 10px; }
.th-comments .composer .inp, .th-chat .composer .inp { flex:1; min-width:0; }
.cm-list { display:grid; gap:8px; }
.icm { padding:9px 11px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--line); font-size:13.5px; }
.icm .who, .chm .who { display:flex; gap:6px; align-items:center; font-size:11.5px; color:var(--muted); margin-bottom:2px; }
.icm .who b, .chm .who b { color:var(--gold-soft); font-weight:700; }
.icm .rp, .chm .rp { margin-inline-start:auto; opacity:.5; font-size:11px; } .icm .rp:hover, .chm .rp:hover { opacity:1; }
.th-chat { display:flex; flex-direction:column; padding:12px; min-height:0; }
.th-chat-head { display:flex; justify-content:space-between; align-items:center; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.th-chat-list { flex:1; min-height:120px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:10px 2px; }
.chm { padding:6px 10px; border-radius:12px; background:rgba(255,255,255,.04); font-size:13px; line-height:1.4; animation:chIn .25s ease; word-wrap:break-word; }
.chm.mine { background:linear-gradient(135deg,rgba(212,160,23,.14),rgba(91,63,212,.18)); }
.chm.held { opacity:.6; }
@keyframes chIn { from { opacity:0; transform:translateY(6px); } }
.th-chat .composer { margin:8px 0 0; }

/* tablet: chat goes under the player */
@media (max-width: 1100px) {
  .th-grid { grid-template-columns:220px minmax(0,1fr); overflow-y:auto; }
  .th-main { overflow:visible; }
  .th-chat { grid-column:2; height:420px; }
  .th-queue { grid-row:1 / span 2; }
}
/* mobile: player on top, side tabs become a scroll strip, chat/comments switch */
@media (max-width: 760px) {
  .th-bar { padding:8px 10px; }
  .th-grid { display:flex; flex-direction:column; gap:0; padding:0; overflow-y:auto; }
  .th-main { order:1; padding:0; overflow:visible; display:contents; }
  .th-player { order:1; position:sticky; top:0; z-index:3; border-radius:0; border:0; flex:none; }
  .th-queue { order:2; overflow-x:auto; overflow-y:hidden; padding:10px 10px 4px; flex:none; }
  .th-queue .th-h { display:none; }
  .th-tabs { grid-auto-flow:column; grid-auto-columns:150px; }
  .th-tab { grid-template-columns:1fr; padding:4px; }
  .th-tab .tx small { display:none; }
  .th-info { order:3; padding:8px 12px 0; }
  .th-seg { order:4; display:inline-flex; margin:10px 12px 0; align-self:flex-start; }
  .th-chat { order:5; margin:10px 12px 16px; height:auto; min-height:320px; max-height:60vh; }
  .th-comments { order:5; margin:10px 12px 16px; }
  .theater[data-seg="chat"] .th-comments { display:none; }
  .theater[data-seg="comments"] .th-chat { display:none; }
  .xa { padding:7px 11px; font-size:12.5px; }
}

/* ---------- one-tap join ---------- */
.join-row { display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
.join-btn { min-width:150px; padding:11px 20px; font-size:15px; font-weight:800; border-radius:999px; }
.join-btn.joined { background:rgba(52,211,153,.14); color:#6ee7b7; border:1px solid #34d39966; }
.linkish.leave { font-size:12px; color:var(--muted); text-decoration:underline; }
.fast-card.is-joined { border-color:#34d39955; }
.fast-card h3 a:hover { color:var(--gold-soft); }
.ev-people { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.faces { display:inline-flex; }
.faces i { font-style:normal; width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; font-size:11.5px; font-weight:800;
  margin-inline-start:-7px; border:2px solid var(--bg-card); color:#120c24; background:hsl(var(--h,45) 70% 72%); }
.faces i:first-child { margin-inline-start:0; }
.faces i.more { background:var(--bg-elev); color:var(--text); font-size:10px; width:auto; padding:0 6px; border-radius:999px; }
.suggest-rail { margin:16px 0 8px; }
.suggest-rail .sub-h .tiny { font-weight:400; margin-inline-start:6px; }
.sg-card { display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:18px; min-height:190px; }
.sg-top { display:flex; align-items:center; gap:6px; }
.sg-title { font-size:14.5px; line-height:1.3; }
.sg-card .join-btn { margin-top:auto; min-width:0; width:100%; padding:9px 14px; font-size:14px; }
.ev-detail .fast-card { border:0; background:none; padding:0; box-shadow:none; }

/* ---------- AI sermons ---------- */
.ai-sermons { margin:6px 0 18px; padding:18px; border-radius:24px; border:1px solid #f5d76e2e;
  background:linear-gradient(135deg,rgba(212,160,23,.08),rgba(61,42,138,.32)); }
.ai-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.ai-today { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:14px 0 10px; }
.today-card { display:flex; flex-direction:column; gap:6px; text-align:start; padding:18px; border-radius:20px; color:var(--text); min-height:180px; position:relative; overflow:hidden; }
.today-card::after { content:"✝"; position:absolute; right:14px; top:6px; font-size:64px; opacity:.07; }
.today-card .tc-title { font-family:"Playfair Display",serif; font-size:21px; line-height:1.2; }
.today-card .tc-refs { color:var(--gold-soft); font-size:13px; }
.today-card .tc-idea { color:var(--muted); font-size:13.5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.today-card .btn { align-self:flex-start; margin-top:auto; }
.sr-kind { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-soft); font-weight:700; }
.ai-disclaimer { font-size:12.5px; color:#f5d76e; background:rgba(212,160,23,.1); border:1px solid #f5d76e33; padding:8px 12px; border-radius:12px; margin:6px 0 12px; }
.sermon-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; margin-top:10px; }
.sermon-row { display:flex; flex-direction:column; gap:3px; text-align:start; padding:12px 14px; border-radius:16px; color:var(--text); }
.sermon-row b { font-size:14.5px; }
#sermonKind { margin:0; }
.reader .rd-scroll { flex:1; overflow-y:auto; padding:18px 16px 60px; }
.rd-body { max-width:780px; margin:0 auto; font-size:16.5px; line-height:1.75; }
.rd-body h1 { font-family:"Playfair Display",serif; font-size:clamp(26px,4vw,38px); line-height:1.15; margin:6px 0 8px; }
.rd-body h2 { font-family:"Playfair Display",serif; margin:28px 0 8px; color:var(--gold-soft); }
.rd-body h3 { margin:24px 0 8px; font-size:17px; color:var(--gold-soft); }
.rd-body p { margin:0 0 12px; } .rd-body ul, .rd-body ol { padding-inline-start:22px; display:grid; gap:6px; }
.rd-kicker { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.rd-idea { font-style:italic; font-size:18px; color:#e9e2ff; }
.rd-body blockquote { margin:8px 0; padding:10px 16px; border-inline-start:4px solid var(--gold); background:rgba(212,160,23,.08); border-radius:0 12px 12px 0; }
.rd-outline li p { color:var(--muted); font-size:15px; margin:2px 0 0; }
.rd-prayer { font-style:italic; padding:14px 16px; border-radius:16px; background:linear-gradient(135deg,rgba(91,63,212,.18),rgba(212,160,23,.08)); }
.rd-tools { flex-wrap:wrap; margin:8px 0 6px; }
.rd-analysis { margin-top:30px; padding:18px; border-radius:20px; border:1px solid #8b7cf655; background:rgba(26,19,51,.55); }
.word-notes { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.wn { padding:10px 12px; border-radius:14px; font-size:14px; } .wn p { margin:4px 0 0; color:var(--muted); font-size:13.5px; }
.wn .orig { font-size:19px; color:var(--gold-soft); margin:0 4px; }
#rdLang { max-width:190px; }
.spin { display:inline-block; width:16px; height:16px; vertical-align:-3px; border-radius:50%; border:2px solid #f5d76e33; border-top-color:var(--gold-soft); animation:spin 1s linear infinite; }
.music-more .spin { width:26px; height:26px; border-width:3px; }

/* ---------- Stage 2c: country / region filters ---------- */
.place-bar{margin:12px 0 16px;padding:12px 14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.place-bar:empty{display:none}
.pl-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pl-seg{flex:0 1 auto}
.pl-seg button{flex:0 0 auto;white-space:nowrap}
.pl-me{font-size:15px;margin-left:2px}
.pl-pick{position:relative;flex:1 1 200px;min-width:170px;max-width:320px}
.pl-input{width:100%;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:inherit;font:inherit;font-size:13px}
.pl-input:focus{outline:none;border-color:#e9c46a88;box-shadow:0 0 0 3px #e9c46a22}
.pl-sugg{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;background:rgba(18,16,40,.97);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:320px;overflow:auto}
.pl-sugg button{display:flex;gap:8px;align-items:center;width:100%;text-align:left;padding:8px 10px;border-radius:10px;font-size:13px;color:inherit}
.pl-sugg button b{margin-left:auto;color:#e9c46a;font-size:12px}
.pl-sugg button:hover,.pl-sugg button.hi{background:rgba(255,255,255,.08)}
.pl-map-btn.on{border-color:#e9c46a88;color:#e9c46a}
.pl-now{margin-top:8px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.pl-now b{color:#f5d76e}
.pl-x{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font-size:11px;color:var(--muted)}
.pl-x:hover{color:#fff;border-color:#fff6}
.pl-chips{display:flex;gap:6px;overflow-x:auto;padding:10px 2px 2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pl-chips .chip{flex:0 0 auto;white-space:nowrap}
.pl-chips .chip.mine:not(.active){border-color:#e9c46a66}
.pl-map{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(5,34px);gap:5px;margin-top:10px;padding:10px;border-radius:14px;
  background:radial-gradient(ellipse at 50% 40%,rgba(99,102,241,.18),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 8.33%)}
.pl-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(140deg,rgba(99,102,241,.28),rgba(236,72,153,.14));color:#fff;font-size:12px;font-weight:600;transition:transform .15s,box-shadow .15s;min-height:0}
.pl-tile .ico{font-size:18px;line-height:1}
.pl-tile .nm{text-align:center;line-height:1.15;padding:0 4px}
.pl-tile b{font-size:11px;color:#e9c46a}
.pl-tile:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(99,102,241,.35)}
.pl-tile.mine{border-color:#e9c46a77}
.pl-tile.on{background:linear-gradient(140deg,#d4a017,#f0c14b);color:#1a1530}.pl-tile.on b{color:#1a1530}
.pg-head{grid-column:1/-1;display:flex;align-items:center;gap:8px;width:100%;margin:10px 0 2px;padding:8px 12px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);font-weight:700;font-size:14px;color:#f5d76e;text-align:left}
.pg-head b{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
.pg-head .car{transition:transform .2s;display:inline-block}
.pg-head.closed .car{transform:rotate(-90deg)}
[data-pg][hidden]{display:none!important}
.flag-badge{position:absolute;top:8px;right:8px;z-index:2;font-size:16px;line-height:1;padding:3px 5px;border-radius:8px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.flag-badge.inline{position:static;display:inline-block;font-size:14px;padding:2px 4px;margin-left:4px}
.m-thumb .flag-badge{top:auto;bottom:8px;left:8px;right:auto}
.live-thumb .flag-badge{top:auto;bottom:8px;left:8px;right:auto}
@media (max-width:640px){
  .place-bar{padding:10px}
  .pl-pick{max-width:none;flex-basis:100%}
  .pl-map{grid-template-rows:repeat(5,30px);gap:4px;padding:6px}
  .pl-tile .nm{font-size:10px}
  .pl-tile .ico{font-size:15px}
}
@media (max-width:560px){
  .topbar{gap:6px;flex-wrap:nowrap;overflow:hidden}
  .topbar > .btn-gold{display:none}
  .topbar .lang-select{max-width:96px;padding-inline:8px}
  .sub-pill{padding:5px 9px}
}
/* a11y: contrast + touch targets (Lighthouse) */
.badge-live{background:#c81e1e!important;color:#fff}
.dots{gap:0}
.dots button{width:24px!important;height:24px!important;background:transparent!important;position:relative}
.dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:99px;transform:translate(-50%,-50%);background:rgba(255,255,255,.55);transition:width .3s}
.dots button.on::before{width:20px;background:var(--gold)}
.disc-note{grid-column:1/-1;font-size:13px;color:var(--muted);padding:8px 12px;border-radius:12px;background:rgba(233,196,106,.08);border:1px solid #e9c46a33}