/* ============================================================
   Sri Subramaniar Alayam — Kiosk App Stylesheet
   Design tokens (v1 — placeholder theme, expected to be redesigned)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+Tamil:wght@400;500;600;700;800&display=swap');

:root{
  /* color */
  --maroon-950:#26070b;
  --maroon-800:#521118;
  --maroon-700:#711821;
  --maroon-600:#8f202b;
  --gold-500:#c99a3e;
  --gold-300:#e8ce8e;
  --gold-100:#f6e9c8;
  --cream-50:#faf4e8;
  --cream-100:#f2e8d6;
  --ink-900:#2b1b12;
  --ink-600:#5b463a;
  --ember-500:#c1531f;
  --green-600:#3e7c52;

  /* type */
  --font-display:'Cinzel', 'Noto Sans Tamil', serif;
  --font-body:'Manrope', 'Noto Sans Tamil', sans-serif;

  /* layout */
  --rail-w:236px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --shadow-card:0 6px 18px rgba(38,7,11,0.10);
  --shadow-pop:0 14px 34px rgba(38,7,11,0.22);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream-50);
  color:var(--ink-900);
  overflow:hidden;
  -webkit-user-select:none;
  user-select:none;
}
button{font-family:inherit;cursor:pointer;}
img{display:block;max-width:100%;}

/* ---------- App shell ---------- */
#app{
  display:flex;
  width:100vw;
  height:100vh;
}

/* ---------- Left nav rail ---------- */
.rail{
  width:var(--rail-w);
  flex-shrink:0;
  background:
    radial-gradient(140% 90% at 15% -10%, var(--maroon-700), transparent 60%),
    linear-gradient(180deg, var(--maroon-800), var(--maroon-950) 70%);
  color:var(--gold-100);
  display:flex;
  flex-direction:column;
  padding:22px 14px 18px;
  overflow-y:auto;
}
.rail-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding:6px 6px 18px;
  border-bottom:1px solid rgba(232,206,142,0.18);
  margin-bottom:14px;
}
.rail-emblem{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
}
.rail-emblem img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}
.rail-brand h1{
  font-family:var(--font-display);
  font-size:15.5px;
  letter-spacing:0.04em;
  margin:4px 0 0;
  line-height:1.25;
  color:var(--gold-100);
}
.rail-brand .rail-loc{
  font-size:11px;
  color:var(--gold-300);
  opacity:0.85;
  letter-spacing:0.03em;
}

