@import url("./buttons.css?v=20261007-3");
@import url("./art-style.css?v=20261007-3");
@import url("./light-theme.css?v=20261007-3");
@import url("./practice-explorer.css?v=20261007-3");
@import url("./practice-mobile.css?v=20261007-3");
@import url("./game-results.css?v=20261007-3");
@import url("./page-chrome.css?v=20261007-3");
@import url("./leaderboard-cutoffs.css?v=20261007-3");
@import url("./back-controls.css?v=20261007-3");

/* Shared, reviewed site navigation. Game and dialog surfaces retain their theme. */
body.world-clue-navigation {
  --navigation-night: color-mix(in srgb, var(--world-clue-blue-deep) 24%, #0f172a);
  --navigation-ink: var(--world-clue-action-text);
  --navigation-muted: #cbd5e1;
  --navigation-edge: color-mix(in srgb, var(--world-clue-play-blue) 35%, var(--navigation-night));
  --navigation-brand-width: 720px;
  --navigation-brand-inset: var(--world-clue-space-5);
}
body.world-clue-navigation {
  min-height: 100svh;
  padding-bottom: var(--navigation-footer-height, 48px);
  background: var(--navigation-night);
  isolation: isolate;
}
html:has(body.world-clue-navigation) { scroll-padding-bottom: calc(var(--navigation-footer-height, 48px) + 16px); }
html:has(body.world-clue-navigation), body.world-clue-navigation { overscroll-behavior-y:none; }
/* Longer branches must not narrow the artwork and shift the first action row. */
html:has(body.world-clue-navigation:not(.app-open)) { scrollbar-gutter: stable; }
body.world-clue-navigation:not(.app-open) {
  min-height: 100svh;
  background: var(--navigation-night);
  color: var(--navigation-ink);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
/* The large viewport stays constant as mobile browser bars collapse. Dynamic
   height recrops cover media during scroll. Keep still/video/blur identical. */
body.world-clue-navigation::before,
body.world-clue-navigation::after,
.navigation-motion-background {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100vw;
  height: 100lvh;
  pointer-events: none;
}
body.world-clue-navigation::before {
  content: "";
  z-index: -2;
  background-image: linear-gradient(180deg, rgb(8 20 38 / 24%), rgb(8 20 38 / 8%) 60%, rgb(8 20 38 / 68%)), url("/assets/navigation-background-v2.webp");
  background-size: 100% 100%, cover;
  background-position: center, center bottom;
  background-repeat: no-repeat;
}
@media (max-width: 760px) and (orientation: portrait) {
  body.world-clue-navigation::before {
    background-image: linear-gradient(180deg, rgb(8 20 38 / 24%), rgb(8 20 38 / 8%) 60%, rgb(8 20 38 / 68%)), url("/assets/navigation-background-mobile-v1.webp");
  }
}
/* Blur the scene through an overlay, never by enlarging or moving its image. */
body.world-clue-navigation.app-open::after {
  content: "";
  z-index: -1;
  backdrop-filter: blur(12px);
  background: rgb(8 20 38 / 35%);
}
/* Local game-background review: use the recap's globe-grid geometry once a
   game is visible. The menu and browsing routes keep their landscape. */
body.world-clue-navigation.app-open:has(
  #tabGame:not([hidden]), #tabWeekly:not([hidden]),
  #tabTrain:not([hidden]) #trainPlayArea:not([hidden]),
  #room:not([hidden]) #game:not([hidden]), #saved-results:not([hidden])
) {
  & .game-brand { display: block; }
  & .site-utility-bar { padding-bottom: 0; }
  & .page { padding-top: var(--world-clue-space-2); }
  &::before {
    background: radial-gradient(ellipse at 50% 36%,
      color-mix(in srgb, var(--world-clue-play-blue) 17%, var(--world-clue-button-night)),
      var(--world-clue-button-night) 60%,
      color-mix(in srgb, var(--world-clue-button-night) 72%, black));
  }
  &::after {
    backdrop-filter: none;
    background: var(--world-clue-play-blue);
    opacity: .18;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cellipse cx='500' cy='230' rx='450' ry='270'/%3E%3Cellipse cx='500' cy='230' rx='310' ry='270'/%3E%3Cellipse cx='500' cy='230' rx='150' ry='270'/%3E%3Cpath d='M500-40v540M50 230h900M90 125c200 100 620 100 820 0M90 335c200-100 620-100 820 0'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
  }
}
.navigation-motion-background {
  z-index: -1;
}
.navigation-motion-background video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.navigation-motion-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(8 20 38 / 24%), rgb(8 20 38 / 8%) 60%, rgb(8 20 38 / 68%)); }
body.world-clue-navigation #menuMotionToggle { width: 40px; min-height: 40px; padding: var(--world-clue-space-2); margin-inline-end: auto; }
.menu-motion-toggle svg { width: 18px; height: 18px; flex: none; }
.menu-motion-toggle [data-motion-play], .menu-motion-toggle[data-paused="true"] [data-motion-pause] { display: none; }
.menu-motion-toggle[data-paused="true"] [data-motion-play] { display: inline; }
body.app-open .navigation-motion-background, .navigation-motion-background[hidden], #menuMotionToggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .navigation-motion-background, .menu-motion-toggle { display: none !important; } }
body.world-clue-navigation .world-clue-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: var(--world-clue-space-2);
}
.world-clue-theme-toggle::before {
  content: ""; width: 22px; height: 22px; flex: none; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.9 13.2A9 9 0 0 1 10.8 3.1a9 9 0 1 0 10.1 10.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.dark-mode .world-clue-theme-toggle::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
body.world-clue-navigation:not(.app-open) .page {
  width: 100%; max-width: none; padding: 0; margin: 0;
  flex: 1; display: flex; flex-direction: column;
}
body.world-clue-navigation .site-utility-bar {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: var(--world-clue-space-4); padding: var(--world-clue-space-5) var(--world-clue-space-6);
  background: transparent; min-height: 88px; width: 100%;
}
body.world-clue-navigation .site-utility-bar :is(.theme-toggle-btn, .auth-login-btn, .auth-user-btn, #globalHowToBtn) {
  --world-clue-button-focus: var(--world-clue-gold);
}
.navigation-account-area { display: flex; align-items: center; gap: var(--world-clue-space-3); min-width: 0; max-width: 100%; }
body.world-clue-navigation .navigation-account-area .auth-landing-container { position: relative; margin: 0; }
body.world-clue-navigation:not(.app-open) :is(.theme-toggle-btn, .auth-login-btn, .auth-user-btn) {
  min-height: 44px; border: 1px solid var(--navigation-edge); border-radius: var(--world-clue-radius-control);
  background: color-mix(in srgb, var(--navigation-night) 92%, transparent); color: var(--navigation-ink);
  box-shadow: none; padding: var(--world-clue-space-2) var(--world-clue-space-4); font-size: .86rem;
  backdrop-filter: blur(12px);
}
body.world-clue-navigation:not(.app-open) :is(.theme-toggle-btn, .auth-login-btn, .auth-user-btn):hover {
  background: var(--world-clue-blue-deep); border-color: var(--world-clue-play-blue);
}
body.world-clue-navigation #landing {
  --world-clue-button-focus: var(--world-clue-gold);
  flex: 1; min-height: 620px; padding: var(--world-clue-space-5) var(--world-clue-space-5) var(--world-clue-space-6);
  justify-content: flex-start; max-width: none; gap: 0;
}
body.world-clue-navigation #landing .landing-brand {
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
  width: min(var(--navigation-brand-width), 100%); gap: var(--world-clue-space-1);
  /* The 44px Back target has 8px clearance above and below on every branch. */
  margin: 0 auto calc(44px + 2 * var(--world-clue-space-2));
}
/* Fit the visible artwork, not the supplied PNGs' transparent canvas. The
   measured bounds include four source pixels of breathing room on each side
   vertically. Keep the original assets intact and scale both frames together. */
