/* ================================================================
   nav.css — shared site navigation
   Loaded by every page. Fixed height: 60px always.
   ================================================================ */

#site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: calc(60px + env(safe-area-inset-top, 0px));
  padding: 0 32px;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--surface);
  border-bottom: 1px solid var(--toolbar-border);
  flex-shrink: 0;
}

/* Logo — matches the same muted currentColor the nav icon links/buttons
   resolve to, so the wordmark reads as the same lighter tone as the rest
   of the nav bar's icons. */
#site-nav .nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 20px;
  text-decoration: none;
  color: var(--text-muted);
}
#site-nav .nav-logo img,
#site-nav .nav-logo svg {
  height: 40px;
  display: block;
  width: auto;
}
#site-nav .nav-logo { position: relative; }

/* Matrix glitch burst (MB_GLITCH in js/nav.js). The JS appends two copies
   of the element's content as .mb-glitch-layer and slices/jitters them. */
.mb-glitch-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: inherit;
  padding: inherit;
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
}
.mb-glitch-layer--0 { color: #00ff41 !important; opacity: .85; }
.mb-glitch-layer--1 { color: #ff2bd6 !important; opacity: .75; }
.mb-glitch-layer * { color: inherit !important; }
.mb-glitch-layer svg * { fill: currentColor !important; opacity: 1 !important; }
.nav-logo.mb-glitching > svg:first-child {
  filter: drop-shadow(-2px 0 rgba(0,255,65,.8)) drop-shadow(2px 0 rgba(255,43,214,.6));
}

/* Standalone logo mark used outside #site-nav (board/wall toolbars) —
   same muted currentColor as the main nav's wordmark, for consistency. */
#logo-slot {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}

/* Left links (About etc.) */
#site-nav .nav-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

/* Right links (Join, Teacher, CTA) */
#site-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* Base link style */
#site-nav a,
#site-nav button.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 7px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
  white-space: nowrap;
  line-height: 1;
}
#site-nav a:hover,
#site-nav button.nav-link:hover {
  background: none;
  color: var(--text-muted);
}

/* Active page indicator */
#site-nav a.nav-active {
  color: var(--purple);
  font-weight: 600;
  background: var(--purple-light);
}

/* Separator */
#site-nav .nav-sep {
  width: 1px;
  height: 20px;
  background: var(--toolbar-border);
  margin: 0 6px;
  flex-shrink: 0;
}

/* Signed-in user name pill */
#site-nav .nav-user {
  font-size: 13px;
  font-weight: 600;
  color: var(--btn-text);
  padding: 6px 10px;
  border-radius: 7px;
  white-space: nowrap;
}

/* CTA button */
#site-nav .nav-cta {
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
  background: var(--purple) !important;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  transition: background .12s !important;
}
#site-nav .nav-cta:hover {
  background: var(--purple-dark) !important;
}

/* More dropdown */
#site-nav .nav-dropdown {
  position: relative;
}
#site-nav .nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
}
#site-nav .nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--toolbar-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 6px;
  z-index: 600;
}
#site-nav .nav-dropdown.open .nav-dropdown-menu {
  display: block;
}
#site-nav .nav-dropdown-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
#site-nav .nav-dropdown-menu a:hover {
  background: var(--btn-hover);
  color: var(--btn-text);
}
#site-nav .nav-dropdown-menu a.nav-dd-active {
  color: var(--purple);
  font-weight: 600;
  background: var(--purple-light);
}
#site-nav .nav-dropdown-menu.nav-dd-right {
  left: auto;
  right: 0;
}
.nav-dd-sep {
  height: 1px;
  background: var(--toolbar-border);
  margin: 4px 6px;
}
.nav-dd-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 12px 2px;
  opacity: 0.6;
}

#site-nav .nav-scheduled-game > span { display:inline-flex; align-items:center; gap:6px; }
#site-nav .nav-scheduled-game svg { width:13px; height:13px; flex:none; }
#site-nav .nav-scheduled-game {
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:25px;
  padding:0 11px;
  border-radius:7px;
  background:color-mix(in srgb,var(--scheduled-bg) 76%,var(--surface));
  color:var(--scheduled-color) !important;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}