.rail-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.rail-btn{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  border:none;
  background:transparent;
  color:var(--gold-100);
  padding:13px 12px;
  border-radius:var(--radius-md);
  font-size:14.5px;
  font-weight:600;
  text-align:left;
  transition:background .15s ease, transform .12s ease;
}
.rail-btn svg{width:19px;height:19px;flex-shrink:0;opacity:0.9;}
.rail-btn:active{transform:scale(0.97);}
.rail-btn.active{
  background:linear-gradient(90deg, var(--gold-500), #b1852f);
  color:var(--maroon-950);
  box-shadow:var(--shadow-card);
}
.rail-btn:not(.active):hover{background:rgba(232,206,142,0.10);}

.rail-hours{
  margin-top:14px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(232,206,142,0.16);
  border-radius:var(--radius-md);
  padding:12px 13px;
  font-size:11.5px;
  color:var(--gold-300);
}
.rail-hours strong{
  display:block;
  color:var(--gold-100);
  font-size:11px;
  letter-spacing:0.08em;
  margin-bottom:6px;
  text-transform:uppercase;
}
.rail-hours div{display:flex;justify-content:space-between;padding:2px 0;color:var(--gold-100);opacity:0.85;}

/* ---------- Main column ---------- */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar{
  height:64px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
  background:var(--cream-50);
  border-bottom:1px solid var(--cream-100);
}
.hamburger-btn{
  display:none;
  width:38px;height:38px;border-radius:10px;border:none;
  background:var(--cream-100);color:var(--maroon-800);
  align-items:center;justify-content:center;flex-shrink:0;margin-right:12px;
}
.hamburger-btn svg{width:20px;height:20px;}
.topbar-crumb{
  font-family:var(--font-display);
  font-size:16px;
  color:var(--maroon-800);
  letter-spacing:0.02em;
}
.topbar-right{display:flex;align-items:center;gap:14px;}
.rail-backdrop{
  display:none;
  position:fixed;inset:0;background:rgba(15,3,5,0.55);
  z-index:140;opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.rail-backdrop.show{opacity:1;pointer-events:auto;}
.topbar-clock{
  font-size:13px;
  color:var(--ink-600);
  text-align:right;
  line-height:1.25;
}
.topbar-clock b{display:block;color:var(--ink-900);font-size:14px;}
.lang-pill{
  display:flex;
  background:var(--cream-100);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.lang-pill button{
  border:none;background:transparent;
  font-size:12px;font-weight:700;
  padding:7px 12px;border-radius:999px;
  color:var(--ink-600);
}
.lang-pill button.active{background:var(--maroon-800);color:var(--gold-100);}

.screen-wrap{
  flex:1;
  overflow-y:auto;
  padding:26px 30px 40px;
}
.screen{display:none;}
.screen.active{display:block;animation:fadeUp .28s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* section header w/ signature gopuram-tier divider */
.section-head{margin-bottom:18px;}
.section-head h2{
  font-family:var(--font-display);
  font-size:24px;
  color:var(--maroon-800);
  margin:0 0 8px;
}
.section-head p{margin:0 0 10px;color:var(--ink-600);font-size:14px;max-width:640px;}
.tiers{
  display:flex;align-items:flex-end;gap:3px;height:10px;
}
.tiers span{
  display:block;width:16px;background:var(--gold-500);border-radius:2px 2px 0 0;
}
.tiers span:nth-child(1){height:4px;}
.tiers span:nth-child(2){height:7px;}
.tiers span:nth-child(3){height:10px;}
.tiers span:nth-child(4){height:7px;}
.tiers span:nth-child(5){height:4px;}

/* ---------- HERO (home) ---------- */
.hero{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 85% 10%, rgba(201,154,62,0.35), transparent 55%),
    linear-gradient(120deg, rgba(38,7,11,0.88) 0%, rgba(122,26,26,0.82) 55%, rgba(230,111,26,0.55) 130%),
    url("assets/hero-banner.jpg");
  background-size: cover;
  background-position: center;
  color:var(--gold-100);
  padding:34px 32px;
  margin-bottom:22px;
}
.hero-eyebrow{font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-300);margin-bottom:8px;}
.hero h1{
  font-family:var(--font-display);
  font-size:30px;
  margin:0 0 10px;
  line-height:1.12;
  max-width:560px;
}
.hero-location{display:block;margin-top:0.35em;line-height:1.5;}
.hero-btn-row, .hero-cta-row{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;}
.hero-btn-solid, .hero-cta-primary{
  background:var(--ember-500);color:#fff;border:none;
  padding:13px 24px;border-radius:999px;
  font-weight:800;font-size:13px;letter-spacing:.03em;white-space:nowrap;cursor:pointer;
}
.hero-btn-outline, .hero-cta-ghost{
  background:transparent;color:var(--gold-100);border:1.5px solid var(--gold-100);
  padding:13px 24px;border-radius:999px;
  font-weight:800;font-size:13px;letter-spacing:.03em;white-space:nowrap;cursor:pointer;
}
.hero-cta{font-family:inherit;text-transform:uppercase;}
.hero-cta-primary:hover{filter:brightness(1.08);}
.hero-cta-ghost:hover{background:rgba(245,232,213,0.1);}
.hero p.tagline{font-size:16px;color:var(--gold-100);opacity:0.92;margin:0 0 22px;max-width:480px;}
.hero-stats{display:flex;gap:26px;flex-wrap:wrap;}
.hero-stat b{display:block;font-family:var(--font-display);font-size:22px;color:var(--gold-100);}
.hero-stat span{font-size:11.5px;color:var(--gold-300);text-transform:uppercase;letter-spacing:0.05em;}
.hero-gopuram{
  position:absolute;right:-10px;bottom:-6px;width:230px;opacity:0.9;pointer-events:none;
}

/* ---------- Tile grid (home quick nav) ---------- */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-bottom:24px;
}
.tile{
  background:#fff;
  border:1px solid var(--cream-100);
  border-radius:var(--radius-md);
  padding:18px 16px;
  text-align:left;
  box-shadow:var(--shadow-card);
  transition:transform .12s ease, box-shadow .12s ease;
}
.tile:active{transform:scale(0.96);}
.tile-icon{
  width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  margin-bottom:12px;
}
.tile-icon svg{width:21px;height:21px;color:var(--maroon-950);}
.tile h3{margin:0 0 3px;font-size:14.5px;color:var(--ink-900);}
.tile p{margin:0;font-size:12px;color:var(--ink-600);line-height:1.4;}

/* ---------- Panel grid (today / events / announcements) ---------- */
.panel-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}
.panel{
  background:#fff;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
}
.panel-head{
  background:var(--maroon-800);
  color:var(--gold-100);
  padding:12px 16px;
  font-size:13.5px;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.panel-head svg{width:16px;height:16px;}
.panel-body{padding:14px 16px;flex:1;}
.list-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px dashed var(--cream-100);font-size:13px;
}
.list-row:last-child{border-bottom:none;}
.list-row b{color:var(--ink-900);font-weight:600;}
.list-row span{color:var(--ember-500);font-weight:700;}

