/* ═══════════════════════════════════════════════════════
   Garima weds Mrinal · Aipan design system
   Ivory line-art on geru red, ported from the invite film
   ═══════════════════════════════════════════════════════ */

:root{
  --red:#A71F23;
  --red-hi:#B22429;
  --red-lo:#7E1216;
  --ivory:#FFF6E8;
  --ivory-dim:rgba(255,246,232,.82);
  --ivory-faint:rgba(255,246,232,.55);
  --ink:#661114;                      /* red-dark text on ivory */
  --ink-soft:rgba(102,17,20,.78);
  --ink-faint:rgba(102,17,20,.55);
  --line:rgba(167,31,35,.28);         /* hairlines on ivory */
  --line-soft:rgba(167,31,35,.16);
  --header-h:74px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overscroll-behavior-y:none}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Lustria',Georgia,serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* ── typography ─────────────────────────────────────── */
h1,h2,h3{font-family:'Cinzel',serif;font-weight:400;line-height:1.15}
.eyebrow{font-size:12px;letter-spacing:.42em;text-transform:uppercase}
.sub{font-size:clamp(15px,3.8vw,17px);letter-spacing:.06em;line-height:1.7}
.on-red{color:var(--ivory)}
.on-red .eyebrow,.on-red .sub{color:var(--ivory-dim)}

/* ── buttons ────────────────────────────────────────── */
.btn{
  display:inline-block;padding:13px 42px;border:1.5px solid currentColor;border-radius:2px;
  font-family:'Cinzel',serif;font-size:14px;letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;text-decoration:none;background:transparent;cursor:pointer;
  transition:background .35s,color .35s;
}
.on-red .btn{color:var(--ivory)}
.on-red .btn:hover{background:var(--ivory);color:var(--red)}
.btn-red{color:var(--red)}
.btn-red:hover{background:var(--red);color:var(--ivory)}
.btn-solid{background:var(--red);color:var(--ivory);border-color:var(--red)}
.btn-solid:hover{background:var(--red-lo);border-color:var(--red-lo);color:var(--ivory)}

/* ── header / nav (Navbar) ──────────────────────────── */
header.site{
  position:fixed !important;top:0;left:0;right:0;z-index:1000 !important;
  height:calc(72px + env(safe-area-inset-top, 0px)) !important;
  padding-top:env(safe-area-inset-top, 0px) !important;
  padding-left:max(clamp(20px,4vw,48px), env(safe-area-inset-left, 0px)) !important;
  padding-right:max(clamp(20px,4vw,48px), env(safe-area-inset-right, 0px)) !important;
  background:rgba(140, 22, 26, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: none !important;
  outline:none !important;
  box-shadow: none !important;
  display:flex;align-items:center !important;justify-content:space-between;
  color:var(--ivory);
  transition:none !important;
  overflow:visible !important;
}
header.site::before{
  display:none !important;
}
.brand{
  font-family:'Cormorant Upright','Cormorant Garamond',serif;
  font-size:clamp(26px,2.5vw,36px);font-weight:400;letter-spacing:.03em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#FFFFFF !important;
  line-height:1;
  pointer-events:all;
  position:relative;
  z-index:1010;
  margin-top:0;
  overflow:visible !important;
  transition:transform .35s cubic-bezier(.33,1,.68,1);
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}
.brand .logo-img{
  display:none;
  width:56px;
  height:56px;
  object-fit:contain;
  filter:none !important;
  transition:transform .35s cubic-bezier(.33,1,.68,1);
  overflow:visible !important;
}
@media (hover:hover){
  .brand:hover .logo-img{
    transform:scale(1.04);
  }
}
@media screen and (max-width:1023px){
  header.site{
    min-height:58px !important;
    padding:8px clamp(14px,3.5vw,22px) 0 !important;
  }
  .brand{
    margin-top:0;
  }
  .brand .logo-img{
    width:48px;
    height:48px;
  }
}
html{
  overflow-y:scroll;
  scrollbar-gutter:stable;
}

nav.primary{display:flex;align-items:center;gap:clamp(16px,2vw,32px);margin-top:0}
nav.primary a{
  font-family:'Cormorant Upright','Cormorant Garamond',serif !important;
  font-size:18px !important;font-weight:400 !important;letter-spacing:2.5px !important;text-transform:uppercase !important;
  color:#FFFFFF !important;text-decoration:none !important;padding:6px 2px;transition:border-color .2s,color .2s;text-align:center !important;
  border-bottom:2px solid transparent !important;
}
nav.primary a:hover,
nav.primary a[aria-current="page"]{
  color:#FFF !important;
  border-bottom-color:#FFFFFF !important;
}

/* Left Sidebar layout removed per user request for thin top navbar */

/* mobile menu */
#menu-btn{
  display:none;background:none;border:none;cursor:pointer;color:#FFFFFF !important;
  font-family:'Cormorant Upright','Cormorant Garamond',serif !important;
  font-size:18px !important;font-weight:400 !important;letter-spacing:2.5px !important;text-transform:uppercase !important;padding:10px;
  margin-top:10px;
}
#menu-panel{
  position:fixed;inset:0;z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4vh;
  background:radial-gradient(130% 100% at 50% 20%,var(--red-hi) 0%,var(--red) 46%,var(--red-lo) 100%);
}
#menu-panel.open{display:flex}
#menu-panel a{
  font-family:'Cormorant Upright','Cormorant Garamond',serif !important;
  font-size:18px !important;font-weight:400 !important;letter-spacing:2.5px !important;text-transform:uppercase !important;
  color:#FFFFFF !important;text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:4px;
}
#menu-panel a:hover,#menu-panel a[aria-current="page"]{color:#FFFFFF !important;border-bottom-color:#FFFFFF !important}
#menu-close{
  position:absolute;top:18px;right:18px;background:none;border:none;cursor:pointer;
  color:#FFFFFF !important;font-family:'Cormorant Upright','Cormorant Garamond',serif !important;
  font-size:18px !important;font-weight:400 !important;letter-spacing:2.5px !important;text-transform:uppercase !important;padding:12px;
}