body.world-clue-navigation :is(#landing .landing-artwork, .game-brand) {
  position: relative; flex-shrink: 0; overflow: hidden;
  aspect-ratio: 2172 / var(--art-visible-height);
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 40%));
}
body.world-clue-navigation :is(#landing .landing-artwork--logo, .game-brand) {
  /* Exact nontransparent vertical bounds of the supplied v5 logo: [23, 700). */
  --art-top: 23; --art-visible-height: 677;
}
body.world-clue-navigation #landing .landing-artwork--logo { width: 100%; }
body.world-clue-navigation .game-brand {
  display: none; grid-column: 1 / -1; justify-self: center;
  /* Match the landing's inset despite the utility bar's wider side padding. */
  width: min(var(--navigation-brand-width), calc(100% + 2 * (var(--world-clue-space-6) - var(--navigation-brand-inset))));
}
body.world-clue-navigation #landing .landing-artwork--tagline {
  --art-top: 115; --art-visible-height: 462; width: min(408px, 68%);
}
body.world-clue-navigation :is(#landing, .game-brand) :is(.landing-logo, .landing-tagline) {
  position: absolute; top: calc(-100% * var(--art-top) / var(--art-visible-height)); left: 0;
  display: block; width: 100%; max-width: none; height: auto; margin: 0;
}
body.world-clue-navigation #landing :is(.landing-nav, .landing-submenu) {
  width: min(400px, 100%); max-width: 400px; margin: 0;
  gap: var(--world-clue-space-4); order: 1;
}
body.world-clue-navigation #landing [hidden] { display: none !important; }
/* Reserve the same Back row on every branch so the menu actions never shift. */
body.world-clue-navigation #landing .landing-nav { padding-top: 0; }
body.world-clue-navigation #landing .landing-submenu { position: relative; }
body.world-clue-navigation #landing .navigation-menu-button { position: relative; margin: 0; }
body.world-clue-navigation #landing .navigation-menu-button::before {
  content: ""; position: absolute; inset-inline-start: var(--world-clue-space-5); top: calc(50% - 14px);
  width: 28px; height: 28px; background: var(--button-icon);
  mask: var(--navigation-icon) center / contain no-repeat;
}
body.world-clue-navigation #landing .navigation-menu-button::after {
  content: ""; position: absolute; inset-inline-end: var(--world-clue-space-5); top: calc(50% - 4px);
  width: 8px; height: 8px; border-top: 1.5px solid var(--button-icon); border-right: 1.5px solid var(--button-icon);
  transform: rotate(45deg);
}
body.world-clue-navigation #landing .navigation-menu-button:disabled::after {
  width: 12px; height: 14px; top: calc(50% - 7px); border: 0; transform: none;
  background: var(--button-icon);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20' fill='none' stroke='white' stroke-width='1.6'%3E%3Crect x='2' y='8' width='12' height='10' rx='2'/%3E%3Cpath d='M4 8V5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.navigation-button-title { font-size: inherit; font-weight: inherit; }