.event-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--cream-100);}
.event-row:last-child{border-bottom:none;}
.event-row.highlighted{background:var(--cream-100);border-radius:var(--radius-sm);}
.event-date{
  width:44px;height:44px;flex-shrink:0;
  background:var(--maroon-800);color:var(--gold-100);
  border-radius:var(--radius-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:700;
}
.event-date b{font-size:15px;line-height:1;}
.event-date small{font-size:9px;letter-spacing:0.05em;}
.event-row h4{margin:0 0 2px;font-size:13px;color:var(--ink-900);}
.event-row p{margin:0;font-size:11.5px;color:var(--ink-600);}

.announce-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--cream-100);align-items:flex-start;cursor:pointer;}
.announce-row:last-child{border-bottom:none;}
.announce-dot{width:8px;height:8px;border-radius:50%;background:var(--ember-500);margin-top:6px;flex-shrink:0;}
.announce-row h4{margin:0 0 2px;font-size:13px;color:var(--ink-900);}
.announce-row p{margin:0;font-size:11.5px;color:var(--ink-600);line-height:1.4;}

.panel-btn{
  margin:0 16px 14px;
  background:var(--maroon-800);color:var(--gold-100);
  border:none;padding:11px;border-radius:var(--radius-sm);
  font-size:12.5px;font-weight:700;text-align:center;
}