#site-nav .nav-scheduled-game:hover { background:var(--scheduled-color) !important; color:#fff !important; }

/* Pending lobby pill — "waiting to join", shown after a student joins a game
   lobby and navigates elsewhere; a small pulsing dot signals it's live. */
#site-nav .nav-lobby-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:25px;
  padding:0 11px;
  border-radius:7px;
  background:color-mix(in srgb,var(--lobby-bg) 76%,var(--surface));
  color:var(--lobby-color) !important;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}
#site-nav .nav-lobby-pill:hover { background:var(--lobby-color) !important; color:#fff !important; }
#site-nav .nav-lobby-pill > span { display:inline-flex; align-items:center; gap:6px; }
#site-nav .nav-lobby-pill svg { width:13px; height:13px; flex:none; }
#site-nav .nav-lobby-pill::before {
  content:'';
  width:7px; height:7px;
  border-radius:50%;
  background:var(--lobby-color);
  flex:none;
  animation: nav-lobby-pulse 1.4s ease-in-out infinite;
}
@keyframes nav-lobby-pulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(0.7); }
}

/* ── Footer ───────────────────────────────────────────────── */
#site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 48px;
  background: var(--surface);
  border-top: 1px solid var(--toolbar-border);
  flex-shrink: 0;
}
#site-footer .footer-copy {
  font-size: 12px;
  color: var(--text-muted);
}
#site-footer .footer-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
#site-footer a {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
}
#site-footer a:hover {
  color: var(--btn-text);
}
/* Info pages (js/footer.js data-footer="pill"): just the copyright line in
   a solid rounded card, matching the Blips page sign-off. */
#site-footer.site-footer--pill {
  justify-content: center;
  height: auto;
  padding: 24px 16px 28px;
  background: none;
  border-top: 0;
}
#site-footer .footer-pill {
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--btn-border);
  color: color-mix(in srgb, var(--text-muted) 55%, var(--btn-text));
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ── Fixed-nav page scroll ───────────────────────────────────
   Content pages wrap everything after the nav in
   <div class="page-scroll">…</div>. The body stays locked to the window
   (css/main.css: 100svh, overflow hidden, flex column), so the nav never
   moves — no rubber-band drag, and the scrollbar starts below the nav —
   exactly like index.html's .lander-main and the games' .mb-scroll.
   js/footer.js puts the footer at the end of this box, pushed to the bottom
   on short pages. Scroll code must target this box, not window. */
.page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.page-scroll > * { flex-shrink: 0; }
.page-scroll > #site-footer { margin-top: auto; }

/* Mobile — collapse left links, keep right */
@media (max-width: 700px) {
  #site-nav { padding: 0 16px; }
  #site-nav .nav-left { display: none; }
  #site-nav .nav-logo { margin-right: 0; }
}
@media (max-width: 480px) {
  #site-nav .nav-sep { display: none; }
  #site-nav .nav-right a:not(.nav-cta) { display: none; }
}

/* ── Game Menu launcher ───────────────────────────────────── */
/* The "Games" button at the left of the nav bar (js/nav.js) and the panel
   it opens under the nav: a card from the top-left corner on tablets and
   computers, a full-width sheet on phones. It replaced a fixed tab on the
   left edge that pages had to pad around. */
#site-nav .nav-games-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  height: 38px;
  padding: 0 13px 0 10px;
  margin-right: 2px;
  border: 1.5px solid color-mix(in srgb, var(--purple) 30%, var(--toolbar-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--purple) 8%, var(--surface));
  color: var(--purple);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}
#site-nav .nav-games-btn:hover { background: color-mix(in srgb, var(--purple) 15%, var(--surface)); border-color: var(--purple); }
#site-nav .nav-games-btn.is-open { background: var(--purple); border-color: var(--purple); color: var(--surface); }
#site-nav .nav-games-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
#site-nav .nav-games-btn svg { flex: none; }
@media (max-width: 700px) {
  #site-nav .nav-games-btn { width: 40px; padding: 0; margin-right: 6px; justify-content: center; }
  #site-nav .nav-games-label { display: none; }
}
/* The Games button needs ~56px on phones: take it from the logo, the site QR
   button and the side padding so the icons on the right stay on screen
   (down to 360px wide). */
