:root {
  --shell-blue: rgb(82, 130, 214);
  --shell-orange: rgb(232, 148, 8);
  --shell-fg: rgba(255,255,255,.95);
  --shell-muted: rgba(255,255,255,.54);
  --shell-panel: rgba(8,9,12,.72);
  --shell-border: rgba(255,255,255,.14);
  --shell-shadow: rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
html { background: #050506; }

body {
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--shell-fg);
  font-family: "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.055), transparent 42%),
    linear-gradient(120deg, #212123, #060607 53%, #1b1b1d);
}

body[data-theme="day"] {
  --shell-fg: rgba(27,38,48,.96);
  --shell-muted: rgba(27,38,48,.56);
  --shell-panel: rgba(255,255,255,.72);
  --shell-border: rgba(41,57,71,.18);
  --shell-shadow: rgba(66,73,78,.20);
  background:
    radial-gradient(circle at 54% 44%, rgba(255,238,191,.28), transparent 40%),
    linear-gradient(120deg, #6c9ab2, #e5c791 54%, #70a2bc);
}

button { font: inherit; }
button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--shell-fg) 70%, transparent);
  outline-offset: 3px;
}
[hidden] { display: none !important; }

.shell-loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--shell-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.shell-loading.error { padding: 30px; color: #ff7d77; text-align: center; }

.app-shell, .shell-layer { position: fixed; inset: 0; }
.shell-layer {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
body[data-shell-mode="menu"] .menu-layer,
body[data-shell-mode="learn"] .learn-layer,
body[data-shell-mode="solve"] .solve-layer,
body[data-shell-mode="victory"] .victory-layer {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

.menu-layer { display: grid; place-items: center; padding: 22px; }
.menu-surface {
  width: min(700px, calc(100vw - 32px));
  min-height: 330px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 24px;
  padding: 38px 34px 28px;
  border: 1px solid var(--shell-border);
  border-radius: 24px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--shell-blue) 6%, transparent),
      color-mix(in srgb, var(--shell-orange) 6%, transparent)),
    var(--shell-panel);
  box-shadow: 0 24px 80px var(--shell-shadow), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(1.06);
}

.shell-wordmark {
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 780;
  letter-spacing: -.05em;
}
.wordmark-left, .wordmark-right {
  display: inline-block;
  font-weight: 500;
  transform: scaleY(1.12);
}
.wordmark-left { margin-right: .12em; color: var(--shell-blue); }
.wordmark-right { margin-left: .12em; color: var(--shell-orange); }