/* ---------- Google-Calendar-style month view ---------- */
.cal-card{
  background:#fff;border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:18px;
}
.cal-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--cream-100);
}
.cal-toolbar-left{display:flex;align-items:center;gap:10px;}
.cal-nav-btn{
  border:1px solid var(--cream-100);background:#fff;color:var(--ink-900);
  padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:700;
}
.cal-nav-btn:active{background:var(--cream-100);}
.cal-arrow{
  width:36px;height:36px;border-radius:50%;border:none;background:transparent;
  color:var(--ink-600);display:flex;align-items:center;justify-content:center;
}
.cal-arrow svg{width:18px;height:18px;}
.cal-arrow:active{background:var(--cream-100);}
.cal-month-label{
  font-family:var(--font-display);font-size:18px;color:var(--maroon-800);margin-left:4px;
}
.cal-weekdays{
  display:grid;grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid var(--cream-100);
}
.cal-weekdays div{
  padding:9px 0;text-align:center;font-size:11px;font-weight:700;
  color:var(--ink-600);text-transform:uppercase;letter-spacing:0.04em;
}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:96px;
}
.cal-cell{
  border-right:1px solid var(--cream-100);border-bottom:1px solid var(--cream-100);
  padding:6px 6px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:3px;
}
.cal-cell:nth-child(7n){border-right:none;}
.cal-cell.other-month{background:#fbfaf7;}
.cal-cell.other-month .cal-day-num{color:#c9beae;}
.cal-day-num{
  font-size:12.5px;font-weight:700;color:var(--ink-900);
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.cal-cell.today .cal-day-num{background:var(--ember-500);color:#fff;}
.cal-event-chip{
  font-size:10.5px;font-weight:600;color:#fff;
  background:var(--maroon-700);
  padding:2px 6px;border-radius:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:left;border:none;width:100%;
}
.cal-event-chip:active{opacity:0.85;}
.cal-more{
  font-size:10px;color:var(--ink-600);font-weight:700;padding-left:6px;
}

/* ---------- Generic content cards ---------- */
.card{
  background:#fff;border-radius:var(--radius-md);
  padding:20px 22px;box-shadow:var(--shadow-card);margin-bottom:16px;
}
.card h3{font-family:var(--font-display);font-size:17px;color:var(--maroon-800);margin:0 0 8px;}
.card p{margin:0 0 8px;font-size:13.5px;line-height:1.65;color:var(--ink-600);}
.card-scroll{display:flex;flex-direction:column;}
.scroll-box{
  max-height:360px;overflow-y:auto;padding-right:8px;
}
.scroll-box p{margin:0 0 12px;font-size:13.5px;line-height:1.7;color:var(--ink-600);}
.scroll-box p:last-child{margin-bottom:0;}
.scroll-box::-webkit-scrollbar{width:6px;}
.scroll-box::-webkit-scrollbar-thumb{background:var(--cream-100);border-radius:6px;}
.pill-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--cream-100);color:var(--maroon-800);
  padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;
  margin:3px 5px 3px 0;
}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

/* deity card */
.deity-card{
  background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);
}
.deity-figure{height:190px;overflow:hidden;background:var(--cream-100);}
.deity-figure img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.deity-body{padding:14px 16px 18px;}
.deity-body h3{font-family:var(--font-display);font-size:16px;margin:0 0 2px;color:var(--ink-900);}
.deity-role{font-size:11px;color:var(--ember-500);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:8px;}
.deity-body p{margin:0;font-size:12.5px;color:var(--ink-600);line-height:1.5;}

/* timings tabs */
.tab-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.tab-btn{
  border:1px solid var(--cream-100);background:#fff;color:var(--ink-600);
  padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:700;
}
.tab-btn.active{background:var(--maroon-800);color:var(--gold-100);border-color:var(--maroon-800);}

/* gallery */
.gallery-item{
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);background:#fff;
}
.gallery-ph{
  height:130px;display:flex;align-items:center;justify-content:center;color:#fff;
}
.gallery-ph svg{width:34px;height:34px;opacity:0.85;}
.gallery-cap{padding:10px 12px;}
.gallery-cap b{display:block;font-size:12.5px;color:var(--ink-900);}
.gallery-cap span{font-size:11px;color:var(--ink-600);}

