/* ============================================================================
   Rooms CTA — Buttons Only (Rooms 2 & 3)
   - No layout/container rules (won’t affect chamber widths)
   - High-specificity targets so styles always apply
   ========================================================================== */

/* ---------- Button foundation (beats generic link styles) ---------- */
.room-link-block .room-link-container .room-link-button.room2-button,
.room-link-block .room-link-container .room-link-button.room3-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.6rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.05rem);
  line-height: 1;
  text-decoration: none !important;       /* suppress underlines */
  min-height: 44px; min-width: 44px;      /* iPhone tap size */
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .05s ease;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ============================================================================
   ROOM 2 — Zen Moon · Expressions (LUNAR SHIMMER)
   ========================================================================== */

/* Soft lunar ripple */
@keyframes moonShimmer {
  0% { background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.room-link-block .room-link-container .room-link-button.room2-button {
  background: #2c2f5c;                           /* deep indigo night sky */
  color: #f2f2ff;                                 /* moon-white text */
  border: 1px solid transparent;
  border-image: linear-gradient(90deg,#eaeaff,#cdd8f8,#f2f2ff) 1;   /* silvery halo edge */
  box-shadow: 0 8px 18px rgba(44,47,92,.35);
}
.room-link-block .room-link-container .room-link-button.room2-button:hover {
  background: linear-gradient(135deg,#4950a1 0%,#6c75c7 50%,#8c93e3 100%); /* shimmering indigo */
  background-size: 200% 200%;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(73,80,161,.45);
  animation: moonShimmer 3s ease-in-out infinite;
}
.room-link-block .room-link-container .room-link-button.room2-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242,242,255,.75), 0 0 0 6px rgba(44,47,92,.45);
}
.room-link-block .room-link-container .room-link-button.room2-button:active { transform: translateY(1px); }

/* ============================================================================
   ROOM 3 — ZenEnergy · Sanctuary (DIAMOND INNER LIGHT → OCHRE ILLUMINATION)
   ========================================================================== */

/* Edge shimmer + facet sweep */
@keyframes diamondEdge {
  0%  { filter: saturate(110%); }
  50% { filter: saturate(140%); }
  100%{ filter: saturate(110%); }
}
@keyframes facetSweep {
  0%   { left: -30%; opacity: .0; }
  20%  { opacity: .14; }
  50%  { left: 65%;  opacity: .2; }
  80%  { opacity: .10; }
  100% { left: 130%; opacity: .0; }
}

.room-link-block .room-link-container .room-link-button.room3-button{
  position: relative;
  background: #1a1d3a;                           /* deep indigo (contrast) */
  color: #ffffff;                                 /* crisp white for legibility */
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  border-radius: 9999px;

  /* Diamond edge (visible) */
  border: 2px solid transparent;
  border-image-slice: 1;
  border-image-source: linear-gradient(
    90deg, #fff8e1 0%, #f6d365 18%, #fda085 36%, #a1c4fd 60%, #c2e9fb 82%, #fff8e1 100%
  );

  box-shadow: 0 10px 26px rgba(0,0,0,.38);
}

/* Moving facet (subtle diagonal sheen) */
.room-link-block .room-link-container .room-link-button.room3-button::before{
  content: "";
  position: absolute; top: -12%; bottom: -12%; left: -40%; width: 42%;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 28%,
    rgba(255,255,255,.35) 45%,
    rgba(255,255,255,.18) 62%,
    rgba(255,255,255,0) 100%);
  filter: blur(1px);
  opacity: 0;
  transition: opacity .25s ease;
}
.room-link-block .room-link-container .room-link-button.room3-button:hover::before{
  opacity: 1;
  animation: facetSweep 1.8s ease-in-out;
}

/* Hover → illumination */
.room-link-block .room-link-container .room-link-button.room3-button:hover{
  background:#d8a04d;                             /* ochre illumination */
  color:#1a1d3a;                                   /* indigo = clarity revealed */
  text-shadow:none;
  box-shadow: 0 16px 34px rgba(216,160,77,.55);
  animation: diamondEdge 4s ease-in-out infinite;
}
.room-link-block .room-link-container .room-link-button.room3-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,248,225,.8), 0 0 0 6px rgba(24,26,52,.55);
}
.room-link-block .room-link-container .room-link-button.room3-button:active { transform: translateY(1px); }

