/* ═══════════════════════════════════════════════════════
   Ruby Weds Sherwin — Shared CSS
   Lavender · Rose · Violet palette
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Cinzel:wght@400;500;600&display=swap');

:root{
  --lav1:#f0eafa; --lav2:#e4d9f5; --lav3:#c9aff0;
  --lav4:#9b7ec8; --lav5:#7355a8; --lav6:#4a2d80;
  --rose:#e8a0bf; --rose2:#d4689a;
  --deep:#1a0e2e; --muted:#7a6a95;
  --white:#ffffff;
  --border:rgba(155,126,200,0.22);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--lav1);
  color:var(--deep);font-family:'EB Garamond',serif;overflow-x:hidden;min-height:100vh;
}

/* Subtle noise texture */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity:0.5;
}

/* ── NAV ── */
#site-nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2.5rem;
  background:rgba(240,234,250,0.85);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(155,126,200,0.18);
  transition:box-shadow 0.3s;
}
#site-nav.scrolled{box-shadow:0 4px 30px rgba(115,85,168,0.12);}
.nav-wordmark{
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;font-weight:300;letter-spacing:0.1em;
  text-decoration:none;
  color:var(--deep);
}
.nav-links{display:flex;gap:2.2rem;list-style:none;}
.nav-links a{
  font-family:'Cinzel',serif;font-size:0.58rem;letter-spacing:0.28em;
  color:var(--muted);text-decoration:none;transition:color 0.25s;
  position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-3px;left:0;right:0;height:1.5px;
  background:linear-gradient(to right,var(--lav4),var(--rose));
  transform:scaleX(0);transition:transform 0.3s;transform-origin:center;
}
.nav-links a:hover{color:var(--lav5);}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{color:var(--lav5);}

  
  
  /* Full-screen slide-in menu */
  .nav-links{
    position:fixed;inset:0;top:0;
    flex-direction:column;align-items:center;justify-content:center;
    gap:2.5rem;
    background:rgba(245,242,250,0.97);
    backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
    transform:translateX(100%);
    transition:transform 0.35s cubic-bezier(.4,0,.2,1);
    z-index:850;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{
    font-size:0.78rem !important;
    letter-spacing:0.3em;
    padding:0.8rem 1.6rem;
    color:var(--deep) !important;
  }
  .nav-links a::after{display:none;}
}

/* ── MAIN CONTENT ── */
#main-content{position:relative;z-index:1;padding-top:64px;}

/* ── PAGE HERO BAND ── */
.page-hero{
  text-align:center;position:relative;overflow:hidden;
  padding:clamp(4rem,9vw,6rem) 1.5rem clamp(3rem,6vw,4rem);
  background:var(--lav2);
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(155,126,200,0.12) 0%,transparent 65%);
  pointer-events:none;
}
/* Decorative circles */
.page-hero::after{
  content:'';position:absolute;
  width:500px;height:500px;border-radius:50%;
  border:1px solid rgba(155,126,200,0.12);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
}
.page-hero-inner{position:relative;z-index:1;}

.page-eyebrow{display:flex;align-items:center;gap:1rem;justify-content:center;margin-bottom:1.2rem;}
.eyebrow-rule{width:36px;height:1px;background:linear-gradient(to right,transparent,var(--lav4));}
.eyebrow-rule.r{background:linear-gradient(to left,transparent,var(--lav4));}
.eyebrow-text{
  font-family:'Cinzel',serif;font-size:0.58rem;letter-spacing:0.45em;
  color:var(--lav4);
}
.page-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.8rem,8vw,5rem);font-weight:300;
  line-height:1;margin-bottom:0.8rem;
  color:var(--deep);
}
.page-subtitle{
  font-family:'EB Garamond',serif;font-style:italic;
  color:var(--muted);font-size:1.1rem;line-height:1.6;
  max-width:520px;margin:0 auto;
}
.page-rule{
  display:flex;align-items:center;gap:1rem;justify-content:center;
  margin:1.8rem auto 0;width:min(260px,65vw);
}
.page-rule-line{flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(155,126,200,0.4),transparent);}
.page-rule-diamond{
  width:7px;height:7px;border-radius:1px;
  border:1px solid var(--lav4);
  background:transparent;
  transform:rotate(45deg);flex-shrink:0;
}