/* sevas */
.seva-card{background:#fff;border-radius:var(--radius-md);padding:18px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:8px;}
.seva-price{font-family:var(--font-display);font-size:20px;color:var(--maroon-800);}
.seva-btn{
  margin-top:auto;border:none;background:var(--ember-500);color:#fff;
  padding:11px;border-radius:var(--radius-sm);font-weight:700;font-size:12.5px;
}
.donate-banner{
  background:linear-gradient(120deg, var(--maroon-800), var(--ember-500));
  border-radius:var(--radius-lg);padding:26px 28px;color:var(--gold-100);
  display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:6px;
}
.donate-banner h3{font-family:var(--font-display);margin:0 0 6px;font-size:19px;}
.donate-banner p{margin:0;font-size:13px;opacity:0.9;max-width:420px;}
.donate-btn{background:var(--gold-500);color:var(--maroon-950);border:none;padding:14px 26px;border-radius:var(--radius-sm);font-weight:800;font-size:14px;white-space:nowrap;}

/* contact */
.contact-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--cream-100);}
.contact-row:last-child{border-bottom:none;}
.contact-icon{
  width:38px;height:38px;border-radius:10px;background:var(--cream-100);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-icon svg{width:18px;height:18px;color:var(--maroon-800);}
.contact-row b{display:block;font-size:13px;color:var(--ink-900);}
.contact-row span{display:block;font-size:12.5px;color:var(--ink-600);}
.map-ph{
  height:220px;border-radius:var(--radius-md);
  background:
    repeating-linear-gradient(45deg, rgba(113,24,33,0.06) 0 12px, transparent 12px 24px),
    var(--cream-100);
  display:flex;align-items:center;justify-content:center;color:var(--ink-600);font-size:13px;
}

.qr-contact-card{display:flex;flex-direction:column;align-items:center;text-align:center;}
.whatsapp-qr-box{
  width:170px;height:170px;margin:6px 0 12px;
  background:#fff;border:1px solid var(--cream-100);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.whatsapp-qr-box img{width:100%;height:100%;object-fit:contain;}
.whatsapp-caption{font-size:12.5px;color:var(--ink-600);margin:0 0 6px;}
.whatsapp-number{
  font-family:var(--font-display);font-size:16px;color:var(--maroon-800);
  letter-spacing:0.02em;
}

/* idle badge */
.idle-badge{
  position:fixed;bottom:16px;right:16px;
  background:rgba(38,7,11,0.85);color:var(--gold-100);
  padding:7px 13px;border-radius:999px;font-size:11px;font-weight:600;
  display:flex;align-items:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.idle-badge.show{opacity:1;}
.idle-badge span.dot{width:6px;height:6px;border-radius:50%;background:var(--gold-500);animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* ---------- QR payment modal ---------- */
.qr-overlay{
  position:fixed;inset:0;background:rgba(38,7,11,0.55);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:50;
}
.qr-overlay.show{opacity:1;pointer-events:auto;}
.qr-modal{
  background:#fff;border-radius:var(--radius-lg);
  padding:30px 34px 26px;width:320px;text-align:center;
  box-shadow:var(--shadow-pop);position:relative;
  transform:translateY(10px);transition:transform .2s ease;
}
.qr-overlay.show .qr-modal{transform:translateY(0);}
.qr-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;border:none;background:var(--cream-100);
  color:var(--ink-600);display:flex;align-items:center;justify-content:center;
}
.qr-close svg{width:16px;height:16px;}
.qr-eyebrow{font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ember-500);font-weight:700;margin-bottom:4px;}
.qr-modal h3{font-family:var(--font-display);font-size:19px;color:var(--maroon-800);margin:0 0 16px;}
.qr-code-box{
  width:200px;height:200px;margin:0 auto 14px;
  background:#fff;border:1px solid var(--cream-100);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.02);
  overflow:hidden;
}
.qr-code-box img{width:100%;height:100%;object-fit:contain;}
.qr-amount{font-family:var(--font-display);font-size:22px;color:var(--ink-900);margin-bottom:10px;}
.qr-account{
  background:var(--cream-100);border-radius:var(--radius-sm);
  padding:10px 12px;margin-bottom:12px;text-align:left;
}
.qr-account div{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:2px 0;}
.qr-account div span:first-child{color:var(--ink-600);}
.qr-account div span:last-child{color:var(--ink-900);font-weight:700;text-align:right;}
.qr-note{font-size:11.5px;color:var(--ink-600);line-height:1.5;margin:0;}

/* ---------- Deity detail modal ---------- */
.deity-card{cursor:pointer;}
.deity-overlay{
  position:fixed;inset:0;background:rgba(15,3,5,0.6);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60;padding:24px;
}
.deity-overlay.show{opacity:1;pointer-events:auto;}
.deity-modal{
  background:#fff;border-radius:var(--radius-lg);
  width:420px;max-width:100%;max-height:88vh;overflow-y:auto;
  box-shadow:var(--shadow-pop);position:relative;
  transform:translateY(10px);transition:transform .2s ease;
}
.deity-overlay.show .deity-modal{transform:translateY(0);}
.deity-modal-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,0.85);color:var(--ink-700);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.deity-modal-close svg{width:17px;height:17px;}
.deity-modal-figure{width:100%;max-height:60vh;overflow:hidden;background:var(--cream-100);display:flex;align-items:center;justify-content:center;}
.deity-modal-figure img{width:100%;height:100%;object-fit:contain;display:block;}
.deity-modal-body{padding:22px 24px 26px;}
.deity-modal-body h3{font-family:var(--font-display);font-size:22px;color:var(--maroon-800);margin:0 0 4px;}
.deity-modal-role{font-size:12px;color:var(--ember-500);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:14px;}
.deity-modal-body p{font-size:14px;line-height:1.7;color:var(--ink-600);margin:0;}

/* ---------- Event detail modal ---------- */
.cal-event-chip{cursor:pointer;}
.event-row{cursor:pointer;}
.event-overlay{
  position:fixed;inset:0;background:rgba(15,3,5,0.6);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60;padding:24px;
}
.event-overlay.show{opacity:1;pointer-events:auto;}
.event-modal{
  background:#fff;border-radius:var(--radius-lg);
  width:340px;max-width:100%;padding:30px 26px 28px;text-align:center;
  box-shadow:var(--shadow-pop);position:relative;
  transform:translateY(10px);transition:transform .2s ease;
}
.event-overlay.show .event-modal{transform:translateY(0);}
.event-modal-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;border:none;background:var(--cream-100);
  color:var(--ink-600);display:flex;align-items:center;justify-content:center;
}
.event-modal-close svg{width:16px;height:16px;}
.event-modal-badge{
  width:64px;height:64px;margin:0 auto 16px;border-radius:var(--radius-md);
  background:var(--maroon-800);color:var(--gold-100);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.event-modal-badge b{font-family:var(--font-display);font-size:24px;line-height:1;}
.event-modal-badge span{font-size:10.5px;letter-spacing:0.05em;margin-top:2px;}
.event-modal h3{font-family:var(--font-display);font-size:19px;color:var(--maroon-800);margin:0 0 8px;line-height:1.35;}
.event-modal p{font-size:13.5px;color:var(--ink-600);margin:0;}
.event-modal-desc{
  margin-top:14px !important;padding-top:14px;border-top:1px solid var(--cream-100);
  line-height:1.6;text-align:left;
}

/* ---------- News & Announcements: "More" link + detail modal ---------- */
.announce-more-btn{
  background:none;border:none;padding:0;margin-left:2px;
  color:var(--ember-500);font-size:11.5px;font-weight:700;
  cursor:pointer;text-decoration:underline;
}
.announce-overlay{
  position:fixed;inset:0;background:rgba(15,3,5,0.6);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60;padding:24px;
}
.announce-overlay.show{opacity:1;pointer-events:auto;}
.announce-modal{
  background:#fff;border-radius:var(--radius-lg);
  width:400px;max-width:100%;max-height:80vh;overflow-y:auto;
  padding:30px 26px 28px;box-shadow:var(--shadow-pop);position:relative;
  transform:translateY(10px);transition:transform .2s ease;
}
.announce-overlay.show .announce-modal{transform:translateY(0);}
.announce-modal-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;border:none;background:var(--cream-100);
  color:var(--ink-600);display:flex;align-items:center;justify-content:center;
}
.announce-modal-close svg{width:16px;height:16px;}
.announce-modal h3{font-family:var(--font-display);font-size:19px;color:var(--maroon-800);margin:0 0 12px;padding-right:24px;line-height:1.35;}
.announce-modal p{font-size:14px;line-height:1.7;color:var(--ink-600);margin:0;}

