/* ============================================================================
   Baseline Home — dominant homepage contract
   Build: EDIT_VERSION_20260607_INDEX_AUTH_FLYOUT_ANCHOR_FIX

   One owner for:
   - first index panel: Food / Massage / Skincare
   - second index panel: Badminton / Fitness / Games
   - desktop: one visible panel at a time, equal three-column layout
   - mobile: all six cards scroll vertically as full-width bands
   ============================================================================ */

:root{
  --bg:#e9e7e2;
  --text:#2b2b28;
  --muted:#6a6760;
  --stroke:rgba(0,0,0,.08);
  --shadow:0 8px 22px rgba(0,0,0,.14);
  --r:22px;
  --pad:24px;

  --food-deep:#b11226;
  --food-red:#e6392f;
  --food-orange:#f08a24;
  --food-gold:#ffb000;
  --food-yellow:#ffd26a;

  --massage-deep:#6f4e36;
  --massage-mid:#805d42;
  --massage-soft:#916d4f;
  --massage-tan:#a58363;

  --skin-deep:#b8644d;
  --skin-peach:#cf8167;
  --skin-wash:#dc9f88;
  --skin-milk:#e1ad9b;
  --skin-cream:#e8c1b2;

  --bad-red:#6a1fb3;
  --bad-purple:#c29cff;
  --bad-orange:#f08b2f;
  --bad-yellow:#ffd76c;

  --games-deep:#3B466E;
  --games-mid:#68728D;
  --games-soft:#A6A4A4;
  --games-tan:#E4D8C4;
  --games-ink:#182033;

  --index-card-w:320px;
  --index-card-h:260px;
  --index-card-pad-y:28px;
  --index-card-pad-x:22px;
  --index-card-title:24px;
  --index-card-copy:18px;
  --index-card-line:1.46;

  --index-page1-bg:linear-gradient(90deg,
    var(--food-deep) 0%,
    var(--food-orange) 8.333%,
    var(--food-yellow) 16.666%,
    var(--food-orange) 25%,
    var(--food-deep) 33.333%,

    var(--massage-deep) 33.333%,
    var(--massage-mid) 39.333%,
    var(--massage-soft) 45.333%,
    var(--massage-tan) 50%,
    var(--massage-soft) 54.666%,
    var(--massage-mid) 60.666%,
    var(--massage-deep) 66.666%,

    var(--skin-deep) 66.666%,
    var(--skin-peach) 72%,
    var(--skin-wash) 77.333%,
    var(--skin-milk) 81.333%,
    var(--skin-cream) 83.333%,
    var(--skin-milk) 85.333%,
    var(--skin-wash) 89.333%,
    var(--skin-peach) 94.666%,
    var(--skin-deep) 100%
  );

  --index-page2-bg:linear-gradient(90deg,
    var(--bad-red) 0%,
    var(--bad-purple) 6%,
    var(--bad-orange) 12%,
    var(--bad-yellow) 16.666%,
    var(--bad-orange) 21.333%,
    var(--bad-purple) 27.333%,
    var(--bad-red) 33.333%,

    #000000 33.333%,
    #100f12 36%,
    #221216 40%,
    #45151d 44%,
    #701725 48%,
    #9b1a2d 49.5%,
    var(--food-deep) 50%,
    #9b1a2d 50.5%,
    #701725 52%,
    #45151d 56%,
    #221216 60%,
    #100f12 64%,
    #000000 66.666%,

    var(--games-deep) 66.666%,
    var(--games-mid) 72.666%,
    var(--games-soft) 78.666%,
    var(--games-tan) 83.333%,
    var(--games-soft) 88%,
    var(--games-mid) 94%,
    var(--games-deep) 100%
  );

  --food-card-bg:linear-gradient(90deg,
    var(--food-deep) 0%,
    var(--food-orange) 25%,
    var(--food-yellow) 50%,
    var(--food-orange) 75%,
    var(--food-deep) 100%
  );

  --massage-card-bg:linear-gradient(90deg,
    var(--massage-deep) 0%,
    var(--massage-mid) 18%,
    var(--massage-soft) 36%,
    var(--massage-tan) 50%,
    var(--massage-soft) 64%,
    var(--massage-mid) 82%,
    var(--massage-deep) 100%
  );

  --skin-card-bg:linear-gradient(90deg,
    var(--skin-deep) 0%,
    var(--skin-peach) 16%,
    var(--skin-wash) 32%,
    var(--skin-milk) 44%,
    var(--skin-cream) 50%,
    var(--skin-milk) 56%,
    var(--skin-wash) 68%,
    var(--skin-peach) 84%,
    var(--skin-deep) 100%
  );

  --badminton-card-bg:linear-gradient(90deg,
    var(--bad-red) 0%,
    var(--bad-purple) 18%,
    var(--bad-orange) 36%,
    var(--bad-yellow) 50%,
    var(--bad-orange) 64%,
    var(--bad-purple) 82%,
    var(--bad-red) 100%
  );

  --fitness-card-bg:linear-gradient(90deg,
    #000000 0%,
    #100f12 8%,
    #221216 18%,
    #45151d 30%,
    #701725 40%,
    #9b1a2d 47%,
    var(--food-deep) 50%,
    #9b1a2d 53%,
    #701725 60%,
    #45151d 70%,
    #221216 82%,
    #100f12 92%,
    #000000 100%
  );

  --games-card-bg:linear-gradient(90deg,
    var(--games-deep) 0%,
    var(--games-mid) 18%,
    var(--games-soft) 36%,
    var(--games-tan) 50%,
    var(--games-soft) 64%,
    var(--games-mid) 82%,
    var(--games-deep) 100%
  );

  --page-bg:var(--index-page1-bg);
}

