/* ==========================
HIDDEN ROOMS (hidden.css) — CLEAN DROP-IN
Safe prefix: fr-hr-*
Dark / red glow aesthetic.
Works with your current HTML:
- <article class="fr-hr-card fr-hr-bg-1 ...">
- <div class="fr-hr-overlay"></div>
- <div class="fr-hr-top"> ... </div>
- <div class="fr-hr-inner"> ... </div>
- <a class="fr-hr-veil ..."> ... </a> (only when locked)
Unlocked images are handled INLINE on the <article> (recommended).
========================== */

/* Section */
.fr-hiddenrooms{ margin: 2.5rem 0; }
.fr-hr-head{ margin-bottom: 1rem; }
.fr-hr-title{
  margin:0 0 .25rem 0;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:1rem;
  color:#d6d6d6;
}
.fr-hr-sub{
  margin:0;
  font-size:.9rem;
  color:#bdbdbd;
  opacity:.75;
}

/* Grid */
.fr-hr-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 991px){
  .fr-hr-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px){
  .fr-hr-grid{ grid-template-columns: 1fr; }
}

/* Card base */
.fr-hr-card{
  position:relative;
  overflow:hidden;
  border-radius:0;
  min-height:260px;
  border:0 solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transform: translateZ(0);

  /* background baseline */
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

@supports (aspect-ratio: 4 / 3){
  .fr-hr-card{ aspect-ratio: 4 / 3; min-height:auto; }
}

/* Locked backgrounds (gradients) */
.fr-hr-bg-1{
  background:
    radial-gradient(700px 280px at 20% 30%, rgba(255,0,60,.18), transparent 60%),
    linear-gradient(180deg, #0c101b, #0c101b);
}
.fr-hr-bg-2{
  background:
    radial-gradient(700px 280px at 65% 25%, rgba(255,0,60,.16), transparent 60%),
    linear-gradient(180deg, #0c101b, #070a10);
}
.fr-hr-bg-3{
  background:
    radial-gradient(700px 280px at 35% 70%, rgba(255,0,60,.15), transparent 60%),
    linear-gradient(180deg, #0c101b, #070a10);
}
.fr-hr-bg-4{
  background:
    radial-gradient(700px 280px at 80% 60%, rgba(255,0,60,.14), transparent 60%),
    linear-gradient(180deg, #0c101b, #070a10);
}
.fr-hr-bg-5{
  background:
    radial-gradient(700px 280px at 25% 45%, rgba(255,0,60,.17), transparent 60%),
    linear-gradient(180deg, #0c101b, #070a10);
}

/* Overlay vignette */
.fr-hr-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.62)),
    radial-gradient(circle at 50% 35%, transparent 0%, rgba(0,0,0,.55) 72%);
  opacity:.95;
  pointer-events:none;
}

/* Top row */
.fr-hr-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px 0 12px;
}

/* Inner text */
.fr-hr-inner{
  position:relative;
  z-index:2;
  padding:14px 16px 16px;
  height: calc(100% - 44px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
}
.fr-hr-room{
  margin:0;
  color:#f0f0f0;
  font-size:1.05rem;
  line-height:1.2;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.fr-hr-desc{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:.92rem;
  line-height:1.35;
}
.fr-hr-preview{
  margin:0;
  font-size:.85rem;
  color:rgba(255,255,255,.72);
  opacity:.9;
  border-left: 2px solid rgba(255,0,60,.35);
  padding-left:10px;
}

/* Locked veil (login overlay link) */
.fr-hr-veil{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
  text-decoration:none;
}
.fr-hr-veil:focus{ outline:none; }

.fr-hr-lock{
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 18px rgba(255,0,60,.20);
}
.fr-hr-veiltext{
  font-size:.9rem;
  color:rgba(255,255,255,.82);
  letter-spacing:.02em;
}

/* Hover “breath” */
.fr-hr-card:hover{
  border-color: rgba(255,0,60,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

/* Status label */
.fr-hr-status{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.fr-hr-status::before{ content:""; }

/* ==========================
UNLOCKED (inline background)
You said the inline background works everywhere.
So hidden.css only needs to:
- hide the veil
- optionally soften the overlay if the card has an inline image
========================== */

/* Hide veil when unlocked */
.fr-hr-card.fr-hr-unlocked .fr-hr-veil{
  display:none !important;
}

/* Optional: soften vignette when unlocked images are present
   (works whether you set an inline background or use --fr-hr-img) */
.fr-hr-card.fr-hr-unlocked[style] .fr-hr-overlay{
  opacity:.78;
}
.bm-egg{
  display:none;                 /* JS reveals it */
  opacity:.38;
  cursor:pointer;
  user-select:none;
  font-size:14px;
  letter-spacing:.02em;
  color:rgba(199,203,209,.9);
  margin-right:6px;
  pointer-events:auto !important;
  position:relative;
  z-index:2;
}

.bm-egg:hover{
  opacity:.7;
  text-decoration:underline;
  text-decoration-color: rgba(255,23,68,.45);
}

.bm-egg-found{
  opacity:.45;
  font-size:14px;
  color:rgba(199,203,209,.9);
  text-decoration:none;
  margin-right:6px;
}

.bm-egg-found:hover{
  opacity:.8;
  color:#ff1744;
}

.bm-egg-pop{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:2147483647;
  background:rgba(12,16,27,.95);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 40px rgba(0,0,0,.65);
  color:#c7cbd1;
  padding:12px 14px;
  border-radius:12px;
  font-size:13px;
  max-width:92vw;
  display:flex;
  align-items:center;
  gap:10px;
}

.bm-egg-pop a{
  color:#ff1744;
  text-decoration:none;
  white-space:nowrap;
}
.bm-egg-pop a:hover{ text-decoration:underline; }

.bm-egg-pop button{
  background:transparent;
  border:0;
  color:#c7cbd1;
  opacity:.7;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:0 2px;
}
.bm-egg-pop button:hover{ opacity:1; }
/* Make the sidebar itself the scroll container */
.main-sidebar.fixed .sidebar{
  height: 100vh;                 /* important: gives it a scrollable box */
  overflow-y: auto !important;   /* ensure it can scroll */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Ensure the injected container doesn't collapse */
#include-aside{
  display: block;
}