@media (max-width:860px){
  .deity-modal{width:100%;}
  .deity-modal-figure{max-height:40vh;}
  .event-modal{width:88vw;}
  .announce-modal{width:88vw;}
}

/* subscribe strip */
.subscribe-strip{
  margin-top:22px;background:var(--cream-100);border-radius:var(--radius-md);
  padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.subscribe-strip .msg{font-size:13px;color:var(--ink-900);}
.subscribe-strip .msg b{display:block;font-family:var(--font-display);font-size:15px;color:var(--maroon-800);}
.subscribe-strip input{
  border:1px solid var(--cream-100);border-radius:999px;padding:10px 16px;font-size:12.5px;width:200px;
}
.subscribe-strip button{
  background:var(--maroon-800);color:var(--gold-100);border:none;padding:10px 18px;border-radius:999px;font-weight:700;font-size:12.5px;
}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:var(--cream-100);border-radius:8px;}

/* ---------- Splash / welcome screen ---------- */
.splash-screen{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--maroon-700), transparent 60%),
    radial-gradient(140% 100% at 50% 100%, rgba(193,83,31,0.35), transparent 55%),
    linear-gradient(180deg, var(--maroon-950), #1a0407 85%);
  overflow:hidden;
  transition:opacity .6s ease, visibility .6s ease;
}
.splash-screen.splash-hide{opacity:0;visibility:hidden;pointer-events:none;}

.splash-bg{position:absolute;inset:0;overflow:hidden;}
.splash-bg-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;
  opacity:0;
  animation:splashBgIn 2s ease forwards, splashBgZoom 22s ease-in-out infinite 2s;
}
.splash-bg-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(80% 65% at 50% 38%, rgba(38,7,11,0.35), rgba(38,7,11,0.86) 72%),
    linear-gradient(180deg, rgba(38,7,11,0.55) 0%, rgba(38,7,11,0.35) 35%, rgba(26,4,7,0.92) 100%);
}
@keyframes splashBgIn{ from{ opacity:0; } to{ opacity:0.55; } }
@keyframes splashBgZoom{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.09); }
}

