/* ---------- photograph sources (overridden at runtime by the standalone build) ---------- */
:root{
  --img-hero: url("/img/hero-buddha.jpg");
  --img-bodhi: url("/img/bodhi-meditation.jpg");
  --img-monks: url("/img/monks-alms.jpg");
  --img-stupa: url("/img/stupa-lamps.jpg");
  --img-gallery1: url("/img/gallery-1.jpg");
  --img-gallery2: url("/img/gallery-2.jpg");
}

/* ==========================================================================
   Dhamma Connect — photo-first enhancements layered on base.css
   ========================================================================== */

/* ---------- hero with Buddha photograph ---------- */
.hero-photo{
  position:relative;
  min-height:min(86vh,760px);
  display:grid;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-photo .photo{
  position:absolute; inset:0;
  background-image:var(--img-hero);
  background-size:cover;
  background-position:72% 40%;
  transform:scale(1.03);
  animation:heroDrift 40s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{transform:scale(1.03) translateX(0)}
  to{transform:scale(1.09) translateX(-1.4%)}
}
.hero-photo .veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(15,11,8,.97) 0%, rgba(15,11,8,.90) 34%, rgba(15,11,8,.55) 58%, rgba(15,11,8,.25) 78%, rgba(15,11,8,.45) 100%),
    linear-gradient(0deg, var(--bg) 1%, rgba(18,14,11,.15) 40%, rgba(18,14,11,.55) 100%);
}
.hero-photo .grain{
  position:absolute; inset:0; opacity:.28; mix-blend-mode:overlay; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:3px 3px;
}
.hero-photo .inner{position:relative; padding:76px 0 64px; max-width:660px}
.hero-photo h1{
  font-size:clamp(2.1rem,4.6vw,3.7rem);
  line-height:1.05;
  margin:20px 0 16px;
  text-wrap:balance;
}
.hero-photo h1 em{font-style:normal;color:var(--gold)}
.hero-photo .lede{color:#d8cbb9;font-size:1.03rem;max-width:52ch;margin:0 0 24px}
.hero-photo .stats{margin-top:32px}
.hero-photo .stats div b{font-size:1.5rem}
.hero-caption{
  position:absolute; right:18px; bottom:14px;
  font-size:.68rem; letter-spacing:1.3px; text-transform:uppercase;
  color:rgba(255,255,255,.42); z-index:2;
}
.scroll-cue{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  color:var(--dim); font-size:.7rem; letter-spacing:2.4px; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2;
}
.scroll-cue i{display:block;width:1px;height:26px;background:linear-gradient(180deg,var(--saffron),transparent);animation:cue 2s infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- editorial band (image + text) ---------- */
.band{
  display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  margin:8px 0 34px;
}
.band .pic{min-height:340px;background-size:cover;background-position:center;position:relative}
.band .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(31,24,21,.55))}
.band .copy{padding:34px 34px 30px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.band .copy h2{font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.2}
.band .copy p{color:var(--muted);font-size:.94rem;margin:0}
.band .copy .quote{font-family:Georgia,serif;font-size:1.02rem;color:var(--gold);border-left:3px solid var(--saffron);padding-left:14px}
.band.reverse .pic{order:2}
.band.reverse .pic:after{background:linear-gradient(270deg,transparent 40%,rgba(31,24,21,.55))}

/* ---------- place cards: real photographs ---------- */
.place .art{
  height:186px;
  background-size:cover; background-position:center;
  transition:transform .5s ease;
}
.place:hover .art{transform:scale(1.04)}
.place .art .shade{
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(20,14,10,.86),rgba(20,14,10,.12) 55%,rgba(20,14,10,.35));
}
.place .art .photo-credit{display:none}
.place .live{background:rgba(201,82,47,.94)}
.place .body{gap:7px}
.place h3{font-size:1.06rem}