.navigation-button-copy { display: flex; flex-direction: column; align-items: center; gap: var(--world-clue-space-1); }
.navigation-button-timer { display: block; color: inherit; font-size: .7rem; font-weight: 500; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.navigation-coming-soon-status { display: block; font-size: .8rem; font-weight: 500; white-space: nowrap; }
body.world-clue-navigation #landing .navigation-menu-button--coming-soon:disabled {
  filter: grayscale(1); cursor: not-allowed;
}
.navigation-branch-header {
  position: absolute; bottom: calc(100% + var(--world-clue-space-2));
  inset-inline-start: 0;
  width: 44px; height: 44px; margin: 0;
}
.navigation-branch-header h2 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body.world-clue-navigation #landing .navigation-branch-header button {
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--navigation-ink);
}
body.world-clue-navigation #landing .navigation-branch-header button:hover {
  background: color-mix(in srgb, var(--navigation-night) 60%, transparent);
}
.navigation-branch-header svg { width: 18px; height: 18px; flex-shrink: 0; }
body.world-clue-navigation :is(button, a, summary):focus-visible { outline: 3px solid var(--world-clue-button-focus); outline-offset: 4px; }
.navigation-version-link { color: var(--navigation-muted); text-decoration: none; white-space: nowrap; margin: 0; text-align: right; }
.navigation-release-links { display: inline-flex; align-items: center; gap: var(--world-clue-space-4); white-space: nowrap; }
body.world-clue-navigation .landing-current-version { margin: 0; font-size: .7rem; font-weight: 400; }
.navigation-version-link:hover { text-decoration: underline; text-underline-offset: 3px; }
body.world-clue-navigation .site-footer {
  --world-clue-button-focus: var(--world-clue-gold);
  position: fixed; inset: auto 0 0; z-index: 30; width: 100%; min-height: 48px;
  margin: 0; padding: var(--world-clue-space-1) var(--world-clue-space-5) calc(var(--world-clue-space-1) + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--world-clue-space-1) var(--world-clue-space-4);
  background: var(--navigation-night); border: 0; color: var(--navigation-muted);
}
body.world-clue-navigation .site-footer-copy { display: none; }
body.world-clue-navigation .site-footer .landing-social { margin: 0; gap: var(--world-clue-space-2); order: 0; }
body.world-clue-navigation .site-footer .landing-social a { opacity: 1; width: 32px; height: 32px; }
body.world-clue-navigation .landing-social svg { width: 18px; height: 18px; filter: grayscale(1) brightness(0) invert(.85); }
body.world-clue-navigation .site-footer :is(a, summary, .google-privacy-choices-button) { color: var(--navigation-muted); font-size: .76rem; }
body.world-clue-navigation :is(.site-footer-nav > a, .navigation-release-links > a) { display: inline-flex; min-height: 32px; align-items: center; }
body.world-clue-navigation .site-footer-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--world-clue-space-5); margin-inline-start: auto; }
.navigation-footer-more { position: relative; }
.navigation-footer-more summary { cursor: pointer; padding-block: var(--world-clue-space-2); }
.navigation-footer-more nav { position: absolute; bottom: 100%; right: 0; display: flex; flex-direction: column; gap: 16px; min-width: 180px; padding: 24px; border: 1px solid var(--navigation-edge); border-radius: 10px; background: var(--navigation-night); z-index: 2; }
body.world-clue-navigation .navigation-footer-more nav a { color: var(--navigation-muted); }
.navigation-data-views { display: flex; width: fit-content; margin: 0 auto 24px; gap: 4px; padding: 4px; border: 1px solid var(--world-clue-border); border-radius: 10px; background: var(--world-clue-surface-raised); }
.navigation-data-views a { min-width: 100px; padding: 12px 24px; border-radius: 10px; text-decoration: none; text-align: center; color: var(--world-clue-text); }
.navigation-data-views a[aria-current] { background: var(--world-clue-blue); color: var(--world-clue-action-text); font-weight: 700; }
.navigation-data-views a:hover { background: var(--world-clue-surface-subtle); color: var(--world-clue-text); }
#tabDataExplorer .explorer-controls[hidden] { display: none; }
body.world-clue-navigation .content-page--about .content-page-cta { justify-content: center; }
@media (min-height: 900px) and (min-width: 700px) {
  body.world-clue-navigation #landing { padding-top: min(7vh, 80px); }
}
@media (max-width: 600px) {
  body.world-clue-navigation { --navigation-brand-inset: var(--world-clue-space-4); }
  body.world-clue-navigation .site-utility-bar { flex-wrap: wrap; }
  body.world-clue-navigation:not(.app-open) .site-utility-bar { padding: 16px; gap: 8px; flex-wrap: wrap; min-height: 76px; }
  .navigation-account-area { gap: 8px; flex-wrap: wrap; }
  body.world-clue-navigation:not(.app-open) :is(.theme-toggle-btn, .auth-login-btn, .auth-user-btn) { font-size: .72rem; padding: 8px; min-height: 40px; }
  body.world-clue-navigation .global-actions { gap: 8px; }
  body.world-clue-navigation #landing { min-height: 570px; padding: 24px 16px; }

  body.world-clue-navigation #landing .navigation-menu-button::before { left: 16px; top: calc(50% - 12px); width: 24px; height: 24px; }
  body.world-clue-navigation #landing .navigation-menu-button::after { right: 16px; }
  body.world-clue-navigation .site-footer {
    display: grid; grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
    column-gap: var(--world-clue-space-3); padding-inline: var(--world-clue-space-3);
  }
  body.world-clue-navigation .site-footer .landing-social { grid-column: 2; grid-row: 1; justify-self: center; }
  body.world-clue-navigation .site-footer #menuMotionToggle { grid-column: 1; grid-row: 1; justify-self: start; }
  body.world-clue-navigation .site-footer-nav { grid-column: 1 / -1; grid-row: 2; }
  body.world-clue-navigation .site-footer-nav { gap: 4px 12px; flex-wrap: wrap; }
}
/* On phones the menu owns a full screen of scenery; the footer follows it in
   document flow, so wrapped links never cover the menu or consume its view. */