/* ── hero ───────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;text-align:center;color:var(--ivory);
  background:radial-gradient(130% 100% at 50% 28%,var(--red-hi) 0%,var(--red) 46%,var(--red-lo) 100%);
  padding:clamp(56px,10vh,110px) 26px clamp(64px,11vh,120px);
}
.hero.tall{min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero .bgmandala{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(150vw,760px);opacity:.07;
  animation:spin 90s linear infinite;pointer-events:none;
}
.hero .bgmandala circle,.hero .bgmandala path{stroke:var(--ivory);fill:none;stroke-width:2.6;stroke-linecap:round}
.hero .bgmandala .fill{fill:var(--ivory);stroke:none}
.hero>*{position:relative}
.hero .shloka{font-family:Georgia,'Noto Serif Devanagari',serif;font-size:clamp(17px,4.6vw,22px);letter-spacing:.06em;color:var(--ivory-dim)}
.hero .eyebrow{color:var(--ivory-dim);margin-top:14px}
.hero h1.names{font-size:clamp(38px,9vw,62px);letter-spacing:.16em;margin-top:2.5vh}
.hero .weds{font-style:italic;font-size:clamp(17px,4.4vw,22px);color:var(--ivory-dim);letter-spacing:.3em;margin:8px 0;text-transform:lowercase}
.hero h1.page-title{font-size:clamp(26px,6.4vw,40px);letter-spacing:.2em;text-transform:uppercase;margin-top:1.6vh}
.hero .sub{color:var(--ivory-dim);margin-top:2.2vh}
@keyframes spin{to{transform:rotate(360deg)}}

/* flourish rule (from the invite) */
.flourish{width:min(60vw,250px);margin:3vh auto 0}
.flourish path,.flourish circle{stroke:var(--ivory-dim);fill:none;stroke-width:2;stroke-linecap:round}
.flourish .fill{fill:var(--ivory-dim);stroke:none}
.flourish.red-ink path,.flourish.red-ink circle{stroke:var(--line)}
.flourish.red-ink .fill{fill:var(--line);stroke:none}

/* countdown */
#countdown{display:flex;gap:clamp(18px,5vw,42px);justify-content:center;margin-top:4vh}
#countdown .unit{display:flex;flex-direction:column;align-items:center}
#countdown .num{font-family:'Cinzel',serif;font-size:clamp(30px,7.4vw,46px);line-height:1}
#countdown .lbl{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ivory-faint);margin-top:8px}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:4.5vh}