.splash-vel{
  font-family:var(--font-display);
  font-size:15px;color:var(--gold-300);letter-spacing:0.08em;
  margin-bottom:14px;
  opacity:0;animation:splashFadeUp .8s ease forwards .05s, splashVelGlow 2.8s ease-in-out infinite 1.6s;
}
@keyframes splashVelGlow{
  0%,100%{ text-shadow:0 0 8px rgba(232,206,142,0.15); }
  50%{ text-shadow:0 0 18px rgba(232,206,142,0.65); }
}

.splash-halo{
  position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle, rgba(232,206,142,0.22) 0%, transparent 68%);
  animation:splashHaloPulse 4.5s ease-in-out infinite;
}
@keyframes splashHaloPulse{
  0%,100%{ transform:scale(1); opacity:0.7; }
  50%{ transform:scale(1.12); opacity:1; }
}

.splash-rays{
  position:absolute;width:900px;height:900px;
  background:conic-gradient(from 0deg,
    rgba(212,165,55,0.10) 0deg, transparent 18deg,
    rgba(212,165,55,0.10) 36deg, transparent 54deg,
    rgba(212,165,55,0.10) 72deg, transparent 90deg,
    rgba(212,165,55,0.10) 108deg, transparent 126deg,
    rgba(212,165,55,0.10) 144deg, transparent 162deg,
    rgba(212,165,55,0.10) 180deg, transparent 198deg,
    rgba(212,165,55,0.10) 216deg, transparent 234deg,
    rgba(212,165,55,0.10) 252deg, transparent 270deg,
    rgba(212,165,55,0.10) 288deg, transparent 306deg,
    rgba(212,165,55,0.10) 324deg, transparent 342deg,
    rgba(212,165,55,0.10) 360deg);
  border-radius:50%;
  animation:splashRaysSpin 40s linear infinite;
}
@keyframes splashRaysSpin{ to{ transform:rotate(360deg); } }

.splash-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 24px;
}

.splash-logo-wrap{
  width:180px;height:180px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;
  opacity:0;
  animation:splashLogoIn 1s ease forwards .15s, splashLogoFloat 3.6s ease-in-out infinite 1.15s;
}
.splash-logo{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(232,206,142,0.55)) drop-shadow(0 10px 24px rgba(0,0,0,0.5));
}
@keyframes splashLogoIn{
  from{ opacity:0; transform:scale(0.6) translateY(18px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes splashLogoFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

.splash-title{
  font-family:var(--font-display);
  font-size:32px;color:var(--gold-100);
  margin:0 0 8px;letter-spacing:0.02em;
  opacity:0;animation:splashFadeUp .8s ease forwards .55s;
}
.splash-loc{
  font-size:13px;color:var(--gold-300);letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:34px;
  opacity:0;animation:splashFadeUp .8s ease forwards .75s;
}
@keyframes splashFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.splash-enter-btn{
  border:none;cursor:pointer;
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500) 60%, #a3771f);
  color:var(--maroon-950);
  padding:16px 46px;border-radius:999px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  box-shadow:0 0 0 0 rgba(232,206,142,0.5), 0 10px 24px rgba(0,0,0,0.4);
  opacity:0;
  animation:splashFadeUp .8s ease forwards .95s, splashBtnPulse 2.4s ease-in-out infinite 1.8s;
}
.splash-enter-main{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:0.06em;}
.splash-enter-sub{font-size:10.5px;font-weight:600;letter-spacing:0.03em;opacity:0.75;}
.splash-enter-btn:active{transform:scale(0.96);}
@keyframes splashBtnPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(232,206,142,0.45), 0 10px 24px rgba(0,0,0,0.4); }
  50%{ box-shadow:0 0 0 14px rgba(232,206,142,0), 0 10px 24px rgba(0,0,0,0.4); }
}

/* ---------- Responsive scale-down for smaller kiosk panels ---------- */
@media (max-width:1180px){
  .tile-grid{grid-template-columns:repeat(3,1fr);}
  .panel-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:1fr 1fr;}
  .cal-grid{grid-auto-rows:78px;}
}

/* ============================================================
   MOBILE / PHONE LAYOUT
   Rail becomes a slide-in drawer; content stacks to one column.
   ============================================================ */