@media (max-width: 760px) {
  body.world-clue-navigation:not(.app-open) { padding-bottom:0; }
  /* Leave more scenery visible below the menu when browser chrome shortens
     the phone viewport. Move the intact brand group, not its individual art. */
  body.world-clue-navigation:not(.app-open) .site-utility-bar { padding-bottom: var(--world-clue-space-3); }
  body.world-clue-navigation #landing { padding-top: var(--world-clue-space-2); }
  body.world-clue-navigation #landing :is(.landing-nav, .landing-submenu) {
    width: min(240px, 100%); gap: var(--world-clue-space-2);
  }
  body.world-clue-navigation #landing .navigation-menu-button {
    min-height: 52px; padding: var(--world-clue-space-1) 40px; font-size: 1rem;
  }
  body.world-clue-navigation #landing .navigation-menu-button::before {
    left: var(--world-clue-space-3); top: calc(50% - 10px); width: 20px; height: 20px;
  }
  body.world-clue-navigation #landing .navigation-menu-button::after { right: var(--world-clue-space-3); }
  body.world-clue-navigation:not(.app-open) .site-footer { position:relative; inset:auto; flex:none; margin-top:auto; }
  body.world-clue-navigation:not(.app-open) #landing { min-height:calc(100svh - 60px); flex:none; }
  html:has(body.world-clue-navigation:not(.app-open)) { scroll-padding-bottom:16px; }
}

