/* ==========================================================
   BRACKETGRAMS V4 — MAIN MENU
   M42 canonical component

   This is the only main-menu stylesheet.
   Geometry and motion are owned by public/menu/menu.js.
   ========================================================== */

.bg-menu-layer {
  padding: 0 !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 50% 48%,
      rgba(225,238,255,.075) 0%,
      rgba(225,238,255,.035) 23%,
      rgba(10,13,20,0) 57%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      rgba(0,0,0,.04)
    ),
    #090b10;
}

.bg-menu-root {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.bg-menu-hidden-meta {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.bg-menu-stage {
  --bg-menu-stage-width: clamp(292px, 43vw, 454px);
  --bg-menu-stage-height: clamp(132px, 16vw, 166px);
  --bg-menu-bracket-width: clamp(48px, 7vw, 82px);
  --bg-menu-button-size: clamp(54px, 5.8vw, 66px);
  --bg-menu-button-gap: clamp(8px, .9vw, 12px);

  --bg-menu-content-mid-y: 50%;
  --bg-menu-content-span-y: 100px;
  --bg-menu-logo-size: 82px;

  --bg-menu-logo-inset: 18px;
  --bg-menu-envelope-pad-top: 8px;
  --bg-menu-envelope-pad-bottom: 10px;

  /*
   * The one canonical closed-pose tuning knob.
   * The previous 8–10px gap was visibly too tight.
   */
  --bg-menu-closed-clearance: 24px;
  --bg-menu-open-inset: 24px;

  position: relative;
  width: var(--bg-menu-stage-width);
  height: var(--bg-menu-stage-height);
  max-width: calc(100vw - 24px);
  overflow: visible;
  isolation: isolate;

  /*
   * No literal "Solve" frame is painted while puzzle/solved state is
   * unresolved. menu.js is the only code allowed to leave boot state.
   */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bg-menu-stage:not([data-state="boot"]) {
  opacity: 1;
  visibility: visible;
}

.bg-menu-stage[data-state="open"] {
  pointer-events: auto;
}

.bg-menu-bracket {
  position: absolute;
  z-index: 3;
  top: var(--bg-menu-content-mid-y);
  display: block;

  width: var(--bg-menu-bracket-width);
  height: var(--bg-menu-content-span-y);

  padding: 0;
  margin: 0;

  color: rgba(246,249,255,.92);
  font-size: 0;
  line-height: 0;

  transform: translate(0, -50%);
  transform-origin: 50% 50%;
  opacity: .82;

  filter: none;

  pointer-events: none;
  will-change: transform;
}

.bg-menu-bracket-left {
  left: var(--bg-menu-open-inset);
  right: auto;
}

.bg-menu-bracket-right {
  left: auto;
  right: var(--bg-menu-open-inset);
}

.bg-menu-bracket-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bg-menu-bracket-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 12;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.bg-menu-logo-anchor {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: var(--bg-menu-content-mid-y);

  width: var(--bg-menu-logo-size);
  height: var(--bg-menu-logo-size);

  transform: translate(-50%, -50%);
  overflow: hidden;
  pointer-events: none;
  will-change: opacity;
}

.bg-menu-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;

  border: 1px solid rgba(229,238,250,.30);
  border-radius: clamp(11px, 1.25vw, 15px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 0 18px rgba(225,238,255,.16),
    0 12px 34px rgba(0,0,0,.34);
}

.bg-menu-buttons {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: var(--bg-menu-button-gap);
  width: auto;
  overflow: visible;

  transform: translate(-50%, -50%);
}

.bg-menu-button {
  position: relative;
  flex: 0 0 auto;

  width: var(--bg-menu-button-size);
  height: var(--bg-menu-button-size);

  min-width: 0;
  min-height: 0;

  display: grid;
  place-items: center;

  padding: 0;
  overflow: visible;

  border: 1px solid rgba(238,244,255,.19);
  border-radius: 999px;

  background: rgba(13,14,20,.58);
  color: #f4f6fb;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 9px 25px rgba(0,0,0,.19);

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

  cursor: pointer;
  transform-origin: 50% 50%;

  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;

  -webkit-tap-highlight-color: transparent;
}

.bg-menu-button:not(:disabled):hover,
.bg-menu-button:not(:disabled):focus-visible {
  border-color: rgba(238,244,255,.38);
  background: rgba(28,30,39,.76);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 30px rgba(0,0,0,.25),
    0 0 18px rgba(225,238,255,.07);

  outline: none;
}

.bg-menu-button:not(:disabled):active {
  scale: .96;
}

.bg-menu-button:disabled {
  cursor: default;
}

.bg-menu-button-emoji {
  display: block;
  font-size: clamp(25px, 2.65vw, 31px);
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.30));
}

.bg-menu-button-label {
  display: block;
  visibility: visible;

  position: absolute;
  left: 50%;
  top: calc(100% + 7px);

  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;

  transform: translateX(-50%);

  opacity: .82;
  color: var(--shell-fg);

  font-family: inherit;
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: .055em;
  text-transform: none;
  white-space: nowrap;

  pointer-events: none;
  user-select: none;

  text-shadow:
    0 1px 8px rgba(0,0,0,.34);
}

.bg-menu-button:not(:disabled):hover .bg-menu-button-label,
.bg-menu-button:not(:disabled):focus-visible .bg-menu-button-label {
  opacity: 1;
}

.bg-menu-solved-check {
  position: absolute;
  z-index: 3;
  top: -7px;
  right: -7px;

  width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;

  background: rgba(61,84,213,.90);
  color: white;

  font-size: 12px;
  font-weight: 900;
  line-height: 1;

  box-shadow: 0 3px 11px rgba(0,0,0,.32);
}

.bg-menu-solved-check[hidden] {
  display: none !important;
}

.bg-menu-stage[data-state="closed"] .bg-menu-logo-anchor {
  visibility: visible;
  opacity: 1;
}

.bg-menu-stage[data-state="open"] .bg-menu-logo-anchor {
  visibility: hidden;
  opacity: 0;
}

.bg-menu-stage[data-state="opening"] .bg-menu-logo-anchor,
.bg-menu-stage[data-state="closing"] .bg-menu-logo-anchor {
  visibility: visible;
}

.bg-menu-stage[data-state="closed"] .bg-menu-button {
  opacity: 0;
  visibility: hidden;
  transform: scale(.72);
  filter: blur(.5px);
  pointer-events: none;
}

.bg-menu-stage[data-state="open"] .bg-menu-button {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  filter: none;
  pointer-events: auto;
}

.bg-menu-stage[data-state="opening"] .bg-menu-button,
.bg-menu-stage[data-state="closing"] .bg-menu-button {
  visibility: visible;
  pointer-events: none;
}

#entrySolveButton::before,
#entrySolveButton::after,
#entryLearnButton::before,
#entryLearnButton::after,
#entryExploreButton::before,
#entryExploreButton::after {
  content: none !important;
  display: none !important;
}