/* ── sections on ivory ──────────────────────────────── */
main{display:block}
.section{max-width:980px;margin:0 auto;padding:clamp(52px,9vh,90px) 26px;text-align:center}
.section h2{font-size:clamp(21px,5.4vw,28px);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.section .eyebrow{color:var(--ink-faint);margin-bottom:14px}
.section .sub{color:var(--ink-soft);max-width:640px;margin:18px auto 0}
.section .btn{margin-top:34px}

/* aipan dotted rule between sections */
.dotted-rule{display:flex;align-items:center;justify-content:center;gap:14px;max-width:980px;margin:0 auto;padding:0 26px}
.dotted-rule::before,.dotted-rule::after{content:"";height:1px;flex:1;max-width:180px;background:var(--line-soft)}
.dotted-rule svg{width:26px;height:26px;flex:none}
.dotted-rule .fill{fill:var(--line)}

/* ── cards ──────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:44px;text-align:left}
.card{
  position:relative;border:none;border-radius:2px;padding:30px 26px 28px;background:transparent;
}
.card::before{display:none}
.card h3{font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.card p{font-size:14.5px;color:var(--ink-soft);line-height:1.7}
.card .card-icon{width:44px;height:44px;margin-bottom:16px}
.card .card-icon path,.card .card-icon circle,.card .card-icon line{stroke:var(--red);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.card .card-icon .fill{fill:var(--red);stroke:none}
a.card{display:block;text-decoration:none;transition:background .3s}
a.card:hover{background:rgba(167,31,35,.05)}

/* ── schedule (events page) ─────────────────────────── */
.day-label{
  font-size:11px;letter-spacing:.3em;white-space:nowrap;text-transform:uppercase;color:var(--ink-faint);
  margin:6vh 0 2.4vh;display:flex;align-items:center;justify-content:center;gap:14px;
}
.day-label::before,.day-label::after{content:"";height:1px;width:34px;background:var(--line)}
.ev{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:14px 0;align-items:baseline}
.ev-t{text-align:right;font-style:italic;font-size:clamp(13px,3.6vw,15px);color:var(--ink-faint)}
.ev-n{text-align:left;font-family:'Cinzel',serif;font-size:clamp(15px,4vw,18px);letter-spacing:.1em;color:var(--ink)}
.ev-d{grid-column:2;text-align:left;font-size:13.5px;color:var(--ink-soft);margin-top:-6px;max-width:420px}

/* ── forms (rsvp) ───────────────────────────────────── */
.form-card{max-width:620px;margin:44px auto 0;text-align:left}
.field{margin-bottom:26px}
.field label{
  display:block;font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);margin-bottom:10px;
}
.field .hint{font-size:12.5px;color:var(--ink-faint);margin-top:6px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;height:52px;padding:0 16px;border:1px solid transparent;border-radius:16px;background:#FFF;
  font-family:'Roboto Flex',sans-serif;font-weight:400;font-size:16px;color:#19202F;outline:none;transition:border-color .25s;
}
input:focus,select:focus,textarea:focus,
input:not(:placeholder-shown),textarea:not(:placeholder-shown){border-color:#79747E}
input::placeholder,textarea::placeholder{color:rgba(25,32,47,.40)}
textarea{min-height:120px;padding:14px 16px;height:auto;resize:vertical}
.choices{display:flex;flex-direction:column;gap:12px}
.choice{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:15.5px;color:var(--ink)}
.choice input{accent-color:var(--red);width:17px;height:17px;flex:none;cursor:pointer}
#rsvp-status{margin-top:20px;font-size:14.5px;color:var(--ink-soft);text-align:center;min-height:1.4em}
#rsvp-thanks{display:none;text-align:center;padding:6vh 0 2vh}
#rsvp-thanks .big{font-family:'Cinzel',serif;font-size:clamp(22px,5.6vw,30px);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}

/* ── gallery ────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:44px}
.gal figure{position:relative;border:1.5px solid var(--line);border-radius:2px;overflow:hidden;background:var(--red)}
.gal figure.art{background:transparent;display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:14%}
.gal figure.art svg path,.gal figure.art svg circle{stroke:var(--red);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gal figure.art svg .fill{fill:var(--red);stroke:none}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory);background:linear-gradient(transparent,rgba(60,7,9,.72));
}
.gal figure.art figcaption{color:var(--ink-faint);background:none;position:static;padding:0;margin-top:12px;text-align:center}

/* ── footer ─────────────────────────────────────────── */
footer.site{display:none !important}

/* ── reveal on scroll ───────────────────────────────── */
.r{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.22,.9,.3,1),transform .9s cubic-bezier(.22,.9,.3,1)}
.r.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .r{opacity:1;transform:none;transition:none}
  .hero .bgmandala{animation:none}
  html{scroll-behavior:auto}
}