*{ box-sizing:border-box; }

html[data-app="home"],
body[data-app="home"]{
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

body[data-app="home"]{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size:20px;
  background:var(--index-page1-bg);
  background-size:100% 100%;
  background-attachment:fixed;
}

.bl-top-header{
  flex:0 0 auto;
  width:100%;
  position:relative;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px var(--pad) 22px;
  background:linear-gradient(180deg,#1f1e1c 0%,#2b2a27 55%,#353431 100%);
  color:#fff;
  text-align:center;
}

.bl-top-header-title{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.domain{
  margin:0;
  display:block;
  color:#fff;
  font-family:"IBM Plex Sans Condensed", system-ui, sans-serif;
  font-size:clamp(42px, 5.6vw, 60px);
  font-weight:300;
  letter-spacing:.06em;
  line-height:1.05;
  text-transform:uppercase;
  text-align:center;
}

.bl-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:transparent;
}

body[data-app="home"] .wrap{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

.home-panels{
  position:relative;
  width:100%;
  height:100%;
  min-height:calc(100svh - var(--top-header-h, 104px));
  overflow:hidden;
}

.home-panel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:none;
  transition:none;
}

.home-panel.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.home-panel--systems{ background:var(--index-page1-bg); }
.home-panel--play{ background:var(--index-page2-bg); }

.home-panel__inner{
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.grid,
.play-lanes{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:center;
  justify-items:center;
  gap:0;
}

.play-lane{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:transparent;
}

.card,
.grid > .card,
.play-lane > .card{
  width:min(var(--index-card-w), calc(100% - 48px));
  max-width:var(--index-card-w);
  min-width:0;
  height:var(--index-card-h);
  min-height:var(--index-card-h);
  max-height:var(--index-card-h);
  margin:0;
  padding:var(--index-card-pad-y) var(--index-card-pad-x);
  border-radius:var(--r);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  overflow:hidden;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  color:#000;
}

.card-shell{ display:contents; }

.card h2{
  margin:0;
  max-width:100%;
  width:100%;
  color:inherit;
  font-size:var(--index-card-title);
  line-height:1.16;
  letter-spacing:-.01em;
  text-align:center;
}

.card p{
  margin:0;
  max-width:30ch;
  color:inherit;
  font-size:var(--index-card-copy);
  line-height:var(--index-card-line);
  text-align:center;
}

.card p br{ display:block; }

.card:hover,
.card:focus-visible{
  transform:none;
  filter:none;
}

.card:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(255,255,255,.36), var(--shadow);
}

.card--food{ background:var(--food-card-bg); color:#1b0b09; }

.card--massage{
  background:var(--massage-card-bg);
  color:#fff;
}
.card--massage h2{ color:#fff; }
.card--massage p{ color:rgba(255,255,255,.92); }

.card--skin{ background:var(--skin-card-bg); color:#2b2b28; }

.card--badminton{ background:var(--badminton-card-bg); color:#34164a; }
.card--badminton h2{
  white-space:normal;
  font-size:var(--index-card-title);
}

.card--fitness{
  background:var(--fitness-card-bg);
  color:#fff;
}
.card--fitness h2{ color:#fff; }
.card--fitness p{ color:rgba(255,255,255,.94); }

.card--games{ background:var(--games-card-bg); color:var(--games-ink); }

.view-arrow{
  position:absolute;
  left:50%;
  bottom:clamp(18px, 3vw, 28px);
  transform:translateX(-50%);
  width:56px;
  height:56px;
  border:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:rgba(255,255,255,.18);
  color:#2f3437;
  box-shadow:0 16px 32px rgba(0,0,0,.16);
}
.view-arrow--up{
  top:clamp(18px, 3vw, 28px);
  bottom:auto;
}
.view-arrow svg{
  width:24px;
  height:24px;
  display:block;
}
.view-arrow:hover{
  transform:translateX(-50%);
  filter:brightness(1.04);
}

/* Offline-safe embedded viewer */
#blEmbed{
  position:fixed;
  inset:0;
  z-index:20000;
  background:var(--bg, #e9e7e2);
  display:none;
}
#blEmbed.is-open{ display:block; }
#blEmbedFrame{
  width:100%;
  height:100%;
  border:0;
  background:transparent;
}

/* Mobile index contract:
   show all six cards in vertical order; do not require the desktop arrow switch. */
@media (max-width:900px){
  :root{
    --mobile-band-pad-x:18px;
    --mobile-band-pad-y:clamp(44px, 11vw, 76px);
    --mobile-card-width:min(340px, calc(100vw - 36px));
  }

  html[data-app="home"],
  body[data-app="home"]{
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
  }

  body[data-app="home"]{
    display:block;
    min-height:100svh;
    background:var(--index-page1-bg);
    background-attachment:scroll;
  }

  .bl-top-header{
    padding:18px var(--mobile-band-pad-x) 16px;
  }

  .domain{
    font-size:clamp(34px, 10.5vw, 48px);
    letter-spacing:.045em;
  }

  .bl-scroll{
    display:block;
    height:auto;
    min-height:0;
    overflow:visible;
  }

  body[data-app="home"] .wrap{
    height:auto !important;
    min-height:0 !important;
  }

  .home-panels{
    position:static;
    height:auto;
    min-height:0;
    overflow:visible;
  }

  .home-panel,
  .home-panel.is-active,
  .home-panel--systems,
  .home-panel--play{
    display:block;
    position:static;
    inset:auto;
    width:100%;
    height:auto;
    min-height:0;
    overflow:visible;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .home-panel__inner{
    display:block;
    height:auto;
    min-height:0;
  }

  .grid,
  .play-lanes{
    display:block;
    width:100vw;
    height:auto;
    min-height:0;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0;
  }

  .grid > .card,
  .play-lane{
    width:100%;
    max-width:none;
    min-height:clamp(340px, 58svh, 520px);
    height:auto;
    margin:0;
    padding:var(--mobile-band-pad-y) var(--mobile-band-pad-x);
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .grid > .card{
    max-height:none;
  }

  .play-lane > .card{
    width:100%;
    max-width:none;
    min-width:0;
    min-height:auto;
    height:auto;
    max-height:none;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    overflow:visible;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .grid > .card .card-shell,
  .play-lane > .card .card-shell{
    width:var(--mobile-card-width);
    max-width:var(--mobile-card-width);
    min-width:0;
    min-height:260px;
    height:auto;
    margin:0 auto;
    padding:clamp(28px, 7vw, 38px) 22px;
    border-radius:var(--r);
    border:1px solid var(--stroke);
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(14px, 3.5vw, 22px);
    text-align:center;
  }

  .grid > .card.card--food,
  .grid > .card.card--food .card-shell{
    background:linear-gradient(180deg,
      var(--food-deep) 0%,
      var(--food-orange) 25%,
      var(--food-yellow) 50%,
      var(--food-orange) 75%,
      var(--food-deep) 100%);
    color:#1b0b09;
  }

  .grid > .card.card--massage,
  .grid > .card.card--massage .card-shell{
    background:linear-gradient(180deg,
      var(--massage-deep) 0%,
      var(--massage-mid) 22%,
      var(--massage-tan) 50%,
      var(--massage-mid) 78%,
      var(--massage-deep) 100%);
    color:#fff;
  }
  .grid > .card.card--massage h2,
  .grid > .card.card--massage p{
    color:#fff;
  }
  .grid > .card.card--massage p{ color:rgba(255,255,255,.92); }

  .grid > .card.card--skin,
  .grid > .card.card--skin .card-shell{
    background:linear-gradient(180deg,
      var(--skin-deep) 0%,
      var(--skin-peach) 16%,
      var(--skin-wash) 32%,
      var(--skin-cream) 50%,
      var(--skin-wash) 68%,
      var(--skin-peach) 84%,
      var(--skin-deep) 100%);
    color:#2b2b28;
  }

  .play-lane--badminton,
  .play-lane--badminton > .card .card-shell{
    background:linear-gradient(180deg,
      var(--bad-red) 0%,
      var(--bad-purple) 20%,
      var(--bad-orange) 38%,
      var(--bad-yellow) 50%,
      var(--bad-orange) 62%,
      var(--bad-purple) 80%,
      var(--bad-red) 100%);
    color:#34164a;
  }

  .play-lane--fitness,
  .play-lane--fitness > .card .card-shell{
    background:linear-gradient(180deg,
      #000000 0%,
      #100f12 12%,
      #45151d 30%,
      var(--food-deep) 50%,
      #45151d 70%,
      #100f12 88%,
      #000000 100%);
    color:#fff;
  }
  .play-lane--fitness h2,
  .play-lane--fitness p{
    color:#fff;
  }

  .play-lane--games,
  .play-lane--games > .card .card-shell{
    background:linear-gradient(180deg,
      var(--games-deep) 0%,
      var(--games-mid) 18%,
      var(--games-soft) 36%,
      var(--games-tan) 50%,
      var(--games-soft) 64%,
      var(--games-mid) 82%,
      var(--games-deep) 100%);
    color:var(--games-ink);
  }

  .grid > .card.card--food,
  .grid > .card.card--massage,
  .grid > .card.card--skin,
  .play-lane--badminton,
  .play-lane--fitness,
  .play-lane--games{
    background-size:100% 100%;
    background-attachment:scroll;
  }

  .card h2{
    max-width:100%;
    width:100%;
    font-size:clamp(22px, 6.2vw, 28px);
  }

  .card--badminton h2{
    white-space:normal;
    font-size:clamp(22px, 6.2vw, 28px);
  }

  .card p{
    max-width:28ch;
    font-size:clamp(17px, 4.8vw, 20px);
  }

  .view-arrow,
  .view-arrow--up{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}


/* INDEX-AUTH-FLYOUT-COHERENCE-FIX
   The home page uses a custom title header, while the rest of the site uses the
   canonical homebar. Keep the Account flyout visually/functionally aligned with
   the sitewide flyout instead of letting the index layout expand/reformat it. */
body[data-app="home"] #bl-auth-flyout,
body[data-app="home"] #bl-beats-flyout{
  width:min(440px, calc(100vw - 24px)) !important;
  max-width:min(440px, calc(100vw - 24px)) !important;
  min-width:0 !important;
  z-index:13000 !important;
}

@media (min-width:901px){
  body[data-app="home"] #bl-auth-flyout,
  body[data-app="home"] #bl-beats-flyout{
    /* Do not pin the flyout to the bottom of the tall index header.
       baseline-shared.js positions it from the actual Account/Binaural button,
       matching the spacing used on the other HTML pages. */
    max-height:calc(100svh - 90px) !important;
    overflow-y:auto !important;
  }
}

body[data-app="home"] #bl-auth-flyout .card,
body[data-app="home"] #bl-beats-flyout .card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:18px 18px 20px !important;
  display:block !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:0 !important;
  overflow:visible !important;
}

body[data-app="home"] #bl-auth-flyout .card > h3:first-child,
body[data-app="home"] #bl-beats-flyout .card > h3:first-child{
  margin:0 0 12px 0 !important;
  padding:0 !important;
  font-size:20px !important;
  line-height:1.15 !important;
  text-align:left !important;
}

body[data-app="home"] #bl-auth-flyout .bl-auth-form:not([hidden]){
  display:grid !important;
  row-gap:10px !important;
}

/* Index page second panel: match the natural, wider paragraph wrapping used by
   Food/Massage/Skincare instead of forced narrow line breaks. */
.play-lane > .card p{
  max-width:34ch;
}
.play-lane > .card p br{
  display:none;
}