.menu-puzzle-meta { min-height: 42px; text-align: center; }
.menu-puzzle-label {
  color: var(--shell-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
}
.menu-puzzle-title {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .015em;
}

.entry-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 12px;
}
.entry-option {
  position: relative;
  min-width: 110px;
  min-height: 94px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--shell-border);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  color: var(--shell-fg);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.entry-option:not(:disabled):hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.075);
}
.entry-option.pending { opacity: .28; cursor: default; }
.entry-option.is-solved {
  border-color: color-mix(in srgb, var(--shell-blue) 46%, var(--shell-border));
}
.entry-solved-check {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--shell-blue) 72%, transparent);
  color: white;
  font-size: 12px;
  font-weight: 900;
}
.entry-option-emoji { font-size: 30px; }
.entry-option-label {
  color: var(--shell-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}
.shell-milestone-note {
  color: color-mix(in srgb, var(--shell-muted) 62%, transparent);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .16em;
}

.solve-layer { background: #050506; }
#solveFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050506;
}
.solve-frame-loading {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  background: #070708;
  color: rgba(255,255,255,.54);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.solve-frame-loading[hidden] { display: none !important; }

.victory-layer { display: grid; place-items: center; padding: 22px; overflow: hidden; }
.victory-surface {
  width: min(1100px, calc(100vw - 24px));
  height: min(720px, calc(100dvh - 30px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  padding: 24px;
}
.victory-puzzle-title {
  color: var(--shell-muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .15em;
  text-align: center;
}
.victory-text-stage {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.victory-paragraph {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 26px 44px;
  overflow: hidden;
  border-radius: 18px;
  color: var(--shell-fg);
  font-size: 38px;
  font-weight: 680;
  line-height: 1.18;
  letter-spacing: -.018em;
  text-align: center;
  text-wrap: balance;
  opacity: .94;
}
.victory-paragraph::before,
.victory-paragraph::after {
  position: absolute;
  top: 50%;
  transform: translateY(-54%) scaleY(1.28);
  font-size: 1.3em;
  font-weight: 400;
  opacity: .56;
}
.victory-paragraph::before { content: "["; left: 10px; }
.victory-paragraph::after { content: "]"; right: 10px; }
.victory-upper {
  border: 1px solid color-mix(in srgb, var(--shell-blue) 46%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--shell-blue) 18%, transparent),
    rgba(255,255,255,.02));
}
.victory-upper::before, .victory-upper::after { color: var(--shell-blue); }
.victory-lower {
  border: 1px solid color-mix(in srgb, var(--shell-orange) 46%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--shell-orange) 18%, transparent),
    rgba(255,255,255,.02));
}
.victory-lower::before, .victory-lower::after { color: var(--shell-orange); }

.victory-actions { display: flex; justify-content: center; gap: 10px; }
.victory-action {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--shell-border);
  border-radius: 12px;
  background: var(--shell-panel);
  color: var(--shell-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.victory-action.primary {
  color: var(--shell-fg);
  border-color: color-mix(in srgb, var(--shell-blue) 44%, var(--shell-border));
}

.shell-theme-toggle {
  position: fixed;
  z-index: 1500;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--shell-border);
  border-radius: 50%;
  background: var(--shell-panel);
  color: var(--shell-fg);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: opacity 130ms ease;
}
body[data-shell-mode="solve"] .shell-theme-toggle {
  opacity: 0;
  pointer-events: none;
}

.shell-transition-curtain {
  position: fixed;
  z-index: 2000;
  inset: 0;
  background: #080809;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 0s linear 150ms;
}
.shell-transition-curtain.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 90ms ease;
}

@media (hover: none), (pointer: coarse) {
  .menu-layer { padding: 12px; }
  .menu-surface {
    width: calc(100vw - 24px);
    min-height: 300px;
    gap: 20px;
    padding: 30px 18px 24px;
    border-radius: 18px;
  }
  .entry-options { width: 100%; gap: 8px; }
  .entry-option { min-width: 0; min-height: 88px; }
  .entry-option-emoji { font-size: 27px; }

  .victory-layer {
    padding:
      max(10px, env(safe-area-inset-top))
      8px
      max(10px, env(safe-area-inset-bottom));
  }
  .victory-surface {
    width: 100%;
    height: 100%;
    padding: 12px 8px;
    gap: 10px;
  }
  .victory-text-stage { gap: 8px; }
  .victory-paragraph {
    padding: 18px 28px;
    border-radius: 12px;
    font-size: 28px;
  }
  .victory-actions {
    flex-direction: column;
    width: min(330px, 100%);
    justify-self: center;
  }
  .victory-action { width: 100%; }
}

/* V4 EXPLORE M1 */
body[data-shell-mode="explore"] .explore-layer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* No hover/focus labels on main-menu buttons. */
#entrySolveButton .bg-menu-button-label,
#entryLearnButton .bg-menu-button-label,
#entryExploreButton .bg-menu-button-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Restore permanent main-menu labels. */
#entrySolveButton .bg-menu-button-label,
#entryLearnButton .bg-menu-button-label,
#entryExploreButton .bg-menu-button-label {
  display: block !important;
  visibility: visible !important;
}

/* Restore permanent Solve / Learn / Explore labels. */
#entrySolveButton .bg-menu-button-label,
#entryLearnButton .bg-menu-button-label,
#entryExploreButton .bg-menu-button-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* BG V4 POST-SOLVE HUB M124B 2026-09-28 */

body.post-solve-home[data-shell-mode="solve"] .shell-theme-toggle {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.post-solve-hub {
  position: fixed;
  z-index: 1600;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  transform: translate(-50%, 10px) scale(.92);
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 360ms cubic-bezier(.2,.75,.2,1);
}

.post-solve-hub.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
}







.post-solve-hub-bracket {
  width: 22px;
  min-height: 72px;
  opacity: 0;
  transition:
    transform 520ms cubic-bezier(.2,.75,.2,1),
    opacity 260ms ease;
}

.post-solve-hub-bracket svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}


.post-solve-hub-bracket-left {
  transform:
    translateX(30px)
    scaleY(.72);
}