/* ── responsive ─────────────────────────────────────── */
@media (max-width:820px){
  .brand-name{display:none}
}
@media (max-width:760px){
  nav.primary{display:none}
  #menu-btn{display:block}
}
@media (max-width:480px){
  .ev{grid-template-columns:auto 1fr;gap:14px}
  .ev-d{grid-column:2}
  .hero .cta .btn{width:100%;text-align:center}
}

/* ═══════════════════════════════════════════════════════
   Garima & Mrinal · Royal Invitation Passcode Gateway
   ═══════════════════════════════════════════════════════ */

body.gateway-locked {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none !important;
}

.wedding-gateway-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 35%, rgba(167, 31, 35, 0.96) 0%, rgba(126, 18, 22, 0.98) 55%, #420608 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wedding-gateway-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wedding-gateway-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('../images/paper-bg-flawless-seamless.jpg') repeat center / auto;
  opacity: 0.28;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.gateway-bgmandala {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(140vw, 760px);
  height: min(140vw, 760px);
  opacity: 0.08;
  animation: spin 100s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.gateway-bgmandala circle,
.gateway-bgmandala path {
  stroke: var(--ivory);
  fill: none;
  stroke-width: 2.4;
}
.gateway-bgmandala .fill {
  fill: var(--ivory);
  stroke: none;
}

/* ── Modal Card ─────────────────────────────────────── */
.gateway-modal-card {
  position: relative;
  z-index: 10;
  max-width: 480px;
  width: 100%;
  margin: auto;
  background: #FDF9F2;
  background-image: url('../images/paper-bg-flawless-seamless.jpg');
  background-repeat: repeat;
  background-position: center;
  background-size: 360px auto;
  border-radius: 4px;
  padding: 42px 32px 36px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(18, 2, 4, 0.65), 0 0 0 1px rgba(255, 246, 232, 0.25);
  border: 1.5px solid rgba(186, 140, 72, 0.55);
  transform: translateY(24px) scale(0.95);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease;
  overflow: hidden;
}

.wedding-gateway-overlay.active .gateway-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.wedding-gateway-overlay.unlocking .gateway-modal-card {
  transform: translateY(-20px) scale(1.04);
  opacity: 0;
  filter: blur(5px);
  pointer-events: none;
}

.gateway-modal-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(186, 140, 72, 0.38);
  outline: 1px solid rgba(186, 140, 72, 0.18);
  outline-offset: -4px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.gateway-modal-card > * {
  position: relative;
  z-index: 2;
}

/* ── Close Button (for authenticated switch mode) ── */
.gateway-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(102, 17, 20, 0.6);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  z-index: 20;
}
.gateway-close-btn:hover {
  color: #A71F23;
  background: rgba(167, 31, 35, 0.08);
}

/* ── Shloka ─────────────────────────────────────────── */
.gateway-shloka {
  font-family: Georgia, 'Noto Serif Devanagari', serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #8C161A;
  margin-bottom: 8px;
  font-weight: 500;
}

/* ── Diya SVG & Animation ───────────────────────────── */
.gateway-diya-wrap {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gateway-diya-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 14px rgba(212, 160, 89, 0.5));
}
.flame-aura {
  animation: diyaPulse 2.8s ease-in-out infinite alternate;
}
@keyframes diyaPulse {
  0% { transform: scale(0.92); opacity: 0.75; }
  100% { transform: scale(1.08); opacity: 1; }
}

/* ── Titles & Headings ──────────────────────────────── */
.gateway-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #BA8C48;
  margin-bottom: 6px;
  font-weight: 600;
}
.gateway-title {
  font-family: 'Cormorant Upright', 'Cinzel', serif;
  font-size: clamp(28px, 6vw, 36px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #96181C;
  line-height: 1.1;
  margin-bottom: 6px;
}
.gateway-date {
  font-family: 'Lustria', Georgia, serif;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(102, 17, 20, 0.75);
  margin-bottom: 14px;
}

/* ── Divider ────────────────────────────────────────── */
.gateway-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px auto 14px;
  max-width: 220px;
}
.gateway-line {
  flex: 1;
  height: 1px;
  background: rgba(186, 140, 72, 0.45);
}
.gateway-gem {
  color: #BA8C48;
  font-size: 11px;
  line-height: 1;
}