@media (max-width: 480px) {
  #site-nav { padding-left: 10px; padding-right: 10px; }
  #site-nav .nav-logo { margin-right: 0; }
  #site-nav .nav-logo img,
  #site-nav .nav-logo svg { height: 30px; }
  #site-nav .nav-site-qr-btn { display: none; }
  /* the icon buttons set their padding inline, hence !important */
  #site-nav a.nav-link,
  #site-nav button.nav-link { padding-left: 6px !important; padding-right: 6px !important; }
}

/* The backdrop starts below the nav bar, so the nav stays usable while the
   menu is open; a click on it closes the menu without reaching the page. */
.proj-backdrop {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1005;
  display: none;
  background: color-mix(in srgb, var(--btn-text) 10%, transparent);
}
.proj-backdrop.show { display: block; }

/* Frosted glass: --menu-glass is how opaque it is, and it falls back to
   solid below. */
.proj-launcher {
  --menu-glass: 90%;
  --menu-tint: color-mix(in srgb, var(--purple) 8%, var(--surface));
  position: fixed;
  top: calc(60px + env(safe-area-inset-top, 0px) + 8px);
  left: 16px;
  z-index: 1010;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - 24px);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--toolbar-border);
  border-radius: 18px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--menu-tint) var(--menu-glass), transparent),
    color-mix(in srgb, var(--surface) var(--menu-glass), transparent) 160px);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 50px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.08);
  transform-origin: top left;
}
.proj-launcher.open { display: flex; animation: proj-launcher-in .16s ease-out; }
@keyframes proj-launcher-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
html[data-reduce-motion] .proj-launcher.open { animation: none; }
html[data-theme="high-contrast"] .proj-launcher,
html[data-reduce-motion] .proj-launcher { --menu-glass: 100%; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .proj-launcher { --menu-glass: 100%; }
}
.proj-launcher [hidden] { display: none !important; }

.proj-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 42px;
  margin: 14px 14px 0;
  padding: 0 12px;
  border: 1.5px solid var(--toolbar-border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: text;
}
.proj-search:focus-within { border-color: var(--purple); color: var(--purple); }
.proj-search svg { flex: none; }
.proj-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--btn-text);
  font-family: inherit;
  font-size: 16px;   /* 16px stops iOS zooming the page when it's tapped */
}
.proj-search input::placeholder { color: var(--text-muted); }

.proj-launcher .proj-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--purple) 30%, transparent) transparent;
  padding: 14px 16px 18px;
}
.proj-launcher .proj-item { margin: 0 0 10px; padding: 10px 12px; }
.proj-launcher .proj-item-icon { width: 38px; height: 38px; }
.proj-launcher .proj-item-icon svg { width: 20px; height: 20px; }
.proj-launcher .proj-item--scheduled { margin-top: 0; }
.proj-launcher .proj-cat:first-of-type { margin-top: 6px; }
.proj-launcher .proj-cat { margin-bottom: 16px; }
.proj-launcher .proj-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.proj-launcher .proj-tile-icon { aspect-ratio: 1.2; border-radius: 14px; }
/* Status cards carry the game's fixed pastel icon bg — re-tint from the theme. */
.proj-launcher .proj-item--challenge .proj-item-icon { background: color-mix(in srgb, var(--challenge-color, var(--purple)) 16%, var(--surface)); }
.proj-launcher .proj-item--scheduled .proj-item-icon { background: color-mix(in srgb, var(--scheduled-color) 16%, var(--surface)); }
/* While searching, only matching games show. */
.proj-launcher.is-searching .proj-item,
.proj-launcher.is-searching .proj-recent { display: none; }
.proj-no-match { margin: 4px 2px 0; font-size: 13.5px; color: var(--text-muted); }

@media (max-width: 700px) {
  .proj-launcher {
    top: calc(60px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px));
    border-width: 0 0 1px;
    border-radius: 0 0 20px 20px;
    transform-origin: top center;
  }
  .proj-launcher .proj-panel { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}


