/*
 * Space/galaxy theme for the Hab screens ([geniusgen_hab] shortcode:
 * Log Masuk, Pemilih Anak, Senarai Game, Dashboard Progress). Reuses the
 * exact palette + gradients already designed and tested in the Math
 * Galaxy game (math/index.php's #access-screen, which was the game's own
 * pre-Hub access-code screen — its HTML was removed when the Hub took
 * over gating, but the CSS was never deleted). Scoped entirely under
 * .geniusgen-hab-status so it can't leak into the rest of the site.
 */

/*
 * The space gradient below is applied to body.geniusgen-hab-page (further
 * down this file), not to .geniusgen-hab-status itself — a full 100vh+
 * body is what makes the 165deg purple-to-blue sweep actually read as an
 * ombre; confined to the shorter wrapper box alone it visually compressed
 * into "just dark purple". .geniusgen-hab-status is a plain transparent
 * flow container here so the body gradient shows through on every screen,
 * including the space below short content (e.g. the login card) and past
 * the end of tall content (e.g. Dashboard with several children).
 */
.geniusgen-hab-status {
  font-family: 'Nunito', sans-serif;
  color: rgba(255,255,255,0.92);
  min-height: 60vh;
  padding: 2.5rem 1.25rem;
  text-align: center;
  position: relative;
}

/* 🌐 BM/EN toggle — top-right corner on every Hab screen, same corner
   position as Math Galaxy's own language toggle (math/index.php), which
   this is deliberately styled to match even though it's a separate,
   independent toggle (Math Galaxy's own BM/EN state is untouched by this). */
.geniusgen-hab-lang-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.9);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  text-decoration: none;
  transition: background 0.15s;
}
.geniusgen-hab-lang-toggle:hover { background: rgba(255,255,255,0.22); }
@media (max-width: 600px) {
  .geniusgen-hab-lang-toggle {
    top: 10px;
    right: 10px;
    padding: 5px 11px;
    font-size: 0.72rem;
  }
}

.geniusgen-hab-stars {
  position: absolute; inset: 0;
  pointer-events: none;
}
.geniusgen-hab-stars .geniusgen-hab-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  animation: geniusgenHabTwinkle 2s infinite alternate;
}
@keyframes geniusgenHabTwinkle { from{opacity:0.2} to{opacity:1} }

/* Large decorative planets/rocket around the Log Masuk card only (this
   markup only exists in geniusgen-hub-masuk-kod.php, not the other 3
   screens) — purely decorative (aria-hidden), positioned near the wrapper
   edges so they never sit under the centred card, and toned down on
   narrow screens so they can't crowd the form on mobile. */