/* ── SECTIONS ── */
section{
  padding:clamp(3.5rem,8vw,5.5rem) clamp(1.2rem,5vw,3rem);
  max-width:940px;margin:0 auto;position:relative;
}
section+section{
  border-top:1px solid rgba(155,126,200,0.15);
}
.section-label{
  font-family:'Cinzel',serif;font-size:0.6rem;letter-spacing:0.42em;
  color:var(--lav4);
  text-transform:uppercase;display:block;margin-bottom:0.6rem;
}
.section-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,5.5vw,3rem);font-weight:300;
  color:var(--deep);margin-bottom:1rem;line-height:1.1;
}

/* ── BUTTONS ── */
.btn{
  font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.22em;
  padding:0.65rem 1.6rem;border-radius:50px;cursor:pointer;
  transition:all 0.25s;text-transform:uppercase;border:none;
}
.btn.primary,.btn-primary{
  background:var(--lav4);
  color:#fff;
  box-shadow:0 3px 14px rgba(115,85,168,0.28);
}
.btn.primary:hover,.btn-primary:hover{
  box-shadow:0 8px 28px rgba(115,85,168,0.5);
  transform:translateY(-1px);
}
.btn-ghost{
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(155,126,200,0.4);
  color:var(--lav5);
}
.btn-ghost:hover{background:rgba(155,126,200,0.1);}

/* Inside dark game overlay */
#game-overlay .btn.primary{
  background:transparent;
  border:1px solid rgba(201,175,240,0.6);
  color:rgba(201,175,240,0.9);
  letter-spacing:0.22em;border-radius:50px;
}
#game-overlay .btn.primary:hover{
  background:rgba(155,126,200,0.15);
  border-color:rgba(201,175,240,1);
  color:#f0eafa;
  box-shadow:0 0 24px rgba(155,126,200,0.2);
}