.proj-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--toolbar-border);
  background: var(--bg);
  text-decoration: none;
  color: var(--btn-text);
  margin-bottom: 10px;
  transition: border-color .12s, background .12s, transform .12s;
}
.proj-item:hover {
  border-color: var(--purple);
  background: var(--purple-light);
  transform: translateX(2px);
}
.proj-item-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--dgc-bg, var(--purple-light));
  color: var(--dgc-color, var(--purple));
  border: 1px solid color-mix(in srgb, var(--dgc-color, var(--btn-text)) 55%, transparent);
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.proj-item-icon svg { width: 22px; height: 22px; }
.proj-item-name { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.proj-item-desc { font-size: 12px; color: var(--text-muted); }

.proj-item--featured {
  border-color: var(--purple);
  background: var(--purple-light);
}
.proj-item--featured:hover { filter: brightness(0.95); transform: translateX(2px); }
.proj-item--featured .proj-item-icon { background: var(--purple); color: #fff; }
.proj-item--scheduled { margin-top:8px; cursor:pointer; border-color:color-mix(in srgb,var(--scheduled-color) 35%,var(--btn-border)); background:color-mix(in srgb,var(--scheduled-color) 13%,var(--surface)); }
.proj-item--scheduled:hover { transform:translateX(2px); filter:brightness(.96); }
.proj-item--scheduled .proj-item-icon { color:var(--scheduled-color); background:var(--scheduled-bg); }
.proj-item--scheduled .proj-item-desc { color:var(--scheduled-color); font-weight:700; }

/* Global Challenge status card, shown in the Game Menu under Join
   Multiplayer (and in the home page's own menu). */
.proj-item--challenge { margin-bottom:14px; cursor:pointer; border-color:color-mix(in srgb,var(--challenge-color,var(--purple)) 35%,var(--btn-border)); background:color-mix(in srgb,var(--challenge-color,var(--purple)) 13%,var(--surface)); }
.proj-item--challenge:hover { transform:translateX(2px); filter:brightness(.96); }
.proj-item--challenge .proj-item-icon { color:var(--challenge-color,var(--purple)); background:var(--challenge-bg,var(--purple-light)); }
.proj-item--challenge .proj-item-desc { color:var(--challenge-color,var(--purple)); font-weight:700; }

/* The same challenge as a dot on the Games button — only on phones, where
   the nav's left side (and so the pill below) is hidden. */
.nav-games-badge {
  position:absolute; top:-8px; right:-10px;
  min-width:18px; height:16px; padding:0 5px; border-radius:999px;
  background:var(--challenge-color,var(--purple)); color:#fff;
  font:700 10px/16px system-ui,sans-serif; text-align:center;
  box-shadow:0 0 0 2px var(--surface);
  pointer-events:none;
  display:none;
}
.nav-games-badge.show { display:block; }

/* Global Challenge pill in the nav bar (js/nav.js renderChallengePill):
   game icon, name, progress bar and %, linking to challenge.html. It sheds
   the name, then the bar, as the nav gets narrower. */
#site-nav a.nav-challenge-pill {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
  height:30px;
  padding:0 12px 0 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--challenge-color,var(--purple)) 34%,var(--btn-border));
  background:color-mix(in srgb,var(--challenge-color,var(--purple)) 13%,var(--surface));
  color:color-mix(in srgb,var(--challenge-color,var(--purple)) 82%,var(--btn-text));
  font-size:12.5px;
  font-weight:700;
  text-decoration:none;
}
#site-nav a.nav-challenge-pill:hover {
  background:color-mix(in srgb,var(--challenge-color,var(--purple)) 22%,var(--surface));
  color:color-mix(in srgb,var(--challenge-color,var(--purple)) 82%,var(--btn-text));
}
#site-nav a.nav-challenge-pill:focus-visible { outline:3px solid var(--challenge-color,var(--purple)); outline-offset:2px; }
.nav-challenge-pill svg { width:15px; height:15px; flex:none; }
.nav-challenge-pill .ncp-name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.nav-challenge-pill .ncp-meter {
  flex:none;
  width:48px; height:6px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in srgb,var(--challenge-color,var(--purple)) 22%,var(--surface));
}
.nav-challenge-pill .ncp-meter i { display:block; height:100%; border-radius:inherit; background:var(--challenge-color,var(--purple)); }
.nav-challenge-pill .ncp-status { flex:none; font-variant-numeric:tabular-nums; }
@media (max-width: 1100px) { .nav-challenge-pill .ncp-name { display:none; } }
@media (max-width: 860px)  { .nav-challenge-pill .ncp-meter { display:none; } }