.geniusgen-hab-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.geniusgen-hab-decor span {
  position: absolute;
  display: block;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.geniusgen-hab-decor-ring {
  top: 3%; left: 5%;
  font-size: clamp(3rem, 8vw, 5.5rem);
  opacity: 0.85;
  animation: geniusgenHabSpin 24s linear infinite;
}
.geniusgen-hab-decor-rocket {
  top: 8%; right: 6%;
  font-size: clamp(2.5rem, 7vw, 4rem);
  transform: rotate(35deg);
  opacity: 0.9;
  animation: geniusgenHabFloat 4s ease-in-out infinite;
}
.geniusgen-hab-decor-earth {
  bottom: 6%; left: 8%;
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  opacity: 0.85;
  animation: geniusgenHabFloat 5s ease-in-out infinite;
  animation-delay: 1s;
}
.geniusgen-hab-decor-red {
  bottom: 8%; right: 7%;
  font-size: clamp(2rem, 6vw, 3.2rem);
  opacity: 0.8;
  animation: geniusgenHabFloat 4.5s ease-in-out infinite;
  animation-delay: 0.5s;
}
.geniusgen-hab-decor-moon {
  top: 35%; left: 3%;
  font-size: clamp(1.8rem, 5.5vw, 3rem);
  opacity: 0.8;
  animation: geniusgenHabFloat 5.5s ease-in-out infinite;
  animation-delay: 1.6s;
}
.geniusgen-hab-decor-star {
  top: 42%; right: 4%;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  opacity: 0.85;
  animation: geniusgenHabFloat 4.8s ease-in-out infinite;
  animation-delay: 0.9s;
}
.geniusgen-hab-decor-blue-lower {
  top: 65%; left: 5%;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  opacity: 0.75;
  animation: geniusgenHabFloat 5.2s ease-in-out infinite;
  animation-delay: 0.3s;
}
.geniusgen-hab-decor-ring-lower {
  top: 72%; right: 7%;
  font-size: clamp(2.2rem, 6.5vw, 3.6rem);
  opacity: 0.75;
  animation: geniusgenHabSpin 30s linear infinite reverse;
}
@keyframes geniusgenHabSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes geniusgenHabFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Large faint math-symbol characters (text, not emoji) sharing the same
   decor layer — sit behind the opaque white card (z-index:0 vs card's 1)
   so they only actually show in the space around it, not "through" it. */
.geniusgen-hab-decor-symbol {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 7vw, 5rem);
  filter: none;
}
.geniusgen-hab-decor-symbol-plus  { top: 16%; left: 18%; color: rgba(255,255,255,0.18); }
.geniusgen-hab-decor-symbol-times { top: 20%; right: 20%; color: rgba(252,211,77,0.18); }
.geniusgen-hab-decor-symbol-minus { bottom: 24%; left: 20%; color: rgba(255,255,255,0.18); }
.geniusgen-hab-decor-symbol-div   { bottom: 20%; right: 18%; color: rgba(252,211,77,0.18); }
.geniusgen-hab-decor-symbol-eq    { top: 55%; left: 11%; color: rgba(255,255,255,0.15); }
.geniusgen-hab-decor-symbol-plus-lower  { top: 62%; right: 22%; color: rgba(252,211,77,0.16); }
.geniusgen-hab-decor-symbol-times-lower { top: 78%; left: 24%; color: rgba(255,255,255,0.16); }
.geniusgen-hab-decor-symbol-eq-lower    { top: 82%; left: 48%; color: rgba(252,211,77,0.14); }

@media (max-width: 600px) {
  .geniusgen-hab-decor-ring,
  .geniusgen-hab-decor-rocket {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
    opacity: 0.5;
  }
  .geniusgen-hab-decor-earth,
  .geniusgen-hab-decor-red,
  .geniusgen-hab-decor-moon,
  .geniusgen-hab-decor-star,
  .geniusgen-hab-decor-blue-lower,
  .geniusgen-hab-decor-ring-lower {
    font-size: clamp(1.4rem, 7vw, 2rem);
    opacity: 0.4;
  }
  .geniusgen-hab-decor-symbol {
    font-size: clamp(2rem, 12vw, 3rem);
  }
}

.geniusgen-hab-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  color: #FCD34D;
  text-shadow: 0 4px 0 rgba(0,0,0,0.3);
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
}
.geniusgen-hab-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin-bottom: 1.6rem;
  position: relative;
  z-index: 1;
}