/* ------------------------ Reduced motion & Mobile -------------------------- */
@media (prefers-reduced-motion: reduce){
  .room-link-block .room-link-container .room-link-button.room2-button,
  .room-link-block .room-link-container .room-link-button.room3-button { animation:none !important; transition:none !important; }
  .room-link-block .room-link-container .room-link-button.room3-button:hover::before{ animation:none !important; }
}
@media (max-width: 380px){
  .room-link-block .room-link-container .room-link-button.room2-button,
  .room-link-block .room-link-container .room-link-button.room3-button{
    width: 100%; max-width: 20rem;
  }
}

/* =========================
   CHAMBER 2 — Room 2 gateway (card + lunar button)
   Keep HTML as-is: <section class="room-link-block"> ... <a class="room-link-button">...
   ========================= */

/* Card: parchment to match C2 aesthetic (not yellow) */
#chamber-2 .room-link-block {
  background: linear-gradient(180deg, #faf7f3 0%, #eeeae4 100%) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
  border-radius: 16px !important;
}

/* Card text colors to match Chamber 2 typography */
#chamber-2 .room-link-block h2 { color: #1c2e28 !important; font-weight: 700; }
#chamber-2 .room-link-block p  { color: #4a3b2d !important; }

/* Button: Zen Moon lunar shimmer (indigo + silver) */
#chamber-2 .room-link-block .room-link-button{
  background: linear-gradient(135deg, #2c2f5c, #3d4178) !important;
  color: #f2f6ff !important;                         /* moon-white */
  border: 1px solid rgba(234,239,247,0.4) !important;/* silver edge */
  box-shadow: 0 8px 20px rgba(44,47,92,0.35) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4) !important;
}
#chamber-2 .room-link-block .room-link-button:hover{
  background: linear-gradient(135deg, #4950a1, #6c75c7) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(73,80,161,0.55) !important;
}


/* =========================
   CHAMBER 3 — Room 3 gateway (card + diamond/ochre button)
   Keep HTML as-is: <section class="room-link-block"> ... <a class="room-link-button">...
   ========================= */

/* Card: indigo field with inner-light text (high contrast on C3 bg) */
#chamber-3 .room-link-block{
  background: linear-gradient(180deg, #1c1e3a 0%, #2a2d5c 100%) !important;
  border: 1px solid rgba(255,248,225,.22) !important; /* ivory edge */
  box-shadow: 0 14px 34px rgba(0,0,0,.45) !important;
  border-radius: 18px !important;
}
#chamber-3 .room-link-block h2{ color:#fff8e1 !important; font-weight:700; }
#chamber-3 .room-link-block p { color:#f6d365 !important; }

/* Button: diamond inner light (visible, legible), hover → ochre illumination */
#chamber-3 .room-link-block .room-link-button{
  position: relative;
  background: #1a1d3a !important;      /* deep indigo */
  color: #ffffff !important;            /* crisp white for clarity */
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
  border: 2px solid transparent !important;
  border-image-slice: 1 !important;
  border-image-source: linear-gradient(
    90deg, #fff8e1 0%, #f6d365 18%, #fda085 36%, #a1c4fd 60%, #c2e9fb 82%, #fff8e1 100%
  ) !important;                          /* diamond edge */
  box-shadow: 0 12px 28px rgba(0,0,0,.45) !important;
}