body.world-clue-navigation #landing a.navigation-menu-button { text-decoration: none; box-sizing: border-box; }
#landingPlayBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%205%2011%207-11%207Z%22%2F%3E%3C%2Fsvg%3E"); }
#landingDataBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m16%208-2.5%205.5L8%2016l2.5-5.5Z%22%2F%3E%3C%2Fsvg%3E"); }
#landingLeaderboardBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h8v6a4%204%200%200%201-8%200ZM12%2013v5m-4%203h8m-8-3h8M8%205H4v3a4%204%200%200%200%204%204m8-7h4v3a4%204%200%200%201-4%204%22%2F%3E%3C%2Fsvg%3E"); }
#landingDailyBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v4m8-4v4M4%2011h16m-12%205%202%202%205-4%22%2F%3E%3C%2Fsvg%3E"); }
#landingWeeklyBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v4m8-4v4M4%2011h16m-11%204h6%22%2F%3E%3C%2Fsvg%3E"); }
#landingTrainBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
#landingCountryBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%224%22%20ry%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3C%2Fsvg%3E"); }
#landingDataSetBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16v16H4Zm0%205h16M9%209v11%22%2F%3E%3C%2Fsvg%3E"); }
#landingHintListBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205c-3-2-6-2-9-1v15c3-1%206-1%209%201%203-2%206-2%209-1V4c-3-1-6-1-9%201Zm0%200v15%22%2F%3E%3C%2Fsvg%3E"); }
#landingFriendsBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2021v-3a6%206%200%200%201%2012%200v3m0-16a3%203%200%200%201%200%206m3%204a5%205%200%200%201%203%205%22%2F%3E%3C%2Fsvg%3E"); }

#landingArchiveBtn { --navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v4m8-4v4M4%2011h16m-12%205%202%202%205-4%22%2F%3E%3C%2Fsvg%3E"); }

body.world-clue-navigation .site-utility-bar .global-actions { justify-self: end; }
.navigation-schedule {
  display: flex; align-items: center; justify-content: center; gap: var(--world-clue-space-5);
  min-width: 0; color: var(--navigation-ink); text-align: center;
}
@media (max-width: 760px) {
  .navigation-schedule { min-height: 34px; }
}
body.world-clue-navigation .navigation-schedule p {
  margin: 0; padding: 0; background: none; border: 0;
  color: var(--navigation-ink); font-size: .8rem; font-weight: 500;
  line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 1px 4px var(--navigation-night);
}
body.world-clue-navigation .site-footer-nav { order: 2; }