@media (max-width:860px){
  html,body{overflow:auto;}
  #app{height:auto;min-height:100vh;}

  .hamburger-btn{display:flex;}
  .rail-backdrop{display:block;}

  .rail{
    position:fixed;top:0;left:0;height:100vh;width:280px;max-width:82vw;
    transform:translateX(-100%);
    transition:transform .3s ease;
    z-index:150;
    box-shadow:12px 0 30px rgba(0,0,0,0.35);
  }
  .rail.open{transform:translateX(0);}

  .main{width:100%;}
  .screen-wrap{padding:16px 16px 32px;}

  .topbar{padding:0 14px;height:58px;}
  .topbar-crumb{font-size:14.5px;}
  .topbar-clock{display:none;}
  .lang-pill button{padding:6px 9px;font-size:11px;}

  .hero{padding:22px 20px;}
  .hero h1{font-size:21px;}
  .hero p.tagline{font-size:13.5px;}
  .hero-stats{gap:16px;}
  .hero-stat b{font-size:17px;}
  .hero-gopuram{display:none;}

  .tile-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .tile{padding:14px 12px;}

  .panel-grid{gap:12px;}

  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:12px;}

  .cal-card{overflow-x:auto;}
  .cal-weekdays,.cal-grid{min-width:560px;}
  .cal-grid{grid-auto-rows:64px;}
  .cal-toolbar{padding:12px 14px;flex-wrap:wrap;gap:8px;}
  .cal-month-label{font-size:15px;}

  .deity-figure{height:150px;}

  .qr-modal{width:90vw;max-width:320px;padding:26px 22px 22px;}

  .donate-banner{flex-direction:column;align-items:flex-start;gap:14px;}
  .donate-btn{width:100%;}

  .subscribe-strip{flex-direction:column;align-items:flex-start;}

  .section-head h2{font-size:20px;}

  /* Splash screen scales down too */
  .splash-logo-wrap{width:120px;height:120px;margin-bottom:16px;}
  .splash-title{font-size:24px;}
  .splash-loc{font-size:11px;margin-bottom:26px;}
  .splash-vel{font-size:13px;}
  .splash-enter-btn{padding:14px 36px;}
}

@media (max-width:420px){
  .tile-grid{grid-template-columns:1fr;}
  .hero h1{font-size:18px;}
  .rail-hours{display:none;}
}

/* ===== Membership Status ===== */
.membership-card{max-width:520px;padding:28px 26px;}
.membership-label{display:block;font-weight:700;font-size:13.5px;color:var(--ink-900);margin-bottom:8px;}
.membership-input-row{display:flex;gap:10px;flex-wrap:wrap;}
.membership-input{
  flex:1;min-width:200px;padding:12px 14px;border-radius:var(--radius-sm);
  border:1.5px solid var(--cream-100);background:#fff;color:var(--ink-900);
  font-family:var(--font-body);font-size:14.5px;
}
.membership-input:focus{outline:none;border-color:var(--gold-500);}
.membership-check-btn{
  background:var(--ember-500);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:12px 22px;font-weight:800;font-size:13.5px;letter-spacing:.02em;cursor:pointer;white-space:nowrap;
}
.membership-check-btn:hover{filter:brightness(1.07);}
.membership-hint{font-size:12px;color:var(--ink-600);margin:8px 0 0;}
.membership-error{font-size:13px;color:var(--maroon-600);margin:14px 0 0;font-weight:700;}

.membership-result{
  margin-top:22px;padding:22px 20px;border-radius:var(--radius-md);
  background:var(--cream-50);border:1px solid var(--cream-100);
}
.membership-result-header{
  display:flex;align-items:center;gap:14px;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--cream-100);
}
.membership-result-logo{width:52px;height:52px;object-fit:contain;flex-shrink:0;}
.membership-result-org{
  font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.4;
  color:var(--maroon-700);letter-spacing:.01em;
}
.membership-result-row{
  display:flex;gap:6px;padding:6px 0;font-size:14.5px;font-family:var(--font-body);
}
.membership-result-label{font-weight:700;color:var(--ink-900);min-width:132px;}
.membership-result-value{color:var(--ink-600);font-weight:600;}

@media (max-width:600px){
  .membership-card{padding:22px 18px;}
  .membership-result-header{flex-direction:column;text-align:center;}
  .membership-result-row{flex-direction:column;gap:2px;}
  .membership-result-label{min-width:0;}
}