.post-solve-hub-bracket-right {
  transform:
    translateX(-30px)
    scaleY(.72);
}

.post-solve-hub.is-visible
.post-solve-hub-bracket-left,
.post-solve-hub.is-visible
.post-solve-hub-bracket-right {
  transform:
    translateX(0)
    scaleY(1);
  opacity: .72;
}

@media (
  max-width: 720px
),
(
  hover: none
),
(
  pointer: coarse
) {
  .post-solve-hub {
    bottom:
      max(
        12px,
        env(safe-area-inset-bottom)
      );
    gap: 3px;
  }

  .post-solve-hub-buttons {
    gap: 5px;
    padding: 5px;
  }

  .post-solve-hub-button {
    min-width: 66px;
    height: 54px;
    padding: 4px 7px;
  }

  .post-solve-hub-bracket {
    width: 17px;
    min-height: 66px;
  }
}


/* BG V4 POST-SOLVE NORMAL-HOME APPEARANCE M125 */
.post-solve-hub .bg-menu-button:disabled {
  opacity: 1;
}

.post-solve-hub .bg-menu-button-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* BG V4 POST-SOLVE TRUE HOME-MENU GEOMETRY M126 */

.post-solve-hub.bg-menu-stage {
  position: fixed !important;
  z-index: 1600 !important;

  left: 50% !important;
  right: auto !important;
  top: auto !important;

  bottom:
    calc(
      clamp(120px, 20dvh, 170px)
      + env(safe-area-inset-bottom)
    ) !important;

  width:
    var(--bg-menu-stage-width) !important;

  height:
    var(--bg-menu-stage-height) !important;

  max-width:
    calc(100vw - 24px) !important;

  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;

  overflow: visible !important;
  isolation: isolate;

  transform:
    translateX(-50%) !important;

  transform-origin:
    50% 50% !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.post-solve-hub.bg-menu-stage.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transform:
    translateX(-50%) !important;
}

/*
 * Use the canonical menu button-group geometry exactly.
 * This overrides the earlier temporary post-solve layout.
 */