/* ── CROSSWORD ── */
.crossword-intro{color:var(--muted);font-size:1.05rem;line-height:1.7;margin-bottom:1.8rem;font-style:italic;}
#cw-grid-outer{overflow-x:auto;-webkit-overflow-scrolling:touch;display:flex;justify-content:center;margin-bottom:1.4rem;}
#cw-grid{
  display:inline-grid;gap:3px;
  background:rgba(155,126,200,0.1);padding:8px;
  border:1px solid rgba(155,126,200,0.18);border-radius:8px;
  box-shadow:0 4px 20px rgba(115,85,168,0.1);
}
.cw-cell{
  width:36px;height:36px;
  background:rgba(255,255,255,0.8);
  border:1px solid rgba(155,126,200,0.22);
  display:flex;align-items:center;justify-content:center;
  position:relative;font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;font-weight:600;color:var(--deep);
  text-transform:uppercase;cursor:pointer;
  transition:all 0.15s;border-radius:2px;
}
.cw-cell.black{background:rgba(155,126,200,0.12);border-color:rgba(155,126,200,0.08);cursor:default;}
.cw-cell.highlighted{background:rgba(155,126,200,0.18);border-color:rgba(155,126,200,0.45);}
.cw-cell.selected{
  background:linear-gradient(135deg,rgba(155,126,200,0.3),rgba(232,160,191,0.2));
  border-color:var(--lav4);
  box-shadow:0 0 10px rgba(155,126,200,0.25);
}
.cw-cell.correct{background:rgba(80,160,100,0.18);border-color:rgba(80,180,100,0.45);}
.cell-num{position:absolute;top:2px;left:3px;font-size:0.44rem;color:var(--lav4);font-family:'Cinzel',serif;line-height:1;pointer-events:none;}
#cw-active-clue{
  text-align:center;min-height:1.6rem;font-style:italic;
  color:var(--lav4);
  font-size:1rem;margin-bottom:0.8rem;
}
.cw-input-row{display:flex;gap:0.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:0.8rem;}
.cw-input{
  flex:1;min-width:160px;max-width:280px;
  background:rgba(255,255,255,0.8);
  border:1px solid rgba(155,126,200,0.3);
  color:var(--deep);font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;letter-spacing:0.2em;padding:0.6rem 1rem;
  border-radius:50px;outline:none;text-transform:uppercase;text-align:center;
  transition:all 0.2s;
}
.cw-input:focus{
  border-color:var(--lav4);background:rgba(255,255,255,0.95);
  box-shadow:0 0 0 3px rgba(155,126,200,0.15);
}
#cw-status{text-align:center;min-height:1.4rem;font-size:0.92rem;font-style:italic;color:var(--muted);margin-bottom:1.5rem;}
#cw-status.ok{color:rgba(60,140,80,0.9);}
#cw-status.wrong{color:rgba(180,60,100,0.9);}
#cw-clues-panel{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;border-top:1px solid rgba(155,126,200,0.15);padding-top:1.5rem;}
@media(max-width:500px){#cw-clues-panel{grid-template-columns:1fr;}}
.cw-col-head{
  font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.35em;
  color:var(--lav4);
  margin-bottom:0.8rem;
}
.cw-clue-row{
  display:flex;gap:0.5rem;align-items:baseline;padding:0.35rem 0.6rem;border-radius:8px;
  cursor:pointer;transition:all 0.15s;margin-bottom:0.2rem;
  font-size:0.9rem;color:var(--muted);line-height:1.4;
}
.cw-clue-row:hover{background:rgba(155,126,200,0.1);color:var(--deep);}
.cw-clue-row.active{background:linear-gradient(135deg,rgba(155,126,200,0.15),rgba(232,160,191,0.1));color:var(--deep);}
.cw-clue-row.solved{color:rgba(60,140,80,0.85);}
.cw-clue-num{
  font-family:'Cinzel',serif;font-size:0.68rem;min-width:1.4rem;
  color:var(--lav4);
}
@media(max-width:480px){.cw-cell{width:28px;height:28px;font-size:0.85rem;}.cell-num{font-size:0.38rem;}}

/* ── GAME ── */
.game-intro{color:var(--muted);font-size:1.05rem;line-height:1.7;margin-bottom:1.8rem;font-style:italic;}
#game-container{
  position:relative;width:400px;height:700px;margin:0 auto;
  border:1px solid rgba(155,126,200,0.3);border-radius:18px;overflow:hidden;
  background:#080d18;display:block;max-width:100%;
  box-shadow:0 8px 30px rgba(115,85,168,0.15),0 0 0 1px rgba(155,126,200,0.2);
}
#gameCanvas{display:block;width:400px;height:700px;max-width:100%;}
#game-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  z-index:10;overflow:hidden;
  background:linear-gradient(170deg,#0a0814 0%,#120d22 40%,#1a1028 100%);
}
#game-overlay h3{font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem,4.5vw,1.9rem);font-weight:300;color:#f0eafa;margin-bottom:0.35rem;}
#game-overlay p{color:rgba(200,180,230,0.88);font-size:0.88rem;margin-bottom:1rem;line-height:1.55;}
.game-controls-hint{font-size:0.7rem;color:rgba(155,126,200,0.45);margin-top:0.6rem;letter-spacing:0.04em;}
#cinematic{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;position:relative;}
.cinematic-portraits{width:100%;flex:0 0 54%;position:relative;display:flex;overflow:hidden;}
.portrait-wrap{flex:1;position:relative;overflow:hidden;}
.portrait-wrap img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;filter:brightness(0.9) saturate(1.1);}
.portrait-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(8,6,20,0.9) 100%);pointer-events:none;}
.portrait-wrap.sherwin::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 60%,rgba(8,6,20,0.75) 100%);pointer-events:none;z-index:1;}
.portrait-wrap.ruby::before{content:'';position:absolute;inset:0;background:linear-gradient(to left,transparent 60%,rgba(8,6,20,0.75) 100%);pointer-events:none;z-index:1;}
.portrait-name{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.38em;color:rgba(201,175,240,0.9);text-shadow:0 1px 8px rgba(0,0,0,0.9);white-space:nowrap;z-index:2;}
.portrait-divider{position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(155,126,200,0.8),transparent);z-index:3;pointer-events:none;}
.cinematic-info{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.8rem 1.4rem 0.6rem;width:100%;position:relative;}
.cinematic-info::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(to right,transparent,rgba(155,126,200,0.5),transparent);}
.cinematic-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,5vw,2rem);font-weight:300;color:#f0eafa;letter-spacing:0.03em;margin-bottom:0.25rem;line-height:1;}
.cinematic-subtitle{font-family:'Cinzel',serif;font-size:0.58rem;letter-spacing:0.32em;color:rgba(155,126,200,0.7);margin-bottom:0.65rem;}
.cinematic-story{font-family:'EB Garamond',serif;font-size:0.9rem;font-style:italic;color:rgba(210,190,240,0.85);line-height:1.6;margin-bottom:0.85rem;max-width:300px;}
.cinematic-rule{width:48px;height:1px;background:linear-gradient(to right,transparent,rgba(155,126,200,0.7),transparent);margin:0 auto 0.75rem;}
.lives-bar{display:flex;gap:0.55rem;justify-content:center;margin-bottom:0.8rem;}
.life-icon{font-size:1.1rem;transition:opacity 0.4s,filter 0.4s;}
.life-icon.lost{opacity:0.18;filter:grayscale(1);}
.mobile-controls{display:flex;justify-content:center;gap:3rem;margin-top:1.5rem;}
.ctrl-btn{
  width:72px;height:72px;
  border:1px solid rgba(155,126,200,0.35);
  background:rgba(240,234,250,0.06);
  color:var(--lav3);font-size:1.8rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border-radius:18px;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transition:all 0.15s;
  box-shadow:0 4px 16px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.05);
}
.ctrl-btn:active{background:rgba(155,126,200,0.2);transform:scale(0.93);}
#score-display{text-align:center;margin-top:0.8rem;font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.22em;color:var(--lav4);}

