/* ============================================================
   STORMY TITANS™ — LAKE REVEAL MARQUEE STYLE — CORRECTED 002-R16

   IMPORTANT:
   This is a CSS-only visual overlay on the known-good R15 structure.
   No Lake Reveal markup is restructured.
   ============================================================ */

:root{
  --st-options-accent:#ffe000;
  --st-options-glow:rgba(255,224,0,.50);
  --st-you-accent:#67ff66;
  --st-you-glow:rgba(103,255,102,.50);
}

/* Invisible outside-click catcher: retain behavior, remove dimming. */
.lake-backdrop,
.lake-backdrop.open{
  background:transparent !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Circular menu openers. */
.food-trigger,
.stormy-head .avatar-button{
  box-sizing:border-box !important;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  position:relative !important;
}

.food-trigger{
  border:2px solid var(--st-options-accent) !important;
  background:rgba(6,25,40,.78) !important;
  box-shadow:
    0 0 0 2px rgba(255,224,0,.10),
    0 0 12px var(--st-options-glow) !important;
}

.stormy-head .avatar-button{
  border:2px solid var(--st-you-accent) !important;
  box-shadow:
    0 0 0 2px rgba(103,255,102,.10),
    0 0 12px var(--st-you-glow) !important;
}

/* Shared Lake Reveal appearance. */
.lake-reveal{
  background:linear-gradient(180deg,#0a263c,#071c2e) !important;
  color:#fff !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

/* Keep interior dark and consistent. */
.lake-category-items,
.lake-item,
.you-card,
.lake-admin-links{
  background:#0a263c !important;
  color:#fff !important;
}

.lake-item{
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}

.lake-item:hover,
.lake-item:focus-visible{
  background:#10334e !important;
  color:#fff !important;
}

.lake-item-label{color:#fff !important}
.you-balance{color:#d9effc !important}
.lake-admin-links a{color:#d9effc !important}

/* Accent frames. */
.lake-options{
  border:2px solid var(--st-options-accent) !important;
  box-shadow:
    0 0 0 1px rgba(255,224,0,.10),
    0 0 14px var(--st-options-glow),
    0 14px 32px rgba(0,0,0,.36) !important;
}

.lake-you{
  border:2px solid var(--st-you-accent) !important;
  box-shadow:
    0 0 0 1px rgba(103,255,102,.10),
    0 0 14px var(--st-you-glow),
    0 14px 32px rgba(0,0,0,.36) !important;
}

/* Pointer tabs: use pseudo-elements without changing markup. */
.lake-options::before,
.lake-you::before{
  content:"";
  position:absolute;
  top:-9px;
  width:16px;
  height:16px;
  background:#0a263c;
  transform:rotate(45deg);
  z-index:1;
}

.lake-options::before{
  left:28px;
  border-left:2px solid var(--st-options-accent);
  border-top:2px solid var(--st-options-accent);
}

.lake-you::before{
  right:28px;
  border-left:2px solid var(--st-you-accent);
  border-top:2px solid var(--st-you-accent);
}

/* Restore overflow visibility only where needed for pointer tab,
   while inner scrolling remains controlled by existing R5/R7 rules. */
.lake-options,
.lake-you{
  overflow:visible !important;
}

.lake-options .lake-scroll,
.lake-you .lake-you-links{
  overflow:auto !important;
  border-radius:0 0 12px 12px;
}

/* Mobile geometry: narrower and shorter, with deliberate space above dock. */
@media (max-width:700px){
  .lake-options,
  .lake-you{
    top:80px !important;
    width:min(330px,calc(100vw - 44px)) !important;
    max-height:calc(
      var(--st-vvh,100dvh)
      - 80px
      - 118px
      - env(safe-area-inset-bottom)
    ) !important;
  }

  .lake-options{
    left:max(22px,env(safe-area-inset-left)) !important;
  }

  .lake-you{
    right:max(22px,env(safe-area-inset-right)) !important;
  }
}

/* Tablet/desktop compact floating treatment. */
@media (min-width:701px){
  .food-trigger,
  .stormy-head .avatar-button{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
  }

  .lake-options{width:min(380px,36vw) !important}
  .lake-you{width:min(360px,34vw) !important}
}