body[data-theme="day"] .bg-menu-layer {
  background:
    radial-gradient(
      ellipse at 50% 48%,
      rgba(255,255,255,.48) 0%,
      rgba(255,255,255,.22) 26%,
      rgba(255,255,255,0) 60%
    ),
    linear-gradient(
      145deg,
      rgba(199,208,214,.94),
      rgba(154,165,172,.92)
    );
}

body[data-theme="day"] .bg-menu-bracket {
  color: rgba(24,40,58,.82);
  filter: none;
}

body[data-theme="day"] .bg-menu-button {
  border-color: rgba(24,40,58,.18);
  background: rgba(245,248,250,.48);
  color: #18283a;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    0 8px 24px rgba(43,56,65,.12);
}

@media (max-width: 640px) {
  .bg-menu-stage {
    --bg-menu-open-inset: 8px;
    --bg-menu-logo-inset: 14px;
    --bg-menu-closed-clearance: 18px;
  }

  .bg-menu-bracket {
    width: 42px;
  }

  .bg-menu-button-label {
    font-size: clamp(13px, 3.8vw, 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-menu-stage *,
  .bg-menu-stage {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================
   BG V2-STYLE VICTORY MENU COMPOSITE M110
   ============================================================ */

/*
 * The canonical menu remains the real menu during Victory.
 * Its background disappears so the focused Explore wall is the
 * presentation underneath it.
 */
body[data-shell-mode="victory"] #menuLayer {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background: transparent !important;
  z-index: 60 !important;
  transition:
    opacity 220ms ease,
    visibility 0s linear 0s !important;
}

body[data-shell-mode="victory"] .bg-menu-layer,
body[data-shell-mode="victory"] .bg-menu-root {
  background: transparent !important;
}

body[data-shell-mode="victory"] .bg-menu-root {
  pointer-events: none !important;
}

/*
 * Same menu geometry, only translated downward.
 *
 * This is intentionally a single Victory-position knob so we can
 * tune it visually without disturbing any menu/bracket geometry.
 */
body[data-shell-mode="victory"] #mainMenuStage {
  --bg-victory-menu-shift-y:
    clamp(
      88px,
      15vh,
      170px
    );

  transform:
    translateY(
      var(--bg-victory-menu-shift-y)
    ) !important;

  opacity: 1 !important;
  pointer-events: auto !important;

  transition:
    transform 430ms
      cubic-bezier(.22,.74,.24,1),
    opacity 560ms ease !important;
}

/*
 * Victory -> Explore:
 * the menu fades out while Explore reveals the surrounding wall.
 */
body.victory-to-explore-composite[data-shell-mode="victory"]
#mainMenuStage {
  transform:
    translateY(
      var(--bg-victory-menu-shift-y)
    )
    scale(.985) !important;

  opacity: 0 !important;
  pointer-events: none !important;

  transition:
    transform 620ms
      cubic-bezier(.2,.8,.2,1),
    opacity 520ms ease !important;
}

/*
 * Theme remains part of normal Explore/Menu, but the v2 Victory
 * presentation only carries its rebracketing controls.
 */
body[data-shell-mode="victory"]
.shell-theme-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  body[data-shell-mode="victory"] #mainMenuStage {
    --bg-victory-menu-shift-y:
      clamp(
        68px,
        11vh,
        118px
      );
  }
}

/* BG CLEAN MAIN-MENU LOGO EDGE 2026-10-03 */
.bg-menu-logo {
  border: 0 !important;
  box-shadow: none !important;
}