/* ---------- place detail: gallery ---------- */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px;height:220px;background:#0d0a08}
.gallery div{background-size:cover;background-position:center;position:relative;transition:.4s}
.gallery div:hover{filter:brightness(1.12)}
.gallery div:first-child{grid-row:span 2;height:100%}
.gallery .cap{
  position:absolute;left:10px;bottom:8px;font-size:.66rem;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,.72);background:rgba(0,0,0,.4);padding:3px 8px;border-radius:999px;backdrop-filter:blur(3px)
}
.tour-tabs{display:flex;gap:6px;position:absolute;top:12px;left:12px;z-index:6}
#msgs{display:flex;flex-direction:column}
.tour-tabs button{
  border:1px solid rgba(255,255,255,.28); background:rgba(10,7,5,.55); color:#fff;
  border-radius:999px; padding:5px 12px; font-size:.74rem; backdrop-filter:blur(6px);
}
.tour-tabs button.on{background:linear-gradient(180deg,var(--gold),var(--saffron));color:#1b1206;border-color:transparent;font-weight:600}

/* ---------- auth modal ---------- */
.sheet.narrow{width:min(520px,100%)}
.auth-head{padding:26px 26px 0;text-align:center}
.auth-head .mark{width:46px;height:46px;margin:0 auto 12px}
.auth-head h2{font-size:1.42rem}
.auth-head p{color:var(--muted);font-size:.87rem;margin:6px 0 0}
.auth-form{padding:20px 26px 26px;display:flex;flex-direction:column;gap:12px}
.auth-form .field{margin:0}
.auth-form .field input,.auth-form .field select{
  background:#150f0c;border:1px solid var(--line2);border-radius:12px;padding:11px 13px;font-size:.92rem;outline:none;width:100%
}
.auth-form .field input:focus{border-color:var(--saffron);box-shadow:0 0 0 3px rgba(233,168,60,.13)}
.auth-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-alt{text-align:center;font-size:.83rem;color:var(--dim);margin-top:4px}
.auth-alt button{background:none;border:0;color:var(--gold);font-weight:600;padding:0;text-decoration:underline;text-underline-offset:3px}
.form-error{
  background:rgba(201,82,47,.14);border:1px solid rgba(201,82,47,.5);color:#f2c0ae;
  border-radius:10px;padding:9px 12px;font-size:.82rem;display:none
}
.form-error.on{display:block}
.demo-hint{font-size:.76rem;color:var(--dim);text-align:center;line-height:1.5}
.demo-hint code{color:var(--gold);background:rgba(233,168,60,.1);padding:1px 5px;border-radius:4px}

/* ---------- header profile ---------- */
.avatar-me{cursor:pointer;border:0;position:relative}
.avatar-me:hover{filter:brightness(1.1)}
.avatar-me .ring{position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(233,168,60,.55)}
.user-menu{
  position:absolute;right:0;top:52px;width:250px;background:#221a15;border:1px solid var(--line2);
  border-radius:16px;box-shadow:var(--shadow);padding:8px;display:none;z-index:90
}
.user-menu.on{display:block;animation:fade .18s ease}
.user-menu .who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.user-menu .who b{display:block;font-size:.92rem}
.user-menu .who span{font-size:.76rem;color:var(--dim)}
.user-menu button{
  width:100%;text-align:left;background:none;border:0;color:var(--muted);padding:9px 12px;
  border-radius:10px;font-size:.86rem;display:flex;gap:9px;align-items:center
}
.user-menu button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.tools{position:relative}

/* ---------- live / toast / states ---------- */
.live-dot{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:var(--jade)}
.live-dot i{width:6px;height:6px;border-radius:50%;background:var(--jade);box-shadow:0 0 0 3px rgba(125,185,164,.18);animation:blink 1.8s infinite}
.skeleton{
  background:linear-gradient(90deg,#241c17 25%,#2e241d 50%,#241c17 75%);
  background-size:200% 100%;animation:shine 1.4s infinite;border-radius:16px;min-height:120px
}
@keyframes shine{to{background-position:-200% 0}}
.empty{color:var(--dim);font-size:.88rem;padding:18px;border:1px dashed var(--line2);border-radius:14px;text-align:center}
.badge-role{
  font-size:.62rem;letter-spacing:1.2px;text-transform:uppercase;color:#1b1206;font-weight:700;
  background:linear-gradient(180deg,var(--gold),var(--saffron));padding:2px 7px;border-radius:999px;vertical-align:middle
}
.tiny{font-size:.76rem;color:var(--dim)}
.spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(0,0,0,.25);border-top-color:#1b1206;animation:spin .7s linear infinite;display:inline-block}

/* ---------- footer photo strip ---------- */
.footer-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 26px;
  border-radius:20px;overflow:hidden;border:1px solid var(--line)
}
.footer-strip div{height:104px;background-size:cover;background-position:center;filter:grayscale(.15) brightness(.82);transition:.35s}
.footer-strip div:hover{filter:none;transform:scale(1.03)}

@media(max-width:900px){
  .hero-photo{min-height:auto}
  .scroll-cue{display:none}
  .top .bar{gap:8px}
  .brand b{font-size:.92rem}
  .brand span{font-size:.58rem;letter-spacing:1.8px}
  .brand .mark{width:32px;height:32px}
  .avatar-me{height:32px;min-width:32px;font-size:.76rem;padding:0 10px}
  .hero-caption{display:none}
  /* tour: keep a fixed height so the overlay HUD always sits on the image */
  .tour{height:250px}
  .tour canvas{height:100% !important}
  #photoGallery{height:250px !important}
  .tour .hud{padding:10px 10px 12px;gap:7px}
  .tour .hud .hint{display:none}
  .tour-tabs{top:10px;left:10px}
  .tour .tbtn{font-size:.72rem;padding:5px 9px}
  .sheet .x{top:auto;bottom:auto;top:8px;right:8px}
  .hero-photo .inner{padding:52px 0 44px}
  .hero-photo .photo{background-position:64% 30%;opacity:.5}
  .band{grid-template-columns:1fr}
  .band .pic{min-height:210px}
  .band.reverse .pic{order:0}
  .gallery{grid-template-columns:1fr 1fr;height:220px}
  .gallery div:first-child{grid-column:span 2;grid-row:auto;height:130px}
  .gallery div:nth-child(n+4){display:none}
  .footer-strip{grid-template-columns:1fr 1fr}
  .footer-strip div{height:88px}
  .auth-form .row2{grid-template-columns:1fr}
  .user-menu{right:-4px}
}

/* ---------- language switcher ---------- */
.lang-wrap{position:relative}
.lang-btn{cursor:pointer;font-weight:600;color:var(--gold);border-color:rgba(233,168,60,.45);background:rgba(233,168,60,.10)}
.lang-btn:hover{background:rgba(233,168,60,.18)}
.lang-menu{
  position:absolute;right:0;top:44px;background:#221a15;border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--shadow);padding:6px;min-width:172px;display:none;z-index:95
}
.lang-menu.on{display:block;animation:fade .16s ease}
.lang-menu button{
  width:100%;text-align:left;background:none;border:0;color:var(--muted);padding:9px 12px;border-radius:10px;
  font-size:.9rem;display:flex;justify-content:space-between;align-items:center;gap:10px
}
.lang-menu button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.lang-menu button.on{background:rgba(233,168,60,.14);color:var(--gold);font-weight:600}
.lang-menu small{color:var(--dim);font-size:.72rem}

/* ---------- real 360° panorama ---------- */
.pano-host{position:absolute;inset:0;background:#0b0907;overflow:hidden}
.pano-canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.pano-fallback{position:absolute;inset:0;overflow:hidden;cursor:grab}
.pano-fallback img{height:100%;width:auto;min-width:100%;object-fit:cover;will-change:transform;user-select:none;pointer-events:none}
.pano-fb-hint{position:absolute;left:12px;bottom:10px;font-size:.72rem;color:rgba(255,255,255,.6)}
.pano-loading{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:.82rem;
  background:radial-gradient(circle at 50% 45%, #1c1510, #0b0907)
}
.pano-badge{
  position:absolute;top:12px;right:12px;z-index:6;font-size:.66rem;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,.8);background:rgba(10,7,5,.5);border:1px solid rgba(255,255,255,.22);
  padding:4px 9px;border-radius:999px;backdrop-filter:blur(6px)
}
@media(max-width:900px){
  .lang-menu{right:-60px}
  .lang-btn{font-size:.72rem;padding:5px 9px}
}


/* ==========================================================================
   v2 — bigger 360° stage, translation chips, language-aware composer
   ========================================================================== */

/* ---------- larger, clearer 360° / photo stage ---------- */
.sheet{width:min(1120px,100%)}
.tour{height:clamp(320px, 46vh, 560px)}
.tour canvas{image-rendering:auto}
.pano-canvas{touch-action:none}
.pano-loading{font-size:.9rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim)}
.pano-badge{font-size:.68rem}
.tour-tabs button{padding:7px 15px;font-size:.8rem}
.tour .hud .tbtn{padding:8px 13px;font-size:.82rem}
.tour .hud .hint{font-size:.75rem}
/* the sheet is scrollable under the stage, so text stays readable at any height */
@media (min-height:900px){
  .tour{height:clamp(360px, 52vh, 620px)}
}
.gallery{height:clamp(240px, 34vh, 420px)}

/* ---------- translation / language chips ---------- */
.tr-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.62rem;letter-spacing:.6px;text-transform:uppercase;font-weight:700;
  color:var(--jade);background:rgba(125,185,164,.14);border:1px solid rgba(125,185,164,.35);
  padding:1px 6px;border-radius:999px;margin-left:4px;vertical-align:1px
}
.bubble .who{flex-wrap:wrap;gap:5px}