/* Facet sheen sweep (subtle) */
#chamber-3 .room-link-block .room-link-button::before{
  content:""; position:absolute; inset:-12% auto -12% -40%; width:42%;
  border-radius: inherit; pointer-events:none; opacity:0;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 28%,
    rgba(255,255,255,.35) 45%,
    rgba(255,255,255,.18) 62%,
    rgba(255,255,255,0) 100%);
  filter: blur(1px);
  transition: opacity .25s ease;
}
@keyframes facetSweep{ 0%{left:-30%;opacity:0} 20%{opacity:.14} 50%{left:65%;opacity:.2} 80%{opacity:.1} 100%{left:130%;opacity:0} }
#chamber-3 .room-link-block .room-link-button:hover::before{ opacity:1; animation:facetSweep 1.8s ease-in-out; }

/* Hover → illumination */
#chamber-3 .room-link-block .room-link-button:hover{
  background:#d8a04d !important;     /* ochre illumination */
  color:#1a1d3a !important;          /* indigo = clarity revealed */
  text-shadow:none !important;
  box-shadow: 0 16px 34px rgba(216,160,77,.55) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #chamber-3 .room-link-block .room-link-button:hover::before{ animation:none !important; }
}

/* === POLISH: Chamber 3 Gateway === */

/* Subtle inner glow inside the card */
#chamber-3 .room-link-block {
  box-shadow: 0 14px 34px rgba(0,0,0,.45),
              inset 0 0 22px rgba(255,248,225,.06); /* faint ivory glow */
}

/* Hover underline for heading in gold tone */
#chamber-3 .room-link-block h2:hover {
  text-decoration: underline;
  text-decoration-color: #f6d365;   /* gold accent */
  text-underline-offset: 3px;
}

/* === FIX: Chamber 2 Gateway === */

/* Parchment card to unify with haiku blocks */
#chamber-2 .room-link-block {
  background: linear-gradient(180deg, #faf7f3 0%, #eeeae4 100%) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
  border-radius: 16px !important;
  max-width: 740px !important;
  margin: 2.25rem auto 2.75rem !important; /* more room before seal */
}

/* Card heading/body text */
#chamber-2 .room-link-block h2 { color: #1c2e28 !important; font-weight: 700; }
#chamber-2 .room-link-block p  { color: #4a3b2d !important; }

/* Lunar button */
#chamber-2 .room-link-block .room-link-button {
  background: linear-gradient(135deg, #2c2f5c, #3d4178) !important;
  color: #f2f6ff !important;
  border: 1px solid rgba(234,239,247,0.4) !important;
  box-shadow: 0 8px 20px rgba(44,47,92,0.35) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4) !important;
}
#chamber-2 .room-link-block .room-link-button:hover {
  background: linear-gradient(135deg, #4950a1, #6c75c7) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(73,80,161,0.55) !important;
}

/* Extra breathing room above the vermillion seal */
#chamber-2 .final-zenmoon-seal {
  margin-top: 28px !important;  /* adjust as needed (24–40px) */
}
/* =========================
   CSS-ONLY TARGETING (no HTML edits)
   ========================= */