/* ── GALLERY ── */
.gallery-lock{text-align:center;padding:3.5rem 1rem;}
.lock-icon{font-size:2.5rem;margin-bottom:1rem;}
.gallery-lock p{color:var(--muted);font-style:italic;margin-bottom:1.5rem;font-size:1.05rem;}
.pin-input-wrap{display:flex;gap:0.8rem;justify-content:center;flex-wrap:wrap;}
.pin-input{
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(155,126,200,0.35);
  color:var(--deep);font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;letter-spacing:0.4em;padding:0.65rem 1rem;
  border-radius:50px;width:140px;text-align:center;outline:none;
  transition:all 0.2s;
}
.pin-input:focus{border-color:var(--lav4);box-shadow:0 0 0 3px rgba(155,126,200,0.15);}
.pin-input.error{border-color:var(--rose2);animation:shake 0.4s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(200px,45vw),1fr));
  gap:0.8rem;margin-top:2rem;contain:layout;
}
.gallery-item{
  aspect-ratio:1;overflow:hidden;cursor:pointer;
  border:1px solid rgba(155,126,200,0.15);position:relative;
  background:rgba(155,126,200,0.06);
  border-radius:12px;
  transition:all 0.3s;
}
.gallery-item:hover{
  box-shadow:0 10px 30px rgba(115,85,168,0.25);
  border-color:rgba(155,126,200,0.4);
  transform:translateY(-2px);
}
.gallery-item.loading::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(155,126,200,0.05) 0%,rgba(155,126,200,0.14) 50%,rgba(155,126,200,0.05) 100%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:12px;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.5s ease,opacity 0.4s ease;
  filter:brightness(0.92);opacity:0;border-radius:12px;
}
.gallery-item img.loaded{opacity:1;}
.gallery-item:hover img{transform:scale(1.06);filter:brightness(1);}
.gallery-empty{
  grid-column:1/-1;text-align:center;color:var(--muted);
  font-style:italic;padding:3.5rem;
  border:1px dashed rgba(155,126,200,0.3);border-radius:12px;
  background:rgba(155,126,200,0.04);
}
.lightbox{
  position:fixed;inset:0;z-index:9998;
  background:rgba(10,6,20,0.97);
  display:flex;align-items:center;justify-content:center;padding:1rem;
  cursor:zoom-out;opacity:0;pointer-events:none;transition:opacity 0.3s;
}
.lightbox.open{opacity:1;pointer-events:all;}
.lightbox img{max-width:100%;max-height:90svh;object-fit:contain;box-shadow:0 0 80px rgba(115,85,168,0.4);border-radius:4px;}