.post-solve-hub
.post-solve-hub-buttons.bg-menu-buttons {
  position: absolute !important;
  z-index: 5 !important;

  left: 50% !important;
  top: 50% !important;

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

  gap:
    var(--bg-menu-button-gap) !important;

  width: auto !important;
  height: auto !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;

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

/*
 * Canonical home-menu button appearance.
 */
.post-solve-hub
.post-solve-hub-button.bg-menu-button {
  position: relative !important;
  flex: 0 0 auto !important;

  width:
    var(--bg-menu-button-size) !important;

  height:
    var(--bg-menu-button-size) !important;

  min-width: 0 !important;
  min-height: 0 !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: visible !important;

  border:
    1px solid rgba(238,244,255,.19) !important;

  border-radius:
    999px !important;

  background:
    rgba(13,14,20,.58) !important;

  color:
    #f4f6fb !important;

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

  backdrop-filter:
    blur(13px) !important;

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

  opacity: 1 !important;
  visibility: visible !important;

  transform:
    scale(1) !important;
}

/*
 * Canonical home-menu emoji size.
 */
.post-solve-hub
.post-solve-hub-icon.bg-menu-button-emoji {
  font-size:
    clamp(25px, 2.65vw, 31px) !important;

  line-height:
    1 !important;

  filter:
    drop-shadow(
      0 2px 4px rgba(0,0,0,.30)
    ) !important;
}

/*
 * Canonical home-menu labels.
 */
.post-solve-hub
.post-solve-hub-label.bg-menu-button-label {
  display: block !important;
  visibility: visible !important;

  position: absolute !important;

  left: 50% !important;
  top:
    calc(100% + 7px) !important;

  width: max-content !important;

  margin: 0 !important;
  padding: 0 !important;

  transform:
    translateX(-50%) !important;

  opacity: .82 !important;

  color:
    var(--shell-fg) !important;

  font-family:
    inherit !important;

  font-size:
    clamp(14px, 1.35vw, 17px) !important;

  font-weight:
    650 !important;

  line-height:
    1.04 !important;

  letter-spacing:
    .055em !important;

  text-transform:
    none !important;

  white-space:
    nowrap !important;

  pointer-events:
    none !important;
}

/*
 * Canonical home-menu bracket geometry.
 */
.post-solve-hub
.post-solve-hub-bracket.bg-menu-bracket {
  position: absolute !important;
  z-index: 3 !important;

  top:
    var(--bg-menu-content-mid-y) !important;

  display:
    block !important;

  width:
    var(--bg-menu-bracket-width) !important;

  height:
    var(--bg-menu-content-span-y) !important;

  min-height:
    0 !important;

  padding: 0 !important;
  margin: 0 !important;

  color:
    rgba(246,249,255,.92) !important;

  font-size:
    0 !important;

  line-height:
    0 !important;

  transform:
    translate(0, -50%) !important;

  transform-origin:
    50% 50% !important;

  opacity:
    .82 !important;

  filter:
    none !important;

  pointer-events:
    none !important;
}

.post-solve-hub
.post-solve-hub-bracket-left.bg-menu-bracket-left {
  left:
    var(--bg-menu-open-inset) !important;

  right:
    auto !important;
}

.post-solve-hub
.post-solve-hub-bracket-right.bg-menu-bracket-right {
  left:
    auto !important;

  right:
    var(--bg-menu-open-inset) !important;
}

.post-solve-hub
.bg-menu-bracket-svg {
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  overflow:
    visible !important;
}

.post-solve-hub
.bg-menu-bracket-path {
  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    12 !important;

  stroke-linecap:
    square !important;

  stroke-linejoin:
    miter !important;

  vector-effect:
    non-scaling-stroke !important;
}

/*
 * No tooltip behavior on the Victory menu.
 */
.post-solve-hub
[data-menu-no-tooltip="true"] {
  --bg-tooltip-disabled: 1;
}


/*
 * BG EXPLORE HARD UNDERLAY ISOLATION
 *
 * The persistent Solve room may remain alive beneath the canonical
 * menu. During Menu -> Explore handoff, do not permit Solve/Victory
 * pixels to paint between those two visual owners.
 *
 * Unlike Learn isolation, Explore itself must remain renderable.
 */
body.explore-hard-underlay-isolation .solve-layer,
body.explore-hard-underlay-isolation .victory-layer {
  display: none !important;
}


/*
 * BG LEARN HARD UNDERLAY ISOLATION
 *
 * Learn must never expose the persistent Solve/Grid/Victory room beneath
 * its cinematic. display:none is intentional here because persistent
 * renderers may carry inline !important visibility/opacity overrides.
 */
body.learn-hard-underlay-isolation .solve-layer,
body.learn-hard-underlay-isolation .explore-layer,
body.learn-hard-underlay-isolation .victory-layer {
  display: none !important;
}


/* BG SOLVE MENU CURTAIN M46
 *
 * Solve is a persistent room. The home menu can sit over it without
 * changing shell mode or destroying/recreating anything underneath.
 */
body.solve-menu-curtain .solve-layer {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: none !important;
}

body.solve-menu-curtain .menu-layer {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 220ms ease !important;
  z-index: 2147483647 !important;
}


/* BG PERSISTENT SOLVE ROOM M47
 *
 * The puzzle is the stable base room. The canonical main menu may sit
 * above it as a curtain without changing or destroying puzzle state.
 */
body.solve-menu-curtain .solve-layer {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: none !important;
}

body.solve-menu-curtain .menu-layer {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}

/*
 * In ordinary Solve the shell theme control is suppressed. While the
 * menu is covering Solve, the menu owns interaction again.
 */
body.solve-menu-curtain .shell-theme-toggle {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* BG STABLE MENU / TRANSITION BACKGROUND 2026-10-03 */
.menu-layer,
.shell-transition-curtain {
  background: var(--home-background,
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.055), transparent 42%),
    linear-gradient(120deg, #212123, #060607 53%, #1b1b1d)) !important;
}

body[data-theme="day"] .menu-layer,
body[data-theme="day"] .shell-transition-curtain {
  background:
    radial-gradient(circle at 54% 44%, rgba(255,238,191,.28), transparent 40%),
    linear-gradient(120deg, #6c9ab2, #e5c791 54%, #70a2bc) !important;
}

/* BG MENU THEME TOGGLE ABOVE PERSISTENT MENU CURTAIN 2026-10-03 */
body[data-shell-mode="menu"] .shell-theme-toggle,
body.solve-menu-curtain .shell-theme-toggle {
  z-index: 2147483647 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}