/* Scheduled solo-game unavailable view: navigation stays usable above it. */
#mb-game-access-pending { position:fixed; z-index:900; top:calc(60px + env(safe-area-inset-top,0px)); right:0; bottom:0; left:0; display:grid; place-items:center; background:var(--bg); color:var(--purple); }
.mb-access-spinner { width:34px; height:34px; border:4px solid var(--purple-light); border-top-color:var(--purple); border-radius:50%; animation:mb-access-spin .7s linear infinite; }
@keyframes mb-access-spin { to { transform:rotate(360deg); } }
#mb-game-unavailable { position:fixed; z-index:900; top:calc(60px + env(safe-area-inset-top,0px)); right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto; background:var(--bg); color:var(--btn-text); text-align:center; }
.mb-unavailable-card { position:relative; isolation:isolate; overflow:hidden; width:min(100%,620px); min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:42px 36px; border:1.5px solid color-mix(in srgb,var(--unavailable-game-color) 35%,var(--btn-border)); border-radius:24px; background:color-mix(in srgb,var(--unavailable-game-color) 13%,var(--surface)); box-shadow:0 18px 55px color-mix(in srgb,var(--btn-text) 14%,transparent); }
.mb-unavailable-watermark { position:absolute; z-index:-1; left:-48px; bottom:-55px; width:230px; height:230px; color:var(--unavailable-game-color); opacity:.1; transform:rotate(-9deg); }
.mb-unavailable-watermark svg { width:100%; height:100%; }
.mb-unavailable-icon { display:grid; place-items:center; width:62px; height:62px; margin-bottom:20px; border-radius:17px; color:var(--unavailable-game-color); background:var(--unavailable-game-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--unavailable-game-color) 14%,transparent); }
.mb-unavailable-icon svg { width:34px; height:34px; }
.mb-unavailable-card h1 { margin:0 0 12px; color:var(--btn-text); font-size:clamp(23px,4vw,31px); line-height:1.2; }
.mb-unavailable-card p { margin:0 0 27px; color:var(--text-muted); font-size:16px; line-height:1.55; }
.mb-unavailable-card > a { display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:12px; background:var(--purple); color:var(--surface); font-size:15px; font-weight:800; text-decoration:none; }
.mb-unavailable-card > a:hover { background:var(--purple-dark); color:var(--surface); }
@media(max-width:700px){.mb-unavailable-card{min-height:300px;padding:34px 22px}.mb-unavailable-watermark{width:180px;height:180px}}


.proj-item-divider {
  border: none;
  border-top: 1px solid var(--toolbar-border);
  margin: 4px 0 12px;
}

/* ── Game Menu — categorized icon grid ──────────────────────── */
:root {
  /* Width of the teacher portal sidebar (css/teacher.css). */
  --game-menu-w: clamp(236px, 24vw, 300px);
  --cat-maths:    #2d7dd2;
  --cat-words:    #D97706;
  --cat-logic:    #3e9a4a;
  --cat-creative: #D946A0;
}
.proj-cat { margin-bottom: 18px; }
.proj-cat:last-child { margin-bottom: 0; }
.proj-cat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  padding: 0 2px;
}
.proj-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--cat-color, var(--purple)); }
.proj-cat-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.proj-tile-grid {
  display: grid;
  /* minmax(0, …): a long name ("Minesweeper") must never widen its column —
     that made every icon in the column bigger (seen on iPad). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.proj-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  min-width: 0;
}
.proj-tile-icon {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--dgc-color, var(--btn-text)) 55%, transparent);
  box-shadow: var(--shadow);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dgc-bg, var(--surface-2));
  color: var(--dgc-color, var(--btn-text));
  transition: transform .12s, background .12s;
}
.proj-tile-icon svg { width: 46%; height: 46%; }
.proj-tile:hover .proj-tile-icon { transform: translateY(-1px); }
.proj-tile:active .proj-tile-icon { transform: scale(.94); }
.proj-tile-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: none;
  color: var(--btn-text);
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;   /* "Mine-sweeper" rather than spilling out of the tile */
  -webkit-hyphens: auto;
}