/* quick replies in the member's language */
.hint-row{
  display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 0;background:#171210;
  border-top:1px solid rgba(58,44,35,.5)
}
.hint-row:empty{display:none}
.hint-chip{
  background:rgba(255,255,255,.04);border:1px dashed var(--line2);color:var(--muted);
  border-radius:999px;padding:5px 12px;font-size:.78rem;transition:.15s;line-height:1.5
}
.hint-chip:hover{color:var(--ink);border-color:var(--saffron);border-style:solid;background:rgba(233,168,60,.10)}

/* composer typing-language marker */
.composer{position:relative;align-items:center}
.type-lang{
  font-size:.6rem;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:var(--gold);
  border:1px solid rgba(233,168,60,.4);background:rgba(233,168,60,.1);
  border-radius:6px;padding:3px 7px;flex:0 0 auto
}
.composer input{min-width:0}

/* library: translated passage note */
.lib .book .by{min-height:2.4em}

@media(max-width:900px){
  .tour{height:clamp(210px, 34vh, 300px)}
  .gallery{height:clamp(190px, 30vh, 260px)}
  .type-lang{display:none}
  .hint-row{padding:8px 10px 0}
  .hint-chip{font-size:.74rem;padding:4px 10px}
}

/* ==========================================================================
   v3 — audio guide, chat reactions, emoji, share, auth extras
   ========================================================================== */
