/* === Global Background === */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }

body {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
  background-color: #000;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Floating wallpaper image - fits screen with black background */
/* Only show on pages that need it (not welcome page which has its own) */
body:not(.welcome-page)::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 1400px;
  height: 90vh;
  max-height: 900px;
  background-image: url('/static/story_chip.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.1));
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* --- Navbar / taskbar --- */
.navbar {
  position: fixed !important;
  inset-inline: 0;
  top: 0;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: margin-top 160ms ease;
  visibility: visible !important;
  opacity: 1 !important;
}
.navbar.collapsed { margin-top: -62px; }

#navbar-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 9999;
}

.nav-left { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; }
.brand { font-weight: 800; letter-spacing: .3px; opacity: .95; }

/* Tabs */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  appearance: none;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.10);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tab:hover {
  background: rgba(255,255,255,0.18);
}

/* ✨ Active Tab Glow Style */
.tab[aria-selected="true"],
.tab-highlight,
.tab-highlight[aria-selected="true"] {
  background-color: #f4f0ff;     /* soft purple */
  border: 1px solid #8b5cf6;     /* accent border */
  color: #4c1d95;               /* deep purple text */
  font-weight: bold;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.tab[aria-selected="true"]:hover,
.tab-highlight:hover,
.tab-highlight[aria-selected="true"]:hover {
  background-color: #ede9fe;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.8);
}

/* Toggle button */
.nav-toggle {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.10);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255,255,255,0.18); }

/* Page content wrapper */
.content {
  position: relative;
  z-index: 1;
  padding: 110px 16px 60px;
  max-width: 1200px;
  margin: 0 auto;
  background: transparent;
}
.content.compact { padding-top: 42px; }

/* HERO section */
.hero {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 140px);
  text-align: center;
}

/* Glass card */
.card {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  max-width: 900px;
  width: min(92vw, 900px);
}

/* Title + accent */
.hero-title {
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 12px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.hero-title .accent { font-size: 0.9em; }

/* Subtext */
.hero-sub {
  margin: 0 0 8px;
  opacity: .95;
}

/* Section headings */
h2 { margin: 6px 0 12px; text-shadow: 0 1px 10px rgba(0,0,0,0.35); }

/* Responsive */
@media (max-width: 640px) {
  .brand { display: none; }
  .tabs { flex: 1 1 auto; overflow-x: auto; }
}

/* === Family Media styles === */
.media-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0;padding:0}
.media-card{background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.media-thumb{width:100%;aspect-ratio:16/9;background:rgba(0,0,0,.25);display:grid;place-items:center}
.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover}
.media-meta{padding:10px;display:grid;gap:6px}
.media-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-caption{font-size:12px;opacity:.85}
.media-download{font-size:13px;color:#4ab0f7;text-decoration:underline;width:fit-content}
.add-btn{background:#4f46e5;color:#fff;border:none;padding:8px 14px;border-radius:8px;cursor:pointer;transition:background .15s,transform .05s}
.add-btn:hover{background:#4338ca}.add-btn:active{transform:translateY(1px)}

/* === Mobile Navbar === */
.navbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:50;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.brand{font-weight:700;opacity:.95}
.hamburger{margin-left:auto;display:none;flex-direction:column;gap:4px;background:transparent;border:none;cursor:pointer}
.hamburger span{width:22px;height:2px;background:#fff;display:block;border-radius:2px;transition:transform .2s,opacity .2s}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-links{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.tab{background:#1f2937;color:#fff;border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:999px;cursor:pointer}
.tab.active{background:#4f46e5}
@media (max-width:768px){
  .hamburger{display:flex}
  .nav-links{position:absolute;left:10px;right:10px;top:56px;background:rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;display:none;flex-direction:column;gap:8px}
  .nav-links.open{display:flex}
}

/* NavBar header placement */
.navbar{position:sticky; top:0; z-index:50; width:100%;}
main{ margin-top: 10px; } /* space under header */

/* Single header placement */
.navbar{position:sticky; top:0; z-index:50; width:100%;}
main{ margin-top: 10px; }
/* One NavBar header */
.navbar{position:sticky; top:0; z-index:50; width:100%;}
main{ margin-top: 10px; }
/* One NavBar header final */
.navbar{position:sticky; top:0; z-index:50; width:100%;}
main{ margin-top: 10px; }

/* Old wallpaper section removed - using floating image in body::after instead */


/* __HERO_GREETING_STYLES__ */
.hero{display:flex;justify-content:center;align-items:flex-start;padding:6vh 16px}
.hero-card{
  max-width:1100px;width:100%;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);border-radius:16px;
  backdrop-filter: blur(6px); padding:28px 24px; color:#fff
}
.hero-title{font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 8px 0;font-weight:800}
.accent{color:#c7b9ff}
.hero-subtitle{opacity:.95;margin:0;font-size:clamp(14px,1.8vw,18px)}
/* __HERO_GREETING_STYLES__ */

/* __SIMPLE_GREETING_HELPERS__ */
.accent{color:#c7b9ff}
.hero-sub{opacity:.95;margin:4px 0 0 0;font-size:clamp(14px,1.8vw,18px)}
/* __SIMPLE_GREETING_HELPERS__ */