/* Access badges (BETA / OPEN NOW / LIMITED TIME) on menu items and tiles. */
.proj-badge {
  --badge: var(--purple);
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.5;
  vertical-align: middle;
  color: color-mix(in srgb, var(--badge) 80%, var(--btn-text));
  background: color-mix(in srgb, var(--badge) 15%, var(--surface));
}
.proj-tile .proj-badge { margin-left: 0; }
.proj-badge--beta    { --badge: #7C3AED; }
.proj-badge--open    { --badge: #059669; }
.proj-badge--limited { --badge: #D97706; }

/* ── Themed tile grid (opt-in: add .proj-grid--themed to the container) ──
   Tints are mixed from each game's --dgc-color into the active theme's
   --surface instead of using the fixed pastel --dgc-bg, so tiles sit right
   on every theme, dark scene and seasonal event. Used by index.html's game
   menu; the Game Menu launcher (js/nav.js) uses it too. */
.proj-grid--themed .proj-cat { margin-bottom: 20px; }
.proj-grid--themed .proj-cat-head {
  display: inline-flex;
  padding: 4px 11px 4px 8px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat-color) 13%, var(--surface));
}
.proj-grid--themed .proj-cat-name {
  font-size: 10.5px;
  color: color-mix(in srgb, var(--cat-color) 75%, var(--btn-text));
}
.proj-grid--themed .proj-tile { border-radius: 16px; outline: none; }
.proj-grid--themed .proj-tile-icon {
  background: color-mix(in srgb, var(--dgc-color, var(--purple)) 14%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--dgc-color, var(--purple)) 32%, var(--surface));
  color: color-mix(in srgb, var(--dgc-color, var(--purple)) 78%, var(--btn-text));
  box-shadow: 0 1px 3px color-mix(in srgb, var(--dgc-color, var(--purple)) 18%, transparent);
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.proj-grid--themed .proj-tile:hover .proj-tile-icon,
.proj-grid--themed .proj-tile:focus-visible .proj-tile-icon {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--dgc-color, var(--purple)) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--dgc-color, var(--purple)) 55%, var(--surface));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--dgc-color, var(--purple)) 26%, transparent);
}
.proj-grid--themed .proj-tile:focus-visible .proj-tile-icon {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.proj-grid--themed .proj-tile:active .proj-tile-icon { transform: scale(.94); }
.proj-grid--themed .proj-tile-label { font-size: 11px; }
/* Short landscape windows (small laptops, iPad Split View / Stage Manager):
   flatter tiles so more games fit, in the launcher and the home page menu. */
@media (orientation: landscape) and (max-height: 700px) {
  .proj-grid--themed .proj-tile-icon { aspect-ratio: 1.3; }
}
html[data-reduce-motion] .proj-grid--themed .proj-tile-icon { transition: none; transform: none !important; }
/* Touch screens (iPad app, tablets): no sticky hover lift after a tap —
   keep just the press-in feedback. */
.proj-grid--themed .proj-tile { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .proj-grid--themed .proj-tile:hover .proj-tile-icon {
    transform: none;
    background: color-mix(in srgb, var(--dgc-color, var(--purple)) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--dgc-color, var(--purple)) 32%, var(--surface));
    box-shadow: 0 1px 3px color-mix(in srgb, var(--dgc-color, var(--purple)) 18%, transparent);
  }
  .proj-grid--themed .proj-tile:active .proj-tile-icon { transform: scale(.94); }
}

/* ── Theme picker ──────────────────────────────────────────── */
.nav-theme-wrap {
  position: relative;
  flex-shrink: 0;
}
.nav-theme-menu {
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--toolbar-border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 9100;
  min-width: 130px;
}
.nav-theme-menu.open { display: block; }
.nav-theme-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.theme-swatches {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0;
  background: var(--sw1);
  border-radius: 20px;
  padding: 3px 6px;
  border: 1px solid rgba(0,0,0,.15);
}
.theme-swatches span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  flex-shrink: 0;
}