.geniusgen-hab-card {
  background: #FFFFFF;
  color: #1E1B4B;
  border-radius: 20px;
  padding: 1.8rem 1.5rem;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  position: relative;
  z-index: 1;
  text-align: left;
}
.geniusgen-hab-card.geniusgen-hab-card--wide { max-width: 560px; }
.geniusgen-hab-card h3 { font-family: 'Fredoka One', cursive; color: #1E1B4B; margin-bottom: 10px; }
.geniusgen-hab-status .geniusgen-hab-card a { color: #7C3AED; }

.geniusgen-hab-game-section { margin-bottom: 20px; }
.geniusgen-hab-game-section:last-child { margin-bottom: 0; }
.geniusgen-hab-section-heading {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  color: #1E1B4B;
  margin-bottom: 10px;
}
/* Grid kad game — GRID (bukan flex-wrap) dengan lebar kad "auto" (bukan
   fixed 160px) supaya 2 lajur SENTIASA muat pada mobile tak kira lebar
   sebenar container selepas tolak padding .geniusgen-hab-status/.card;
   flex-wrap + fixed-width dulu boleh jatuh ke 1 lajur bila ruang tak
   cukup utk 2×(160px+padding)+gap. Dari 480px ke atas, tukar balik ke
   auto-fill 160px supaya kekal 2-3 kad/baris macam desktop asal. */
.geniusgen-hab-game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  /* Kad "cover image" (Math Galaxy) jauh lebih tinggi dari kad emoji biasa —
     tanpa ni, grid stretch semua kad dalam baris yang sama ke tinggi kad
     paling tinggi, jadi kad pendek nampak ada ruang kosong janggal kat bawah. */
  align-items: start;
}
@media (min-width: 480px) {
  .geniusgen-hab-game-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
}
.geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-game-card {
  display: block;
  width: auto;
  min-width: 0;
  padding: 16px;
  border: 2px solid #ddd;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.geniusgen-hab-game-icon { font-size: 2.5rem; }
/* Kad "cover image" (Math Galaxy) — gambar penuh lebar di atas kad, teks di
   bawah dalam .geniusgen-hab-game-card-body, bukan ikon kecil di tengah. */
.geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-game-card.geniusgen-hab-game-card--cover {
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.geniusgen-hab-game-cover-img {
  display: block;
  width: 100%;
  height: auto;
  /* Sengaja TIADA max-height — gambar sumber ni potret (nisbah lebih tinggi
     dari lebar), jadi mana-mana max-height yang lebih kecil dari tinggi
     semula jadi pada lebar kad akan buat object-fit:contain letterbox
     (jalur kosong kiri/kanan). Diuji: max-height:240px nampak okay di
     desktop tapi jelas berjurang di mobile (~16% lebar kad). height:auto
     tanpa had ni yang paling boleh dipercayai untuk papar gambar PENUH
     tanpa jurang merentasi semua lebar kad. */
  object-fit: contain;
  background: #F3F0FF;
  border-radius: 10px 10px 0 0;
}
.geniusgen-hab-game-card-body {
  padding: 12px 14px 16px;
  text-align: center;
}
.geniusgen-hab-game-nama { font-weight: 700; margin-top: 6px; }
.geniusgen-hab-game-badge {
  display: inline-block;
  margin-top: 6px;
  margin-right: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #F3F0FF;
  color: #7C3AED;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: .3px;
}
.geniusgen-hab-game-nota {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #8B8AA3;
  line-height: 1.3;
  min-height: 2.6em;
}
/* Skrin sangat sempit (contoh 320px) — 2 kad masih muat, tapi padding &
   ikon default jadi terlalu besar berbanding ruang tersedia; kecilkan
   sikit supaya teks/badge/nota tak sesak atau overflow. */
@media (max-width: 400px) {
  .geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-game-card {
    padding: 10px 8px;
  }
  .geniusgen-hab-game-icon { font-size: 2rem; }
  .geniusgen-hab-game-card-body { padding: 10px 10px 12px; }
  .geniusgen-hab-game-nama { font-size: 0.85rem; }
  .geniusgen-hab-game-badge { font-size: 0.62rem; padding: 2px 8px; }
  .geniusgen-hab-game-nota { font-size: 0.62rem; }
}
.geniusgen-hab-status .geniusgen-hab-card .geniusgen-hab-game-section--exam a.geniusgen-hab-game-card {
  background: #FBF9FF;
  border-color: #DCC9FB;
}

.geniusgen-hab-card p { margin-bottom: 14px; }
.geniusgen-hab-card label {
  display: block;
  font-weight: 800;
  font-size: 0.85rem;
  color: #1E1B4B;
  margin-bottom: 6px;
}

.geniusgen-hab-card input[type="text"],
.geniusgen-hab-card input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 3px solid rgba(124,58,237,0.15);
  border-radius: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1E1B4B;
  outline: none;
  transition: border-color 0.2s;
}
.geniusgen-hab-card input[type="text"]:focus,
.geniusgen-hab-card input[type="email"]:focus {
  border-color: #7C3AED;
}

.geniusgen-hab-card button[type="submit"] {
  background: #7C3AED;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 13px;
  font-size: 0.95rem;
  font-weight: 900;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 4px 0 #4C1D95;
  transition: all 0.15s;
}
.geniusgen-hab-card button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #4C1D95; }
.geniusgen-hab-card button[type="submit"]:active { transform: translateY(2px); box-shadow: 0 2px 0 #4C1D95; }

/* existing-anak "pick yourself" buttons on Skrin Pemilih Anak — same pill
   shape as the primary button but a lighter fill, so it doesn't compete
   visually with the main "Tambah & Pilih" submit */
.geniusgen-hab-card button[type="submit"].geniusgen-hab-btn-anak {
  background: #F3F0FF;
  color: #7C3AED;
  border: 2px solid #A78BFA;
  border-radius: 50px;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  width: auto;
  display: inline-block;
  box-shadow: none;
  margin: 0 6px 8px 0;
  transition: all 0.15s;
}
.geniusgen-hab-card .geniusgen-hab-btn-anak:hover { background: #A78BFA; color: white; }

/* Navigation buttons on Senarai Game / Dashboard (Dashboard Progress,
   Tukar Anak, Balik ke Senarai Game) — pill-shaped like the form buttons,
   not plain text links. Solid = the "forward" action on that screen;
   outline = a secondary/"back" action, so multiple buttons on one screen
   stay visually distinguishable. */
.geniusgen-hab-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-btn,
.geniusgen-hab-status .geniusgen-hab-card button.geniusgen-hab-btn {
  display: inline-block;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-btn-solid {
  background: #7C3AED;
  color: white;
  box-shadow: 0 4px 0 #4C1D95;
}
.geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #4C1D95; }
.geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-btn-outline {
  background: transparent;
  color: #7C3AED;
  border: 2px solid #A78BFA;
}
.geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-btn-outline:hover { background: #F3F0FF; }
.geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-btn-gold {
  background: linear-gradient(180deg, #FFE28A, #FCD34D);
  color: #1E1B4B;
  box-shadow: 0 4px 0 #F59E0B;
}
.geniusgen-hab-status .geniusgen-hab-card a.geniusgen-hab-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #F59E0B; }
.geniusgen-hab-status .geniusgen-hab-card button.geniusgen-hab-btn-danger {
  background: transparent;
  color: #EF4444;
  border: 2px solid rgba(239,68,68,0.4);
  font-size: 0.8rem;
  padding: 8px 16px;
}
.geniusgen-hab-status .geniusgen-hab-card button.geniusgen-hab-btn-danger:hover { background: #FEF2F2; }

/* Small icon-only delete button inline in each session-history table row —
   a custom inline SVG trash-can (not the 🗑️ emoji, which renders as a
   blurry/unclear glyph depending on platform/font — an SVG looks identical
   on every device/browser). Solid yellow circle, black icon, per explicit
   design request. */
.geniusgen-hab-card button[type="submit"].geniusgen-hab-row-delete-btn {
  background: #FCD34D;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  box-shadow: none;
  transition: all 0.15s;
}
.geniusgen-hab-card button[type="submit"].geniusgen-hab-row-delete-btn:hover { background: #F59E0B; transform: scale(1.08); }
.geniusgen-hab-card button[type="submit"].geniusgen-hab-row-delete-btn:active { background: #F59E0B; transform: scale(0.95); box-shadow: none; }
.geniusgen-hab-row-delete-btn svg { width: 15px; height: 15px; display: block; }

/* Info box for the first-use parent-contact fields on Skrin Pemilih Anak —
   replaces one long run-on sentence with a small tidy card-within-a-card. */
.geniusgen-hab-info-box {
  background: #F3F0FF;
  border: 2px solid #E4DCFF;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.geniusgen-hab-info-box-title {
  font-weight: 900;
  color: #4C1D95;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.geniusgen-hab-info-box-sub {
  font-size: 0.82rem;
  color: #6B5B95;
  font-weight: 600;
  margin-bottom: 12px;
}
.geniusgen-hab-info-box p:last-child { margin-bottom: 0; }

/* Dashboard Progress — each child's card gets a stable accent colour from
   a fixed 5-colour cycle (index % 5) so multiple children are easy to
   tell apart at a glance. Background uses a very pale tint (8% alpha) of
   the same colour — not solid — so the dark navy text/table stay
   comfortably readable; the left border stays fully saturated for a
   clear visual anchor. */
.geniusgen-hab-anak-card {
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 6px solid #ccc;
  border-radius: 12px;
  padding: 14px;
  margin-top: 14px;
}
/* Session-history table — wrapped so it scrolls WITHIN its own bounds on
   narrow screens instead of overflowing the card (which used to make the
   row-delete button look like it was floating/overlapping content below
   it — that was actually the table spilling out uncontained, not the
   button itself being mispositioned). min-width on the table (set inline
   above) keeps columns legible instead of being crushed; this wrapper is
   what turns that overflow into a contained, scrollable area. */
.geniusgen-hab-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.geniusgen-hab-table-hint {
  display: none;
  font-size: 0.75rem;
  color: #888;
  text-align: center;
  margin: 4px 0 0;
}
@media (max-width: 600px) {
  .geniusgen-hab-table-hint { display: block; }
}
.geniusgen-hab-anak-color-0 { background: rgba(59,130,246,0.08); border-left-color: #3B82F6; }
.geniusgen-hab-anak-color-1 { background: rgba(236,72,153,0.08); border-left-color: #EC4899; }
.geniusgen-hab-anak-color-2 { background: rgba(16,185,129,0.08); border-left-color: #10B981; }
.geniusgen-hab-anak-color-3 { background: rgba(245,158,11,0.08); border-left-color: #F59E0B; }
.geniusgen-hab-anak-color-4 { background: rgba(20,184,166,0.08); border-left-color: #14B8A6; }

.geniusgen-hab-error {
  background: #FEF2F2;
  border: 2px solid #EF4444;
  color: #B91C1C;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 14px;
}

.geniusgen-hab-status a { color: #FCD34D; }

/*
 * Full-canvas look for the Hab: hide the Astra theme's site header/nav
 * (confirmed live: <header id="masthead" class="site-header">, contains
 * both the desktop and mobile menus), the default WP page-title bar
 * (<header class="entry-header"><h1 class="entry-title">...) which just
 * duplicated the page's own title and clashed with the space theme below
 * it, and the theme footer (<footer id="colophon" class="site-footer">,
 * "Copyright ... Powered by Astra"). Scoped to body.geniusgen-hab-page
 * only (added by PHP only on pages containing [geniusgen_hab]) — every
 * other page (Shop, Cart, My Account) keeps its normal header/footer.
 */
body.geniusgen-hab-page #masthead,
body.geniusgen-hab-page .entry-header,
body.geniusgen-hab-page #colophon {
  display: none;
}

/*
 * Full-page space background — deliberately an even 50/50 purple-to-blue
 * split (0-50% stays in the purple family up through violet #5B21B6,
 * 50-100% moves through indigo into a clearly-blue #3B82F6), not just a
 * hint of blue at the edge. The 3 radial glows are still the ones copied
 * from Math Galaxy's #home-screen for texture/consistency.
 */
/*
 * WordPress's own admin toolbar (#wpadminbar) is fixed at the top of the
 * page, and on screens ≤782px WP core deliberately does NOT push page
 * content down for it (only desktop gets that margin-top) — so on mobile
 * it overlays whatever's at the very top of the page instead. Real site
 * visitors never see this (they're never logged into wp-admin), but an
 * admin testing on their own phone would see the Hab title sit right
 * under/behind the toolbar. Compensating only when body.admin-bar is
 * present, only at that same ≤782px breakpoint, so paying-customer
 * visitors' spacing is completely untouched.
 */
@media (max-width: 782px) {
  body.admin-bar.geniusgen-hab-page .geniusgen-hab-status {
    padding-top: calc(2.5rem + 46px);
  }
}

/*
 * Unconditional extra breathing room at the very top on narrow/mobile
 * screens, regardless of admin-bar state — a safety margin in case the
 * admin-bar rule above isn't the full story (e.g. a stale per-URL cache,
 * a device safe-area/notch, or some other cause not yet confirmed). Also
 * covers env(safe-area-inset-top) for real iOS devices with a notch/
 * Dynamic Island, which resolves to 0 (no effect) everywhere else.
 */
@media (max-width: 600px) {
  .geniusgen-hab-status {
    padding-top: calc(3.5rem + env(safe-area-inset-top, 0px));
  }
}

body.geniusgen-hab-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(236,72,153,0.28), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(124,58,237,0.4), transparent 46%),
    radial-gradient(circle at 90% 80%, rgba(45,212,191,0.14), transparent 40%),
    linear-gradient(165deg, #05060F 0%, #2E1065 25%, #5B21B6 50%, #4338CA 68%, #2563EB 84%, #3B82F6 100%);
  min-height: 100vh;
}