/* An opaque reading surface keeps the scenery outside the leaderboard. */
body.world-clue-navigation #tabLeaderboard {
  width: min(760px, 100%); margin: var(--world-clue-space-4) auto var(--world-clue-space-6);
  padding: var(--world-clue-space-5); box-sizing: border-box;
}
#tabLeaderboard .tab-leaderboard-title { margin: 0 0 var(--world-clue-space-5); }
#tabLeaderboard .standalone-lb-content { max-width: none; padding: 0; }
#tabLeaderboard .lb-main-tabs { gap: var(--world-clue-space-3); margin-bottom: var(--world-clue-space-4); }
#tabLeaderboard .lb-sub-tabs { gap: var(--world-clue-space-2); margin-bottom: var(--world-clue-space-5); }
#tabLeaderboard .lb-main-tab { min-height: 52px; font-size: 1.1rem; }
#tabLeaderboard .lb-date-controls { margin-top: 0; gap: var(--world-clue-space-2); }
#tabLeaderboard .lb-date-input { min-height: 44px; }
#tabLeaderboard :is(.lb-date-btn, .lb-page-btn) { padding-inline: var(--world-clue-space-3); font-size: .8rem; }
@media (max-width: 760px) {
  body.world-clue-navigation .site-utility-bar { grid-template-columns: minmax(0, 1fr) auto; gap: var(--world-clue-space-3); }
  body.world-clue-navigation .navigation-schedule { grid-column: 1 / -1; grid-row: 2; }
  body.world-clue-navigation .site-utility-bar .global-actions { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
  .navigation-schedule { gap: var(--world-clue-space-3); }
  body.world-clue-navigation .navigation-schedule p { flex: 1; font-size: .7rem; white-space: normal; }
  body.world-clue-navigation #tabLeaderboard { padding: var(--world-clue-space-3); }
  body.world-clue-navigation .site-footer-nav { flex-basis: 100%; justify-content: center; margin-inline-start: 0; }
  .navigation-release-links { gap: var(--world-clue-space-3); }
}

/* Compact utility controls leave the main menu to the three main destinations. */
body.world-clue-navigation:not(.app-open) .navigation-schedule { display: none; }
body.world-clue-navigation:not(.app-open) .site-utility-bar {
  grid-template-columns: minmax(0, 1fr) auto; min-height: 60px;
  padding: var(--world-clue-space-2) var(--world-clue-space-4); gap: var(--world-clue-space-2);
}
body.world-clue-navigation:not(.app-open) .site-utility-bar .global-actions { grid-column: 2; grid-row: 1; }
body.world-clue-navigation .site-utility-bar :is(.auth-login-btn, .auth-user-btn) {
  min-height: 44px; height: 44px; padding: var(--world-clue-space-1) var(--world-clue-space-2);
  gap: var(--world-clue-space-2); font-size: .78rem; box-shadow: none;
}
body.world-clue-navigation .site-utility-bar .auth-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.world-clue-navigation .site-utility-bar .world-clue-theme-toggle {
  width: 44px; height: 44px; min-height: 44px; padding: var(--world-clue-space-3);
  border-color: transparent; background: transparent; box-shadow: none;
}
body.world-clue-navigation .site-utility-bar .world-clue-theme-toggle::before { width: 20px; height: 20px; }
.auth-dropdown-name { margin: var(--world-clue-space-2) var(--world-clue-space-3) 0; font-weight: 700; color: var(--world-clue-text); }
@media (max-width: 760px) {
  body.world-clue-navigation .site-utility-bar .auth-user-btn { width: 44px; padding: var(--world-clue-space-1); justify-content: center; }
  body.world-clue-navigation .site-utility-bar .auth-user-name { display: none; }
  body.world-clue-navigation:not(.app-open) { --navigation-brand-width: min(720px, 64svh); }
}
@media (max-width: 760px) and (max-height: 660px) {
  body.world-clue-navigation #landing .navigation-menu-button { min-height: 48px; }
}
body.world-clue-navigation:not(.dark-mode) .site-utility-bar :is(.auth-login-btn, .auth-user-btn) {
  background: linear-gradient(180deg, var(--world-clue-surface-raised), var(--world-clue-surface-subtle));
  color: var(--world-clue-clue-title-ink); border-color: var(--world-clue-border-strong);
}
body.world-clue-navigation:not(.dark-mode) .site-utility-bar .world-clue-theme-toggle {
  background: var(--world-clue-surface-raised); color: var(--world-clue-clue-title-ink);
}
body.world-clue-navigation:not(.dark-mode) .site-footer {
  --navigation-muted: var(--world-clue-text-muted);
  color: var(--world-clue-text-muted); background: var(--world-clue-surface);
}
body.world-clue-navigation:not(.dark-mode) .site-footer .landing-social svg { filter: grayscale(1) brightness(.35); }
body.world-clue-navigation:not(.dark-mode) .navigation-footer-more nav {
  background: var(--world-clue-surface-raised); border-color: var(--world-clue-border);
}
/* Chapter/help icons reuse the established line-art vocabulary. */
#landingLearnBtn, #landingWikiBtn, #landingHowToBtn {
  --navigation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 5c-3-2-6-2-9-1v15c3-1 6-1 9 1 3-2 6-2 9-1V4c-3-1-6-1-9 1Zm0 0v15'/%3E%3C/svg%3E");
}