/* ── Prompt ─────────────────────────────────────────── */
.gateway-prompt {
  font-family: 'Lustria', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(25, 32, 47, 0.82);
  margin-bottom: 20px;
  padding: 0 6px;
}

/* ── Input & Form ───────────────────────────────────── */
.gateway-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.gateway-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.gateway-key-icon {
  position: absolute;
  left: 16px;
  font-size: 16px;
  opacity: 0.65;
  pointer-events: none;
}
.gateway-input {
  width: 100%;
  height: 52px;
  padding: 0 16px 0 46px;
  background: #FFFDF9;
  border: 1.5px solid rgba(186, 140, 72, 0.48);
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  color: #661114;
  outline: none;
  transition: all 0.25s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
}
.gateway-input::placeholder {
  color: rgba(102, 17, 20, 0.35);
  letter-spacing: 0.16em;
  font-weight: 400;
  font-size: 14px;
}
.gateway-input:focus {
  background: #FFFFFF;
  border-color: #BA8C48;
  box-shadow: 0 0 0 3px rgba(186, 140, 72, 0.22), 0 4px 12px rgba(167, 31, 35, 0.08);
}
.gateway-input.error {
  border-color: #C81A1F;
  background: #FFF5F5;
  box-shadow: 0 0 0 3px rgba(200, 26, 31, 0.18);
}

/* ── Error Message ──────────────────────────────────── */
.gateway-error {
  font-family: 'Lustria', serif;
  font-size: 13px;
  color: #C81A1F;
  min-height: 18px;
  margin: -4px 0 2px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gateway-error.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Unlock Button ──────────────────────────────────── */
.gateway-btn-unlock {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #A71F23;
  color: #FFF6E8;
  border: 1.5px solid #BA8C48;
  border-radius: 3px;
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(167, 31, 35, 0.28);
}
.gateway-btn-unlock:hover {
  background: #7E1216;
  border-color: #D4A059;
  box-shadow: 0 6px 22px rgba(167, 31, 35, 0.42);
  transform: translateY(-1px);
}
.gateway-btn-unlock:active {
  transform: translateY(1px);
}
.gateway-btn-unlock .btn-arrow {
  transition: transform 0.25s ease;
}
.gateway-btn-unlock:hover .btn-arrow {
  transform: translateX(4px);
}

/* ── Hint & Quick Pills ─────────────────────────────── */
.gateway-keys-hint {
  border-top: 1px solid rgba(186, 140, 72, 0.22);
  padding-top: 14px;
  margin-top: 6px;
}
.hint-label {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(102, 17, 20, 0.6);
  margin-bottom: 8px;
}
.hint-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.hint-pill {
  background: rgba(186, 140, 72, 0.1);
  border: 1px solid rgba(186, 140, 72, 0.35);
  border-radius: 20px;
  padding: 4px 11px;
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7E1216;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hint-pill:hover {
  background: #BA8C48;
  color: #FFFFFF;
  border-color: #BA8C48;
  transform: scale(1.04);
}

/* ── Active / Authenticated Mode Status ─────────────── */
.gateway-active-status {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(186, 140, 72, 0.35);
}
.status-current {
  font-size: 12.5px;
  color: rgba(25, 32, 47, 0.85);
  margin-bottom: 8px;
}
.status-current strong {
  color: #A71F23;
  letter-spacing: 0.08em;
}
.gateway-btn-logout {
  background: none;
  border: none;
  font-family: 'Lustria', serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #A71F23;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.gateway-btn-logout:hover {
  opacity: 1;
}

/* ── Shake Animation on Error ───────────────────────── */
.gateway-shake {
  animation: gatewayShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes gatewayShake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-7px); }
  30%, 60%, 90% { transform: translateX(7px); }
}

/* ── Header / Nav Passcode Pill ─────────────────────── */
.gateway-key-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 246, 232, 0.14);
  border: 1px solid rgba(186, 140, 72, 0.45);
  border-radius: 20px;
  padding: 5px 12px;
  color: #FFFFFF;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-left: 4px;
}
.gateway-key-pill:hover {
  background: rgba(186, 140, 72, 0.32);
  border-color: #D4A059;
  color: #FFF6E8;
  transform: translateY(-1px);
}
.gateway-key-pill .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #50E3C2;
  box-shadow: 0 0 6px #50E3C2;
}