/* Swatch colors — update these when a theme's palette changes */
.nav-theme-opt[data-theme="light"]  { --sw1: #f0eee8; --sw2: #534AB7; }
.nav-theme-opt[data-theme="dark"]   { --sw1: #111318; --sw2: #7B74D8; }
.nav-theme-opt[data-theme="ocean"]  { --sw1: #0b1e35; --sw2: #4BAED6; }
.nav-theme-opt[data-theme="forest"] { --sw1: #141f14; --sw2: #5EC05E; }
.nav-theme-opt[data-theme="rose"]   { --sw1: #fdf2f5; --sw2: #D946A0; }
.nav-theme-opt[data-theme="sand"]   { --sw1: #faf5ec; --sw2: #D97706; }
.nav-theme-opt[data-theme="sky"]    { --sw1: #eff6ff; --sw2: #2d7dd2; }
.nav-theme-opt[data-theme="slate"]  { --sw1: #1e2433; --sw2: #8899dd; }
.nav-theme-opt[data-theme="dusk"]   { --sw1: #12101e; --sw2: #C084FC; }
.nav-theme-opt[data-theme="high-contrast"] { --sw1: #ffffff; --sw2: #000000; }
.theme-swatches span { background: var(--sw2); }
.nav-theme-opt:hover {
  background: var(--btn-hover);
  color: var(--btn-text);
}
.nav-theme-opt.active {
  color: var(--purple);
  font-weight: 600;
}
.nav-theme-divider {
  height: 1px;
  margin: 5px 6px;
  background: var(--toolbar-border);
}
.nav-theme-section-label {
  padding: 3px 12px 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Reward (shop) theme swatches — keep in step with shop.html THEME_SWATCHES */
.nav-theme-opt[data-theme="candy"]    { --sw1: #fff0f6; --sw2: #ec4899; }
.nav-theme-opt[data-theme="midnight"] { --sw1: #131208; --sw2: #f0c030; }
.nav-theme-opt[data-theme="neon"]     { --sw1: #060e08; --sw2: #00e85a; }
.nav-theme-opt[data-theme="galaxy"]   { --sw1: #0e0728; --sw2: #a060ff; }
.nav-theme-opt[data-theme="sunset"]   { --sw1: #fff4ec; --sw2: #f2711c; }
.nav-theme-opt[data-theme="mint"]     { --sw1: #eafbf4; --sw2: #10b981; }
.nav-theme-opt[data-theme="lavender"] { --sw1: #f5f0fc; --sw2: #8b5cf6; }
.nav-theme-opt[data-theme="coffee"]   { --sw1: #efe4d8; --sw2: #8b5a2b; }

/* ── Scenes menu: "Scenes" pill + panel of scenes and themes (js/nav.js) ── */
.nav-scenes-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.nav-scenes-btn[aria-expanded="true"] { background: var(--btn-hover); color: var(--btn-text); }
@media (max-width: 640px) {
  .nav-scenes-btn { padding: 5px 9px; }
  .nav-scenes-label { display: none; }            /* icon only on phones */
}
.nav-scenes-menu {
  width: 296px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 14px;
}
.nav-scene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px 4px 6px;
}
.nav-scene-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 4px 6px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.nav-scene-opt:hover { background: var(--btn-hover); color: var(--btn-text); }
.nav-scene-opt.active { border-color: var(--purple); color: var(--purple); background: color-mix(in srgb, var(--purple) 8%, transparent); }
.nav-scene-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 56 / 36;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--toolbar-border);
}
.nav-scene-thumb svg { display: block; width: 100%; height: 100%; }
/* "Reduce animations" switch (MB_SET_REDUCED_MOTION in js/nav.js) */
.nav-motion-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--btn-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.nav-motion-opt:hover { background: var(--btn-hover); }
.nav-motion-switch {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--toolbar-border);
  transition: background .15s;
}
.nav-motion-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s;
}
.nav-motion-opt[aria-checked="true"] .nav-motion-switch { background: var(--purple); }
.nav-motion-opt[aria-checked="true"] .nav-motion-switch::after { transform: translateX(14px); }
.nav-scene-thumb { position: relative; }
/* Shop scenes not yet bought: faded, with a padlock; click opens the shop */
.nav-scene-opt.is-locked .nav-scene-thumb svg { opacity: .4; filter: grayscale(.6); }
.nav-scene-opt.is-locked { color: color-mix(in srgb, var(--text-muted) 75%, transparent); }
.nav-scene-opt.is-locked:hover .nav-scene-thumb svg { opacity: .7; filter: none; }
.nav-scene-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(20,20,35,.72);
  color: #fff;
}
.nav-scene-opt.is-locked .nav-scene-thumb .nav-scene-lock svg { width: 12px; height: 12px; opacity: 1; filter: none; }
.nav-scene-heading { cursor: default; user-select: none; -webkit-user-select: none; }

/* Matrix easter-egg toast */
.nav-egg-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 9500;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 12px;
  background: #000;
  color: #3CFF6B;
  border: 1px solid #1f7a36;
  box-shadow: 0 0 24px rgba(60,255,107,.35);
  font: 600 14px/1.4 ui-monospace, Menlo, Consolas, monospace;
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.nav-egg-toast.show { opacity: 1; transform: translate(-50%, 0); }
.nav-scenes-menu .nav-theme-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.nav-scenes-menu .nav-theme-opt { padding: 7px 8px; font-size: 12.5px; }

/* ── Info dropdown ─────────────────────────────────────────── */
.nav-info-wrap {
  position: relative;
  flex-shrink: 0;
}
.nav-info-menu {
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--toolbar-border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 9100;
  min-width: 150px;
}
.nav-info-menu.open { display: block; }
.nav-info-opt {
  display: block;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.nav-info-opt:hover {
  background: var(--btn-hover);
  color: var(--btn-text);
}


/* ── Site QR modal ──────────────────────────────────────────── */
#nav-qr-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9500;
}
#nav-qr-modal {
  background: var(--surface); border-radius: 18px; padding: 36px 40px;
  text-align: center; width: 320px; max-width: 92vw;
  box-shadow: 0 24px 60px rgba(0,0,0,.2); position: relative;
}
#nav-qr-close {
  position: absolute; top: 14px; right: 16px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--btn-border); background: var(--surface);
  font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--btn-text);
}
#nav-qr-close:hover { background: #FCEBEB; border-color: #E24B4A; color: #A32D2D; }
#nav-qr-modal h2 { font-size: 17px; font-weight: 700; color: var(--btn-text); margin-bottom: 4px; }
.nav-qr-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
#nav-qr-canvas { display: flex; justify-content: center; margin-bottom: 16px; }
#nav-qr-canvas img, #nav-qr-canvas canvas { border-radius: 8px; border: 4px solid var(--surface); box-shadow: 0 2px 12px rgba(0,0,0,.1); }
.nav-qr-url { font-size: 11px; color: var(--text-muted); word-break: break-all; margin-bottom: 18px; line-height: 1.5; }
.nav-qr-copy-btn {
  width: 100%; padding: 10px; background: var(--purple); color: #fff;
  border: none; border-radius: 9px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .12s;
}
.nav-qr-copy-btn:hover { background: var(--purple-dark); }

/* Phones: the nav icons set display/padding inline, so these need !important.
   The QR button goes, and the standalone Blips link too (the info menu at the
   far right already lists "Meet the Blips"), so everything fits a 375px
   iPhone SE. The bar scrolls sideways as a last resort. */
@media (max-width: 640px) {
  #site-nav { padding-left: 10px; padding-right: 10px; overflow-x: auto; scrollbar-width: none; }
  #site-nav::-webkit-scrollbar { display: none; }
  #site-nav > * { flex: none; }
  #site-nav .nav-logo img,
  #site-nav .nav-logo svg { height: 30px; }
  #site-nav .nav-site-qr-btn,
  #site-nav a.nav-link[href$="blips-demo.html"] { display: none !important; }
  #site-nav a.nav-link,
  #site-nav button.nav-link { padding-left: 6px !important; padding-right: 6px !important; }
}