.audio-btn{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:.8rem;padding:6px 10px;border-radius:999px;background:rgba(233,168,60,.12);border:1px solid rgba(233,168,60,.35);color:#f3c76a}
.audio-btn .audio-dot{width:7px;height:7px;border-radius:50%;background:#f3c76a;opacity:0;transition:opacity .2s;box-shadow:0 0 8px rgba(243,199,106,.6)}
.audio-btn.playing{background:rgba(125,185,164,.18);border-color:rgba(125,185,164,.45);color:#7db9a4}
.audio-btn.playing .audio-dot{opacity:1;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.3);opacity:.4}}
.audio-btn:active{transform:translateY(-1px)}

/* emoji + reaction chips on messages */
.msg-actions{display:flex;gap:6px;margin-top:6px;justify-content:flex-end}
.reaction-btn,.emoji-btn,.share-btn{
  background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--muted);
  border-radius:8px;padding:5px 9px;font-size:.75rem;cursor:pointer;transition:.15s
}
.reaction-btn:hover,.emoji-btn:hover,.share-btn:hover{color:var(--gold);border-color:var(--saffron);background:rgba(233,168,60,.1)}
.reaction-btn.active{background:var(--saffron);color:#120e0b;border-color:var(--saffron)}
.reaction-count{font-size:.7rem;font-weight:700;margin-left:4px}

/* forgot password row in auth */
.forgot-row{display:flex;justify-content:flex-end;margin-top:6px}
.forgot-row a{color:var(--gold);font-size:.8rem;text-decoration:underline;cursor:pointer}
.forgot-row a:hover{color:#f3c76a}

/* ==========================================================================
   Glossy logo & brand
   ========================================================================== */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand .mark{filter:drop-shadow(0 0 14px rgba(233,168,60,.6));position:relative}
.brand .mark::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%);
  opacity:.6;pointer-events:none}