/* ——— ROOM 2: Card + Lunar Button ——— */
/* Target the Room 2 gateway card by its heading id */
.room-link-block:has(#room2-title){
  background: linear-gradient(180deg, #faf7f3 0%, #eeeae4 100%) !important; /* parchment */
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
  border-radius: 16px !important;
  max-width: 740px !important;
  margin: 2.25rem auto 2.75rem !important; /* extra floor before red seal */
}

/* Room 2 card text */
.room-link-block:has(#room2-title) h2 { color:#1c2e28 !important; font-weight:700; }
.room-link-block:has(#room2-title) p  { color:#4a3b2d !important; }

/* Lunar button (indigo + silver) */
.room-link-block:has(#room2-title) .room-link-button{
  background: linear-gradient(135deg,#2c2f5c,#3d4178) !important;
  color:#f2f6ff !important;                                  /* moon-white */
  border:1px solid rgba(234,239,247,.4) !important;          /* silver edge */
  box-shadow:0 8px 20px rgba(44,47,92,.35) !important;       /* cool glow */
  text-shadow:0 1px 1px rgba(0,0,0,.4) !important;           /* readability */
}
.room-link-block:has(#room2-title) .room-link-button:hover{
  background: linear-gradient(135deg,#4950a1,#6c75c7) !important;
  color:#ffffff !important;
  box-shadow:0 12px 28px rgba(73,80,161,.55) !important;
}

/* Give the red seal that follows more breathing room (safe generic bump) */
.final-zenmoon-seal { margin-top: 28px !important; }


/* ——— ROOM 3: Indigo Card Polish + Diamond Button ——— */
/* Keep the strong indigo card + inner glow for presence */
.room-link-block:has(#room3-title){
  background: linear-gradient(180deg,#1c1e3a 0%,#2a2d5c 100%) !important;
  border:1px solid rgba(255,248,225,.22) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.45),
              inset 0 0 22px rgba(255,248,225,.06) !important;
  border-radius: 18px !important;
}
.room-link-block:has(#room3-title) h2 { color:#fff8e1 !important; font-weight:700; }
.room-link-block:has(#room3-title) p  { color:#f6d365 !important; }

/* Diamond edge + legible text; remove generic outlines */
.room-link-block:has(#room3-title) .room-link-button{
  position:relative;
  background:#1a1d3a !important;
  color:#ffffff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.35) !important;
  border-width:2px !important;
  border-style:solid !important;
  border-color:transparent !important;
  border-image-slice:1 !important;
  border-image-source:linear-gradient(
    90deg,#fff8e1 0%,#f6d365 18%,#fda085 36%,#a1c4fd 60%,#c2e9fb 82%,#fff8e1 100%
  ) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.45) !important;
  outline: none !important;                    /* kill flat white outline */
}
.room-link-block:has(#room3-title) .room-link-button:focus-visible{
  outline:3px solid rgba(255,248,225,.8) !important; outline-offset:2px !important;
}

/* Facet sheen sweep */
.room-link-block:has(#room3-title) .room-link-button::before{
  content:""; position:absolute; inset:-12% auto -12% -40%; width:42%;
  border-radius:inherit; pointer-events:none; opacity:0;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 28%,
    rgba(255,255,255,.35) 45%,
    rgba(255,255,255,.18) 62%,
    rgba(255,255,255,0) 100%);
  filter:blur(1px); transition:opacity .25s ease;
}
@keyframes facetSweep{0%{left:-30%;opacity:0}20%{opacity:.14}50%{left:65%;opacity:.2}80%{opacity:.1}100%{left:130%;opacity:0}}
.room-link-block:has(#room3-title) .room-link-button:hover::before{ opacity:1; animation:facetSweep 1.8s ease-in-out; }

/* Hover → ochre illumination */
.room-link-block:has(#room3-title) .room-link-button:hover{
  background:#d8a04d !important;
  color:#1a1d3a !important;
  text-shadow:none !important;
  box-shadow:0 16px 34px rgba(216,160,77,.55) !important;
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce){
  .room-link-block:has(#room3-title) .room-link-button:hover::before{ animation:none !important; }
}

/* ==== ROOM 2 – Zen Moon (Sumi-Indigo · Consolidated, no :has) ==== */
.room2-block {
  position: relative;
  background: linear-gradient(180deg, #fbfbfd 0%, #f1f2f7 100%);
  border: 1px solid rgba(58,66,90,0.18);
  border-radius: 20px;
  box-shadow:
    0 12px 28px rgba(58,66,90,0.08),
    0 4px 10px rgba(58,66,90,0.05),
    inset 0 1px 0 rgba(255,255,255,0.85);
}

/* soft moon-haze inside the panel */
.room2-block::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(70% 95% at 50% 58%,
              rgba(160,170,210,0.18) 0%, rgba(160,170,210,0) 60%);
}

/* heading & description */
.room2-block h2 {
  color: #3a4670 !important;   /* sumi indigo */
  font-weight: 600;             /* <= fixes the 650 warning */
  letter-spacing: .2px;
}
.room2-block .room-description { color: #2b334a; }

/* button */
.room2-block .room-link-button.room2-button {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;             /* <= fixes the 650 warning */
  font-size: 1rem; letter-spacing: .2px;
  text-decoration: none; cursor: pointer; overflow: hidden;

  background: linear-gradient(180deg, #515a79 0%, #394160 100%); /* sumi indigo */
  color: #f7f8fc;
  border: 1px solid rgba(81,90,121,0.50);
  box-shadow:
    0 12px 28px rgba(41,48,73,0.28),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(41,48,73,0.32);
  transition: transform 160ms ease, box-shadow 220ms ease, background 240ms ease;
  animation: gatewayPulse 1800ms ease-out 1 both;
}

/* lunar halo + sheen */
.room2-block .room-link-button.room2-button::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 90% at 50% 55%,
             rgba(160,170,210,0.22) 0%, rgba(160,170,210,0) 60%);
  filter: blur(2px);
}
.room2-block .room-link-button.room2-button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(130deg, rgba(255,255,255,0) 0%,
                                        rgba(255,255,255,0.22) 45%,
                                        rgba(255,255,255,0) 60%);
  background-size: 220% 220%; background-position: -120% -120%;
  transition: background-position 520ms ease;
}
.room2-block .room-link-button.room2-button:hover::after { background-position: 120% 120%; }

/* hover / active / focus */
.room2-block .room-link-button.room2-button:hover {
  transform: translateY(-1px) scale(1.01);
  background: linear-gradient(180deg, #5b6688 0%, #404970 100%);
  box-shadow:
    0 16px 36px rgba(41,48,73,0.34),
    0 0 20px rgba(160,170,210,0.34),
    inset 0 1px 0 rgba(255,255,255,0.30);
}
.room2-block .room-link-button.room2-button:active {
  transform: translateY(0);
  background: linear-gradient(180deg, #4f5878 0%, #3a4167 100%);
  box-shadow:
    0 10px 22px rgba(41,48,73,0.28),
    inset 0 1px 0 rgba(255,255,255,0.26);
}
.room2-block .room-link-button.room2-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px #6d7bb8,
    0 0 20px rgba(160,170,210,0.40),
    0 16px 36px rgba(41,48,73,0.32);
}

/* motion respect */
@media (prefers-reduced-motion: reduce){
  .room2-block .room-link-button.room2-button,
  .room2-block::before { transition: none !important; animation: none !important; }
}


/* Room 2 card pop — subtle outline, deeper soft shadow, gentle cool tint */
.room2-block{
  position: relative; /* ensure pseudo works */
  z-index: 0;
  /* slightly cooler pearl so it separates from white */
  background: linear-gradient(180deg, #f6f8fb 0%, #e8ecf6 100%) !important;
  /* hair stronger edge */
  border-color: rgba(58,66,90,0.28) !important;
  /* more lift, but still soft */
  box-shadow:
    0 18px 42px rgba(58,66,90,0.14),
    0 6px 16px rgba(58,66,90,0.10),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 0 0 1px rgba(58,66,90,0.06) !important; /* hairline inner rim */
}

/* Outer aura behind the card to lift it off white background */
.room2-block::after{
  content:"";
  position:absolute;
  inset:-6px;                 /* sits just outside the card */
  border-radius: 24px;        /* match card rounding */
  background: radial-gradient(80% 120% at 50% 0%,
              rgba(58,66,90,0.12) 0%,
              rgba(58,66,90,0) 60%);
  filter: blur(8px);
  z-index:-1;                 /* behind the card */
}

/* Room 2 card – micro pop */
.room2-block{
  border-color: rgba(58,66,90,0.32) !important;  /* hair crisper edge */
  box-shadow:
    0 22px 52px rgba(58,66,90,0.16),
    0 8px 20px rgba(58,66,90,0.10),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 0 0 1px rgba(58,66,90,0.08) !important;
}
.room2-block::after{
  inset: -8px;                                  /* slightly wider aura */
  filter: blur(10px);
  background: radial-gradient(80% 120% at 50% 0%,
              rgba(58,66,90,0.14) 0%, rgba(58,66,90,0) 60%);
}