/* ── FOOTER ── */
footer{
  text-align:center;padding:4rem 1.5rem 3rem;
  position:relative;
  border-top:1px solid var(--border);
  background:var(--lav2);
}

.footer-names,.footer-monogram{
  position:relative;z-index:1;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,6vw,3.2rem);font-style:italic;font-weight:300;
  color:var(--deep);
  margin-bottom:0.5rem;
}
.footer-date{position:relative;z-index:1;font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.38em;color:var(--lav4);margin-bottom:1rem;}
.footer-divider{position:relative;z-index:1;width:70px;height:1px;margin:1rem auto;background:linear-gradient(to right,transparent,rgba(155,126,200,0.6),transparent);}
.footer-tagline,.footer-names+p{position:relative;z-index:1;font-style:italic;color:var(--muted);font-size:0.95rem;margin-bottom:1.5rem;}
.footer-nav{position:relative;z-index:1;display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;list-style:none;margin-top:1.2rem;}
.footer-nav a{font-family:'Cinzel',serif;font-size:0.58rem;letter-spacing:0.28em;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.footer-nav a:hover{color:var(--lav4);}

/* ── DIVIDER ── */
.divider{width:60px;height:1px;background:linear-gradient(to right,transparent,var(--lav4),transparent);margin:1.4rem auto;}
.text-center{text-align:center;}

/* ══ BOTTOM TAB BAR — mobile only ══ */
#bottom-nav { display:none; }

@media(max-width:760px){
  #bottom-nav {
    display:flex;
    position:fixed; bottom:0; left:0; right:0;
    z-index:9999;
    background:rgba(245,242,250,0.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-top:1px solid rgba(155,126,200,0.2);
    padding:0.4rem 0 env(safe-area-inset-bottom,0.5rem);
    box-shadow:0 -4px 20px rgba(115,85,168,0.08);
  }
  #bottom-nav a {
    flex:1; display:flex; flex-direction:column;
    align-items:center; gap:0.18rem;
    text-decoration:none; color:#6b5e82;
    font-family:'Cinzel',serif; font-size:0.4rem;
    letter-spacing:0.1em; text-transform:uppercase;
    padding:0.35rem 0.2rem;
    transition:color 0.2s;
    -webkit-tap-highlight-color:transparent;
  }
  #bottom-nav a.active { color:#9b7ec8; }
  #bottom-nav a:active  { color:#9b7ec8; }
  #bottom-nav .tab-icon { font-size:1.25rem; line-height:1; }
  body { padding-bottom:68px; }
}