/* Mobile menu gateway link */
.menu-gateway-link {
  font-family: 'Cormorant Upright', 'Cormorant Garamond', serif !important;
  font-size: 15px !important;
  letter-spacing: 1.5px !important;
  color: rgba(255, 246, 232, 0.85) !important;
  border: 1px solid rgba(186, 140, 72, 0.4) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  background: rgba(0, 0, 0, 0.15) !important;
}
.menu-gateway-link .pill-change {
  font-size: 13px;
  color: #FFDF85;
  font-style: italic;
}

/* Hero Guest Badge on index.html */
.hero-guest-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 5px 18px;
  border-radius: 20px;
  background: rgba(255, 246, 232, 0.12);
  border: 1px solid rgba(186, 140, 72, 0.4);
  font-family: 'Cinzel', serif;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  animation: fadeIn 0.6s ease;
}
.hero-guest-badge::before {
  content: "✦";
  color: #FFDF85;
  font-size: 10px;
}

/* ── Universal Fortune Wheel Bottom Navigation Dock (Core Navbar) ── */
header.site,
#menu-panel {
  display: none !important;
}

.mobile-wheel-nav {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.wheel-active-badge {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(35, 5, 7, 0.94);
  border: 1.2px solid rgba(255, 223, 133, 0.55);
  border-radius: 20px;
  padding: 5px 18px;
  margin-bottom: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: badgeFloat 3s infinite ease-in-out;
}

.wheel-badge-title {
  font-family: 'Cinzel', serif;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFDF85;
  font-weight: 600;
}

.wheel-badge-dot {
  color: #FFDF85;
  font-size: 10px;
  display: inline-block;
  animation: spinSlow 8s linear infinite;
}

.wheel-dock-bar {
  pointer-events: auto;
  width: calc(100% - 24px);
  max-width: 500px;
  height: 70px;
  background: linear-gradient(180deg, rgba(167, 31, 35, 0.97) 0%, rgba(100, 14, 18, 0.98) 100%);
  border: 1.5px solid rgba(255, 223, 133, 0.55);
  border-radius: 35px;
  box-shadow: 0 10px 36px rgba(25, 3, 5, 0.65), inset 0 1px 1px rgba(255, 252, 242, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wheel-flip-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 246, 232, 0.14);
  border: 1px solid rgba(255, 223, 133, 0.4);
  color: #FFF6E8;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, border-color 0.2s;
  outline: none;
  padding-bottom: 2px;
}
.wheel-flip-btn:hover {
  background: rgba(255, 223, 133, 0.25);
  border-color: #FFDF85;
}
.wheel-flip-btn:active {
  background: rgba(255, 223, 133, 0.4);
  transform: scale(0.92);
}

.wheel-items-track {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 1;
  height: 100%;
  margin: 0 6px;
  position: relative;
}

.wheel-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255, 246, 232, 0.72);
  padding: 4px 8px;
  border-radius: 16px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  flex: 1;
}

.wheel-nav-item:hover {
  color: #FFFFFF;
}

.wheel-nav-item .item-icon {
  font-size: 20px;
  line-height: 1.2;
  transition: transform 0.25s, filter 0.25s;
}

.wheel-nav-item .item-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
  transition: color 0.25s;
  white-space: nowrap;
}

.wheel-nav-item.active {
  color: #FFFFFF;
}

.wheel-nav-item.active .item-icon {
  transform: scale(1.22) translateY(-2px);
  filter: drop-shadow(0 2px 10px rgba(255, 223, 133, 0.95));
}

.wheel-nav-item.active .item-label {
  color: #FFDF85;
  font-weight: 600;
}

.wheel-nav-item.active::before {
  content: "";
  position: absolute;
  top: 2px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 223, 133, 0.45) 0%, rgba(167, 31, 35, 0) 70%);
  z-index: -1;
  animation: dialPulse 2s infinite alternate ease-in-out;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dialPulse {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.3); opacity: 1; }
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ── Universal Viewport & Content Spacing ── */
main {
  padding-bottom: calc(130px + env(safe-area-inset-bottom, 20px)) !important;
}

@media screen and (max-width: 1024px) {
  html, body {
    height: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  main {
    height: 100% !important;
    height: 100svh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: none !important;
    position: relative !important;
    z-index: 1 !important;
    padding-top: max(16px, env(safe-area-inset-top, 16px)) !important;
  }
}