.brand span b{
  background:linear-gradient(135deg,#f3e7a8 0%,#f3c76a 35%,#e9a83c 65%,#c9522f 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));font-weight:800}
.brand span span{color:var(--gold);font-weight:700;letter-spacing:.3px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}

/* ==========================================================================
   Contribute page
   ========================================================================== */
.contribute-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:20px 0}
.contrib-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.support-card{border-color:rgba(233,168,60,.35);background:linear-gradient(180deg,rgba(233,168,60,.08),rgba(233,168,60,.02))}
.contrib-icon{font-size:2rem;line-height:1}
.contrib-card h3{margin:0 0 6px;font-size:1.05rem;letter-spacing:.2px}
.contrib-card p{font-size:.82rem;color:var(--muted);line-height:1.5;margin:0}
.contrib-items{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.contrib-item{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:10px;padding:10px}
.cicon{font-size:1.35rem;flex:0 0 auto}
.ctitle{font-weight:700;font-size:.85rem}
.cdesc{font-size:.75rem;color:var(--muted)}
.cbtn{font-size:.75rem;padding:4px 10px}
.thought-item .ctitle{font-style:italic;color:var(--gold)}

/* ==========================================================================
   Read-aloud bar (book / thought narration)
   ========================================================================== */
.tts-bar{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,26px);
  display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 16px;border-radius:999px;
  background:linear-gradient(180deg,rgba(38,28,16,.96),rgba(24,17,9,.97));
  border:1px solid rgba(233,168,60,.42);
  box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(12px);
  z-index:96;opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  max-width:min(92vw,560px);
}
.tts-bar.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.tts-title{
  font-size:.82rem;color:var(--gold);font-weight:600;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;
}
.tts-wave{display:inline-flex;align-items:flex-end;gap:2px;height:16px;flex:0 0 auto}
.tts-wave i{display:block;width:3px;border-radius:2px;background:var(--saffron);animation:ttsWave 1s infinite ease-in-out}
.tts-wave i:nth-child(1){height:7px;animation-delay:0s}
.tts-wave i:nth-child(2){height:15px;animation-delay:.15s}
.tts-wave i:nth-child(3){height:10px;animation-delay:.3s}
.tts-wave.paused i{animation-play-state:paused;opacity:.55}
@keyframes ttsWave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.tts-btn{
  border:1px solid rgba(233,168,60,.4);background:rgba(233,168,60,.1);
  color:var(--gold);font:inherit;font-size:.76rem;font-weight:600;
  padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.tts-btn:hover{background:rgba(233,168,60,.22)}
.tts-stop{padding:6px 10px;color:var(--muted);border-color:rgba(255,255,255,.14);background:transparent}
.tts-stop:hover{color:#fff;background:rgba(255,255,255,.08)}
@media (max-width:560px){
  .tts-bar{bottom:14px;gap:8px;padding:8px 10px 8px 12px}
  .tts-title{max-width:120px;font-size:.76rem}
  .tts-btn{font-size:.72rem;padding:5px 10px}
}