/* Navigation always uses the viewport edge, even inside a centered menu. */
:root {
  --nav-edge: 20px;
  --nav-size: 64px;
}
.screen > .navSpace {
  flex: none;
  width: 100%;
  min-height: var(--nav-size);
  grid-column: 1 / -1;
  animation: none;
  transform: none;
}
.screen .screenNav {
  position: fixed;
  top: calc(var(--sat) + var(--nav-edge));
  left: calc(var(--sal) + var(--nav-edge));
  right: calc(var(--sar) + var(--nav-edge));
  width: auto;
  margin: 0;
  min-height: var(--nav-size);
  gap: 12px;
  z-index: 12;
}
.home > .navSpace,
.levels > .navSpace {
  position: absolute;
  inset: 0 0 auto;
  min-height: 0;
}
.levels {
  padding-top: calc(var(--sat) + 100px);
}
.screen .screenNav .ttl {
  min-width: 0;
  line-height: 1.15;
  text-wrap: balance;
}
.screen .screenNav .chip {
  flex: none;
}
.play .screenNav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
}
.play .screenNav > :first-child {
  justify-self: start;
}
.play .screenNav .hudRight {
  align-self: start;
}
.play > .navSpace {
  min-height: calc(var(--nav-size) + 12px);
}

/* Liquid glass (William): clear, blurred, a bright rim and a soft top highlight, white glyphs over any scenery. */
html .screen .btn.navControl,
html .screen .btn.mapNav,
html .mClose {
  background: linear-gradient(160deg, #ffffff38, #ffffff12 48%, #ffffff22);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  color: #fff;
  border: 1px solid #ffffff5c;
  border-radius: 20px;
  box-shadow:
    inset 0 1.5px 0 #ffffffb0,
    inset 0 -1px 0 #ffffff2e,
    inset 0 0 18px #ffffff14,
    0 8px 22px #0818105c;
  text-shadow: 0 1px 2px #08181080;
}
.screen .btn.navControl {
  flex: none;
  width: auto;
  min-width: var(--nav-size);
  min-height: var(--nav-size);
  padding: 6px 16px;
  gap: 10px;
  font-size: 1.1rem;
  align-self: flex-start;
}
.screen .navControl .ic {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.screen .navControl .artIcon {
  filter: drop-shadow(0 1px 2px #08181066);
}
.screen .navControl.navBack .ic {
  width: 28px;
  height: 28px;
  stroke-width: 3;
}
.screen .navLabel {
  white-space: nowrap;
}
html .screen .btn.navControl:hover,
html .screen .btn.mapNav:hover,
html .mClose:hover {
  background-color: #ffffff14;
  filter: brightness(1.08);
}
html .screen .btn.navControl:active,
html .screen .btn.mapNav:active,
html .mClose:active {
  transform: scale(0.96);
  box-shadow:
    inset 0 1px 0 #ffffff80,
    inset 0 0 14px #ffffff1f,
    0 3px 10px #08181059;
}
html .screen .btn.navControl:focus-visible,
html .screen .btn.door:focus-visible,
html .mClose:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
html .mClose {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
html .mClose .ic {
  width: 24px;
  height: 24px;
}

/* The complete shortcut is clickable, including its visible name. */
.home .dock {
  gap: 14px;
}
html .home .dock .btn.door {
  width: 116px;
  min-height: 112px;
  padding: 8px 6px 10px;
  gap: 4px;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  /* the same clear liquid glass as the nav buttons (William: glass, not mint) */
  background: linear-gradient(160deg, #ffffff38, #ffffff12 48%, #ffffff22);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid #ffffff5c;
  color: #fff;
  box-shadow:
    inset 0 1.5px 0 #ffffffb0,
    inset 0 -1px 0 #ffffff2e,
    inset 0 0 18px #ffffff14,
    0 8px 22px #0818105c;
}
html .home .dock .door > .ic {
  width: 68px;
  height: 68px;
  filter: drop-shadow(0 3px 4px #08181066);
}
html .home .dock .doorLabel {
  font-size: 1rem;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 2px #08181099;
}
html .home .actions > .btn.small {
  min-height: 46px;
  padding: 4px 18px;
  font-size: 1rem;
}
.daily {
  overflow-y: auto;
}
/* Scrolling menus pass behind a solid header, never through its title. */
:is(.daily, .modes) .screenNav::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: calc(-1 * (var(--sat) + var(--nav-edge))) calc(-1 * (var(--sar) + var(--nav-edge))) -8px
    calc(-1 * (var(--sal) + var(--nav-edge)));
  background: #1d3027;
  box-shadow: 0 8px 16px #12261c55;
}

@media (max-width: 999px) {
  :root {
    --nav-edge: 12px;
    --nav-size: 56px;
  }
  .screen .navControl:not(.navBack) .navLabel {
    display: none;
  }
  .screen .btn.navControl {
    padding: 5px 10px;
    gap: 6px;
    font-size: 1rem;
    border-radius: 17px;
  }
  .screen .navControl .ic {
    width: 38px;
    height: 38px;
  }
  .screen .navControl.navBack .ic {
    width: 25px;
    height: 25px;
  }
  .screen .screenNav {
    gap: 8px;
  }
  .levels {
    padding-top: calc(var(--sat) + 84px);
  }
}
@media (max-width: 600px) {
  .home .dock {
    gap: 8px;
  }
  html .home .dock .btn.door {
    width: min(21vw, 88px);
    min-height: 94px;
    border-radius: 18px;
    padding: 7px 3px;
  }
  html .home .dock .door > .ic {
    width: 56px;
    height: 56px;
  }
  html .home .dock .doorLabel {
    font-size: 0.8rem;
  }
  .screen .screenNav .ttl {
    font-size: 1.2rem;
  }
  .screen .screenNav .chip {
    padding: 6px 8px;
    font-size: 1rem;
  }
  .daily .dailyPlay {
    white-space: normal;
    text-wrap: balance;
    font-size: 1.1rem;
    line-height: 1.15;
    padding: 8px 12px;
  }
}
@media (max-height: 650px) {
  .home .dock {
    gap: 8px;
  }
  html .home .dock .btn.door {
    width: min(21vw, 88px);
    min-height: 86px;
    padding: 6px 3px;
  }
  html .home .dock .door > .ic {
    width: 50px;
    height: 50px;
  }
  html .home .dock .doorLabel {
    font-size: 0.8rem;
  }
}
@media (max-height: 560px) and (min-aspect-ratio: 6/5) {
  :root {
    --nav-edge: 8px;
    --nav-size: 48px;
  }
  .screen .navControl:not(.navBack) .navLabel {
    display: none;
  }
  .screen .btn.navControl {
    min-width: 48px;
    padding: 4px 8px;
    border-radius: 15px;
  }
  .screen .navControl .ic {
    width: 32px;
    height: 32px;
  }
  .screen .navControl.navBack .ic {
    width: 24px;
    height: 24px;
  }
  .play > .navSpace {
    min-height: 48px;
  }
  .home {
    padding-top: calc(var(--sat) + 64px);
  }
  html .home .dock .btn.door {
    width: clamp(60px, 10vw, 78px);
    min-height: 74px;
    padding: 4px 2px;
    gap: 2px;
  }
  html .home .dock .door > .ic {
    width: 42px;
    height: 42px;
  }
  html .home .dock .doorLabel {
    font-size: 0.72rem;
  }
  .levels {
    padding-top: calc(var(--sat) + 66px);
  }
}

/* Gold buttons (Play, Buy, Next) as gold-tinted liquid glass: the same glass as the nav, warmed and glowing, so the main
   action still stands out. The :not() only lifts specificity above the art-direction gold rules. */
html[data-art-direction] .btn.gold:not(.badge) {
  background: linear-gradient(160deg, #ffd97a96, #f2b04066 55%, #ffe3a07a);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid #ffeab38c;
  color: #fffaf0;
  text-shadow: 0 1px 2px #4a2a00a0;
  box-shadow:
    inset 0 1.5px 0 #fff5d6d8,
    inset 0 -1px 0 #ffe2a048,
    inset 0 0 20px #ffd27a38,
    0 0 22px #ffc65a4d,
    0 8px 22px #0818105c;
}
html[data-art-direction] .btn.gold:not(.badge):hover {
  filter: brightness(1.1);
}
html[data-art-direction] .btn.gold:not(.badge):active {
  transform: scale(0.97);
  box-shadow:
    inset 0 1px 0 #fff5d6b0,
    inset 0 0 16px #ffd27a40,
    0 3px 10px #08181059;
}

/* Secondary buttons (Castle map, Share, Map…) in the same clear glass; round tool buttons keep their own look. */
html[data-art-direction] .btn.ghosty:not(.round) {
  background: linear-gradient(160deg, #ffffff30, #ffffff0f 48%, #ffffff1c);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid #ffffff52;
  color: #fff;
  text-shadow: 0 1px 2px #08181080;
  box-shadow:
    inset 0 1.5px 0 #ffffffa0,
    inset 0 -1px 0 #ffffff26,
    inset 0 0 16px #ffffff12,
    0 6px 18px #08181052;
}
html[data-art-direction] .btn.ghosty:not(.round):active {
  transform: scale(0.97);
  box-shadow:
    inset 0 1px 0 #ffffff80,
    inset 0 0 14px #ffffff1f,
    0 3px 10px #08181059;
}
/* glass has no bottom "3D" edge, so the text sits in the true middle (the old 4px bottom pad lifted it) */
html[data-art-direction] :is(.btn.gold:not(.badge), .btn.ghosty:not(.round)),
html .screen .btn.navControl {
  padding-bottom: 0;
}

/* Inside Bo's light speech bubble clear glass would vanish: the buttons there stay solid and high-contrast
   (dark plum "Why?", warm gold "Apply" with dark text). */
html[data-art-direction] .bubble .btn.ghosty:not(.round) {
  background: linear-gradient(#406051, #2b483a);
  color: #fff;
  text-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid #ffffff2a;
  box-shadow:
    inset 0 1px 0 #ffffff40,
    0 3px 8px #16423840;
}
html[data-art-direction] .bubble .btn.gold:not(.badge) {
  background: linear-gradient(#ffd77a, #efae3e);
  color: #3a2400;
  text-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid #ffe9b0;
  box-shadow:
    inset 0 1px 0 #fff4d0,
    0 3px 8px #8a541640;
}
/* End of src/styles/navigation.css */

/* End of dist-static/assets/navigation-hIEHx4KF.css */