/* The site's top nav (nav.js builds it): the bar, the menus, search, the bell, the account menu and the phone panel.
   2026-10-04: moved out of site.css (which @imports it first) so pages without site.css - the world apps - can link
   this alone; every token has a fallback equal to site.css's :root value. */
nav, nav * { box-sizing: border-box; }
/* the bar's box, which docs pages get from site.css .wrap */
nav .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) { nav .wrap { padding-inline: 16px; } }

/* z-index 45 (2026-10-27): above the pages' own sticky bars (Trader Flies' tab bar is 30) so an open menu is never
   covered, below the modals and sheets (50+) so they still cover the nav */
nav { position: sticky; top: 0; z-index: 45; background: rgba(0,0,0,.78); backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line, #1a1d1c); }
nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 18px var(--display, "Outfit", "Inter", system-ui, sans-serif); text-decoration: none; }
.logo { display: block; }                   /* logo-t.webp: the logo on transparency (logo.webp has a black plate) */
.brand .logo { height: 24px; width: auto; }
/* the logo never shrinks under the links (2026-10-03: "Home" was drawn over it at 1100-1280 px); the links wrap */
nav .wrap > .brand { flex: none; }
nav .wrap { height: auto; min-height: 58px; }
@media (min-width: 521px) { nav .wrap > ul { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; } }
@media (max-width: 520px) { nav .wrap > ul { flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; } }

nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-size: 14px; align-items: center; }
nav ul a { color: var(--muted, #9ba5a1); text-decoration: none; }
nav ul a:hover { color: var(--text, #f4f7f6); }
@media (max-width: 1080px) {
  nav .wrap { height: auto; min-height: 58px; padding-block: 8px; flex-wrap: wrap; }
  nav ul { gap: 14px; font-size: 13px; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  nav .wrap { height: auto; padding-block: 10px; flex-wrap: wrap; gap: 8px 14px; }
  nav ul { gap: 14px; font-size: 13px; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  nav .wrap { gap: 6px 12px; }
  nav ul { gap: 12px; font-size: 12px; }
  .brand { font-size: 16px; }
}

nav ul a.on { color: var(--text, #f4f7f6); }
nav ul a.on::after { content: ""; display: block; height: 2px; border-radius: 2px; background: var(--mint, #5ef2cc); margin-top: 4px; box-shadow: 0 0 8px var(--glow, rgba(94,242,204,.28)); }

/* --- nav menus -------------------------------------------------------- */
nav li.dd { position: relative; display: flex; align-items: center; gap: 2px; }
nav .ddbtn { all: unset; cursor: pointer; color: var(--muted, #9ba5a1); font-size: 11px; line-height: 1; padding: 5px 4px; border-radius: 4px; }
nav .ddbtn:hover { color: var(--text, #f4f7f6); }
nav .ddbtn:focus-visible, nav a:focus-visible { outline: 2px solid var(--cool, #a4fbe6); outline-offset: 2px; }
nav .ddmenu { position: absolute; top: calc(100% + 12px); left: -12px; min-width: 240px; margin: 0; padding: 6px;
              display: none; flex-direction: column; gap: 2px; background: var(--panel, #0a0b0b); border: 1px solid var(--line, #1a1d1c);
              border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.7); z-index: 20; }
nav .ddmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
nav li.dd:hover .ddmenu, nav li.dd:focus-within .ddmenu, nav li.dd.open .ddmenu { display: flex; }
nav .ddmenu li, nav .ddmenu li:last-child { display: block; }
nav .ddmenu a { display: block; padding: 9px 11px; border-radius: 7px; color: var(--text, #f4f7f6); font-size: 14px; white-space: nowrap; }
nav .ddmenu a:hover { background: var(--bg-2, #060707); }
nav .ddmenu a.on { background: var(--bg-2, #060707); }
nav .ddmenu a.on::after { display: none; }
/* a link nav.js marks new (its 5th field): a small mint pill after the label */
nav .nav-new { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--mint, #5ef2cc);
  color: #04110d; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; }
nav .ddmenu small { display: block; color: var(--dim, #5f6865); font: 12px/1.4 var(--mono, "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace); margin-top: 2px; white-space: normal; }
/* menus whose label is the whole button (Research, Apps, $FLYAI) */
nav .ddlabel { font-size: inherit; color: var(--muted, #9ba5a1); padding: 4px 2px; }
nav .ddlabel span { font-size: 10px; margin-left: 2px; }
nav .ddlabel:hover, nav li.dd.open .ddlabel, nav .ddlabel.on { color: var(--text, #f4f7f6); }
nav .ddlabel.on::after { content: ""; display: block; height: 2px; border-radius: 2px; background: var(--mint, #5ef2cc); margin-top: 4px; box-shadow: 0 0 8px var(--glow, rgba(94,242,204,.28)); }
nav .ddmenu.right { left: auto; right: -12px; }
nav .ddmenu { align-items: stretch; text-align: left; }   /* not centred like the bar's items or a page's hero: rows line up */
/* a long menu (nav.js: more than 6 links, Fly Desk) in two columns, so it fits a laptop screen's height */
nav li.dd:hover .ddmenu.wide, nav li.dd:focus-within .ddmenu.wide, nav li.dd.open .ddmenu.wide {
  display: grid; grid-template-columns: repeat(2, minmax(240px, 280px)); column-gap: 4px; }
/* a phone: a menu opens full width under the whole bar, not hung off its label (2026-10-02: the menus by either
   edge - Apps, Market, $FLYAI - ran off the screen) */
@media (max-width: 760px) {
  nav li.dd { position: static; }
  nav .ddmenu, nav .ddmenu.right { top: calc(100% - 4px); left: 12px; right: 12px; width: auto; min-width: 0; }
  nav .ddmenu a { white-space: normal; }
}

/* the language menu (i18n.js injects a neutral default under :where, so this wins on the site only) */
nav .langpick { font: 500 13px/1.2 var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); color: var(--muted, #9ba5a1); background: transparent; border: 1px solid var(--line, #1a1d1c);
                border-radius: 999px; padding: 6px 10px; }
nav .langpick:hover { color: var(--text, #f4f7f6); border-color: var(--mint, #5ef2cc); }
nav .langpick option { background: var(--panel, #0a0b0b); color: var(--text, #f4f7f6); }

/* nav: a glass bar, hover pills */
nav { background: rgba(0,0,0,.62); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
      border-bottom-color: rgba(255,255,255,.06); }
nav ul > li > a:not(.btn), nav .ddlabel { padding: 6px 8px !important; border-radius: 999px; transition: background .15s, color .15s; }
nav ul > li { white-space: nowrap; }        /* a crowded bar wraps whole items (or scrolls), never a label's words */
nav ul > li > a:not(.btn):hover, nav .ddlabel:hover { background: rgba(255,255,255,.06); }
nav ul { gap: 6px; }
nav ul a.on::after, nav .ddlabel.on::after { margin: 3px auto 0; width: 16px; }
nav .ddmenu { background: rgba(10,11,11,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
              border-color: var(--edge, rgba(255,255,255,.07)); border-radius: var(--r-md, 16px); }
nav .ddmenu a { border-radius: 10px; }
@media (max-width: 760px) { nav ul { gap: 2px; } nav ul > li > a:not(.btn), nav .ddlabel { padding: 5px 7px !important; } }

/* the current page: a mint pill, not an underline (the underline lifted the label above its neighbours) */
nav ul a.on:not(.btn), nav .ddlabel.on { background: rgba(94,242,204,.1); color: var(--mint-hi, #a4fbe6) !important; }
nav ul a.on::after, nav .ddlabel.on::after { display: none; }

/* Buy $FLYAI, the one action on every page (2026-10-16 brief): a mint pill in the bar and the phone menu. After the
   current-page rule and with :not(.btn) so it wins in every state (2026-10-16, the user, of the old Let-it-fly pill:
   "on hover it's like invisible" - on its own page the .on rule took the fill away and turned the text the hover's mint) */
nav a[data-nav-key="buy"]:not(.btn), nav a[data-nav-key="buy"].on:not(.btn) {
  background: var(--mint, #5ef2cc); color: #04110d !important; border-radius: 999px; padding: 6px 14px !important;
  font-weight: 700; box-shadow: 0 0 18px -6px var(--glow, rgba(94,242,204,.28)); transition: background .15s, box-shadow .15s; }
nav a[data-nav-key="buy"]:not(.btn):hover, nav a[data-nav-key="buy"]:not(.btn):focus-visible, nav a[data-nav-key="buy"].on:not(.btn):hover {
  background: var(--mint-hi, #a4fbe6); color: #04110d !important; box-shadow: 0 0 24px -4px var(--glow, rgba(94,242,204,.28)); }
nav a[data-nav-key="buy"]::after { display: none; }

/* More: its groups side by side, a title over each, plain links (nav.js "groups") */
nav li.dd:hover .ddmenu.groups, nav li.dd:focus-within .ddmenu.groups, nav li.dd.open .ddmenu.groups {
  display: grid; grid-template-columns: repeat(3, minmax(150px, 190px)); column-gap: 6px; padding: 10px; }
nav .ddmenu.groups ul { display: flex; flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; }
nav .ddmenu.groups a { padding: 7px 10px; font-size: 14px; }
nav .ddh { margin: 4px 10px 6px; font: 600 11px var(--mono, "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace);
  letter-spacing: .1em; text-transform: uppercase; color: var(--mint, #5ef2cc); opacity: .8; }
@media (max-width: 760px) { nav li.buycta a { padding: 7px 12px !important; font-size: 13px; } }

/* the account menu on every page (nav.js account): Sign in, or the nickname with my flies, the leaderboard, a nickname box */
nav li.acct .acct-in { white-space: nowrap; }
nav li.acct .acct-name { max-width: 12em; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
nav li.acct .ddmenu { min-width: 240px; }
nav li.acct .acct-nick, nav li.acct .acct-ref:not([hidden]), nav li.acct .acct-x:not([hidden]) { padding: 8px 12px; display: grid; gap: 6px; }
nav li.acct .acct-nick label, nav li.acct .acct-ref label, nav li.acct .acct-x label { font-size: 12px; color: var(--muted, #9ba5a1); }
nav li.acct .acct-nick div, nav li.acct .acct-ref div, nav li.acct .acct-x div { display: flex; gap: 6px; }
nav li.acct .acct-nick input, nav li.acct .acct-ref input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--line, #1a1d1c); background: var(--bg, #000000); color: var(--text, #f4f7f6); }
nav li.acct .acct-nick small, nav li.acct .acct-ref small, nav li.acct .acct-x small { font-size: 12px; color: var(--muted, #9ba5a1); min-height: 1em; }
nav li.acct .acct-profile { background: none; border: 0; color: var(--text, #f4f7f6); font: inherit; font-weight: 600; padding: 8px 12px; cursor: pointer; width: 100%; text-align: left; }
nav li.acct .acct-profile:hover { color: var(--mint, #5ef2cc); }
nav li.acct .acct-soulbound { background: none; border: 0; color: var(--text, #f4f7f6); font: inherit; padding: 8px 12px; cursor: pointer; width: 100%; text-align: left; }
nav li.acct .acct-soulbound:hover { color: var(--mint, #5ef2cc); }
nav li.acct .acct-out { background: none; border: 0; color: var(--muted, #9ba5a1); font: inherit; padding: 8px 12px; cursor: pointer; width: 100%; text-align: left; }
nav li.acct .acct-out:hover { color: var(--text, #f4f7f6); }

nav li.acct .acct-btn { border: 1px solid var(--line, #1a1d1c); border-radius: 999px; padding: 6px 12px !important; font-size: 13px; }

/* search, notifications, badges in the nav (nav.js searchBox / bell / account badges) */
nav li.srch .srch-btn, nav li.bell .bell-btn, nav li.chat .chat-btn { font-size: 15px; padding: 6px 9px !important; position: relative; }
nav li.chat[hidden] { display: none; }
nav li.srch .ddmenu, nav li.bell .ddmenu { width: min(340px, calc(100vw - 24px)); }
nav li.srch .srch-box { padding: 10px 12px 6px; }
nav li.srch .srch-box input { width: 100%; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line, #1a1d1c);
  background: var(--bg, #000000); color: var(--text, #f4f7f6); }
nav li.srch .srch-out, nav li.bell .bell-list { display: grid; max-height: 60vh; overflow: auto; padding: 4px 0 8px; }
nav li.srch .srch-out > small, nav li.bell .bell-list > small { padding: 8px 14px; color: var(--muted, #9ba5a1); }
nav li.srch .srch-out a, nav li.bell .bell-list a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; text-decoration: none;
  color: var(--text, #f4f7f6); font-size: 14px; }
nav li.srch .srch-out a small, nav li.bell .bell-list a small { color: var(--muted, #9ba5a1); font-size: 12px; white-space: nowrap; }
nav li.srch .srch-out a:hover, nav li.bell .bell-list a:hover { background: rgba(255,255,255,.05); }
nav li.bell .bell-list a.new { border-left: 2px solid var(--mint, #5ef2cc); }
nav li.bell .bell-n, nav li.chat .chat-n { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--mint, #5ef2cc);
  color: #000; font: 700 10px/16px var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); text-align: center; }
nav li.acct .acct-badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px 4px; }
nav li.acct .acct-badges .badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(94,242,204,.12);
  color: var(--mint, #5ef2cc); border: 1px solid rgba(94,242,204,.35); }

/* X and Discord (nav.js SOCIAL, 2026-10-05) */
nav li.social { display: flex; align-items: center; gap: 2px; }
nav li.social a { display: grid; place-items: center; padding: 6px 7px !important; color: var(--muted, #9ba5a1); border-radius: 10px; }
nav li.social a:hover, nav li.social a:focus-visible { color: var(--mint, #5ef2cc); background: rgba(255,255,255,.04); }
.mnav ul.mnav-social { grid-template-columns: 1fr 1fr; }

/* one menu at a time (nav.js only()): a shut menu stays closed even under hover or focus */
nav li.dd.shut:not(.open) .ddmenu { display: none !important; }

/* the phone bar (2026-10-03): one row - logo, search, bell, account, ☰ - and the menus in a panel under it */
nav li.burger, .mnav { display: none; }
@media (max-width: 760px) {
  nav .wrap { flex-wrap: nowrap !important; height: 56px !important; min-height: 0 !important; padding-block: 0 !important; gap: 10px !important; }
  nav .wrap > ul { flex: 1; min-width: 0; flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 6px !important; width: auto !important; }
  nav li.main { display: none !important; }
  nav li.burger { display: flex; }
  .burger-btn { all: unset; cursor: pointer; width: 40px; height: 40px; display: grid; place-content: center; gap: 4px;
    border: 1px solid var(--line, #1a1d1c); border-radius: 12px; background: rgba(255,255,255,.03); }
  .burger-btn i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text, #f4f7f6); transition: transform .2s, opacity .2s; }
  .burger-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .burger-btn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .burger-btn:focus-visible { outline: 2px solid var(--mint, #5ef2cc); outline-offset: 2px; }
  nav .acct-name { display: inline-block; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  nav .acct-in { white-space: nowrap; }
  nav .brand .logo { height: 22px; }
  nav .ddmenu.right { position: fixed; top: 56px; left: 12px; right: 12px; min-width: 0; max-height: calc(100dvh - 72px); overflow-y: auto; }
  .mnav:not([hidden]) { display: grid; align-content: start; grid-auto-rows: max-content; gap: 10px; position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 56px); overflow-y: auto;
    background: #050505; padding: 12px 14px 32px; animation: mnav-in .18s ease-out; }
  @keyframes mnav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .mnav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .mnav ul.mnav-top { grid-template-columns: 1fr; }
  /* .mnav-sec is a <section>: .mnav in the selector outranks site.css's `.home section`, which now loads after this */
  nav .mnav .mnav-sec { border: 1px solid var(--line, #1a1d1c); border-radius: 16px; padding: 10px; margin: 0; min-height: 0; background: #0b0d0c; }
  .mnav a { display: block; padding: 11px 10px; border-radius: 10px; color: var(--text, #f4f7f6); text-decoration: none; font-size: 15px; }
  .mnav ul.mnav-top a { border: 1px solid var(--line, #1a1d1c); border-radius: 14px; padding: 12px 14px; }
  .mnav a.on { background: rgba(94,242,204,.12); color: var(--mint, #5ef2cc); }
  .mnav a:active { background: var(--line, #1a1d1c); }
  .mnav-h { margin: 2px 10px 6px; font: 600 11px var(--mono, "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--mint, #5ef2cc); opacity: .8; }
  html.mnav-open body { overflow: hidden; }
}
/* a narrow phone (2026-11-05, the user: "Buy $FLYAI is on top of the logo"): Buy, search, chat, bell, account and ☰
   were wider than the room right of the logo, and flex-end pushed the overflow left over it. Tighter pills here, and
   the account name is the one item that gives way: it shrinks to an ellipsis before the row can reach the logo */
@media (max-width: 760px) {
  nav .wrap > ul > li { flex: none; }
  nav .wrap > ul > li.acct { flex: 0 1 auto; min-width: 0; }
  nav li.acct .acct-btn { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; min-width: 0; }
  nav li.acct .acct-name { min-width: 0; flex: 0 1 auto; }
}
@media (max-width: 480px) {
  nav .wrap { gap: 8px !important; }
  nav .wrap > ul { gap: 2px !important; }
  nav li.buycta a { padding: 6px 10px !important; font-size: 12px; }
  nav li.srch .srch-btn, nav li.bell .bell-btn, nav li.chat .chat-btn { padding: 6px 5px !important; font-size: 14px; }
  nav li.acct .acct-btn { padding: 6px 9px !important; font-size: 12px; }
  .burger-btn { width: 36px; height: 36px; }
}
@media (max-width: 760px) {
  nav li.langli { display: none !important; }
  .mnav-lang { margin: 16px 8px 0; }
}
nav li.acct .acct-x div { align-items: center; justify-content: space-between; }
nav li.acct .acct-x-handle { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; }
nav li.acct .acct-x-handle img { border-radius: 50%; flex: none; }

/* the XP level ring at the left of the account pill (nav.js wireXp, 2026-11-06, flytrade/GAMIFY-PLAN.md): the level in
   the middle, the way to the next level around it, a dot while today's check-in or a quest is open; it opens Today */
nav li.acct.has-xp { gap: 0; }
nav li.acct .xpc-btn { all: unset; box-sizing: border-box; position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; margin-right: -26px; z-index: 1;
  background: conic-gradient(var(--mint, #5ef2cc) calc(var(--p, 0) * 360deg), rgba(255,255,255,.12) 0); }
nav li.acct .xpc-btn::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg, #000); }
nav li.acct .xpc-btn b { position: relative; font: 700 11px/1 var(--mono, ui-monospace, monospace); color: var(--mint, #5ef2cc); }
nav li.acct .xpc-btn:hover::before { background: rgba(94,242,204,.14); }
nav li.acct .xpc-btn:focus-visible { outline: 2px solid var(--mint, #5ef2cc); outline-offset: 2px; }
nav li.acct.has-xp .acct-btn { padding-left: 34px !important; }
nav li.acct .xpc-btn.xpc-pulse { animation: xpc-pulse .9s ease-out; }
@keyframes xpc-pulse { 0% { box-shadow: 0 0 0 0 rgba(94,242,204,.7); } 100% { box-shadow: 0 0 0 12px rgba(94,242,204,0); } }
nav li.acct .xpc-dot { position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint, #5ef2cc);
  box-shadow: 0 0 0 2px var(--bg, #000), 0 0 8px rgba(94,242,204,.9); animation: td-blink 1.6s ease-in-out infinite; }
nav li.acct .xpc-dot[hidden] { display: none; }
@keyframes td-blink { 50% { opacity: .45; } }
/* narrow phones: the ring and a 👤 side by side, the name gone (it squeezed the logo); under 361 px the 👤 alone */
@media (max-width: 480px) {
  nav li.acct.has-xp .xpc-btn { width: 28px; height: 28px; margin-right: 4px; }
  nav li.acct.has-xp { flex: none; }
  nav li.acct.has-xp .acct-name, nav li.acct.has-xp .acct-btn > span[aria-hidden] { display: none; }
  nav li.acct.has-xp .acct-btn { padding: 0 !important; width: 28px; height: 28px; justify-content: center; }
  nav li.acct.has-xp .acct-btn::before { content: "👤"; font-size: 14px; }
}
/* under 361 px: the 👤 alone (Today is on My flies and /xp), and the icon buttons tighter so it fits beside ☰ */
@media (max-width: 360px) {
  nav li.acct .xpc-btn { display: none; }
  nav .wrap > ul { gap: 0 !important; }
  nav li.srch .srch-btn, nav li.bell .bell-btn, nav li.chat .chat-btn { padding: 6px 3px !important; }
  nav li.acct.has-xp { flex: none; min-width: 28px; }
  nav li.acct.has-xp .acct-btn { max-width: none; }
}

/* the level-up banner, once per new level (nav.js levelUp) */
.xpc-up { position: fixed; z-index: 1000; left: 50%; top: 76px; transform: translateX(-50%); width: min(460px, calc(100vw - 24px));
  display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 20px 16px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, rgba(94,242,204,.22), rgba(6,7,7,.97) 60%); border: 1px solid rgba(94,242,204,.55);
  box-shadow: 0 20px 60px -15px rgba(0,0,0,.9), 0 0 40px -10px rgba(94,242,204,.5); color: var(--text, #f4f7f6);
  animation: xpc-in .45s cubic-bezier(.2,1.4,.4,1); cursor: pointer; }
.xpc-up b { font: 800 30px/1.1 var(--display, inherit); color: var(--mint, #5ef2cc); letter-spacing: -.01em; }
.xpc-up span { font-size: 14px; color: var(--muted, #9ba5a1); }
.xpc-up button { margin-top: 6px; border: 0; border-radius: 999px; padding: 7px 16px; background: var(--mint, #5ef2cc); color: #000;
  font: 700 13px/1.2 var(--sans, inherit); cursor: pointer; }
.xpc-bit { position: absolute; top: -8px; width: 7px; height: 11px; border-radius: 2px; opacity: 0; pointer-events: none;
  animation: xpc-fall 1.6s ease-in forwards; }
@keyframes xpc-in { from { transform: translate(-50%, -24px) scale(.9); opacity: 0; } }
@keyframes xpc-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), 150px) rotate(540deg); } }
@media (max-width: 640px) { .xpc-up { top: 64px; } .xpc-up b { font-size: 24px; } }

/* "+50 XP soon" floating up from the button pressed (window.flyNav.xp.gain) */
.xpc-gain { position: fixed; z-index: 1001; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
  font: 800 15px var(--mono, ui-monospace, monospace); color: var(--mint, #5ef2cc); text-shadow: 0 0 12px rgba(94,242,204,.8), 0 2px 4px #000;
  animation: xpc-rise 1.8s ease-out forwards; }
@keyframes xpc-rise { 0% { opacity: 0; margin-top: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -48px; } }
@media (prefers-reduced-motion: reduce) { .xpc-up, .xpc-gain, nav li.acct .xpc-btn.xpc-pulse { animation: none; } }


/* Today: check-in, streak, freezes and the 3 quests (nav.js openToday); a bottom sheet on phones */
.td-pop { position: fixed; inset: 0; z-index: 990; background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
  display: flex; justify-content: flex-end; align-items: flex-start; padding: 64px 16px 16px; animation: fl-fade .15s ease-out; }
.td-box { width: min(380px, 100%); max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-2, #060707); border: 1px solid rgba(94,242,204,.4); border-radius: 18px; padding: 14px 16px 16px;
  box-shadow: 0 30px 70px -20px #000, 0 0 40px -18px rgba(94,242,204,.5); color: var(--text, #f4f7f6); animation: td-in .2s ease-out; }
@keyframes td-in { from { transform: translateY(-8px); opacity: 0; } }
@keyframes fl-fade { from { opacity: 0; } }
.td-head { display: flex; align-items: center; justify-content: space-between; }
.td-head b { font: 800 20px var(--display, inherit); }
.td-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2, #2a302e); background: var(--panel, #0b0c0c);
  color: inherit; cursor: pointer; }
.td-reset { display: block; color: var(--dim, #6c7471); font: 500 11px var(--mono, monospace); margin: 2px 0 10px; }
.td-note { margin: 0 0 8px; font-size: 13px; color: var(--muted, #9ba5a1); line-height: 1.45; }
.td-buy { display: inline-block; margin-bottom: 10px; color: var(--mint, #5ef2cc); font-weight: 600; font-size: 13px; }
.td-check { display: grid; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid var(--line, #1d2120);
  background: linear-gradient(135deg, rgba(94,242,204,.1), transparent 70%); }
.td-streak { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.td-streak b { font: 800 26px var(--display, inherit); }
.td-streak span { color: var(--muted, #9ba5a1); font-size: 13px; }
.td-freeze { margin-left: auto; font: 600 12px var(--mono, monospace) !important; color: #9fdcfb !important; cursor: help; }
.td-next { color: var(--muted, #9ba5a1); font-size: 12px; }
.td-go { margin-top: 4px; border: 0; border-radius: 999px; padding: 10px 14px; font: 700 14px/1.2 var(--sans, inherit); cursor: pointer;
  background: var(--mint, #5ef2cc); color: #000; box-shadow: 0 0 22px -6px rgba(94,242,204,.8); transition: transform .1s; }
.td-go:hover:not(:disabled) { transform: translateY(-1px); }
.td-go:disabled { cursor: default; opacity: .55; box-shadow: none; }
.td-go.done { background: rgba(94,242,204,.12); color: var(--mint, #5ef2cc); opacity: 1; }
.td-msg { margin: 8px 0 0; font-size: 12px; color: var(--muted, #9ba5a1); }
.td-box h4 { margin: 14px 0 6px; font: 700 12px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--dim, #6c7471); }
.td-quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.td-quests li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line, #1d2120);
  background: var(--panel, #0b0c0c); }
.td-quests li.done { border-color: rgba(94,242,204,.4); background: rgba(94,242,204,.06); }
.td-quests li.done .td-q { color: var(--muted, #9ba5a1); text-decoration: line-through; }
.td-tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px;
  background: var(--panel-2, #121414); }
.td-quests li.done .td-tick { background: var(--mint, #5ef2cc); color: #000; font-weight: 800; }
.td-q { flex: 1; min-width: 0; color: var(--text, #f4f7f6); text-decoration: none; font-size: 14px; }
a.td-q:hover { color: var(--mint, #5ef2cc); }
.td-xp { flex: none; font: 700 12px var(--mono, monospace); color: var(--mint, #5ef2cc); }
.td-reroll { flex: none; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2, #2a302e); background: none;
  color: var(--muted, #9ba5a1); cursor: pointer; font: 600 11px/1 var(--sans, inherit); }
.td-lag { display: block; margin-top: 2px; font-size: 11px; color: var(--dim, #6c7471); }
.td-reroll:hover { color: var(--text, #f4f7f6); border-color: var(--mint, #5ef2cc); }
/* 2026-11-07: a new quest for a burn, and the X post box */
.td-quests li { flex-wrap: wrap; }
.td-burn { color: #ffb36b; border-color: rgba(255,179,107,.35); }
.td-burn:hover { color: #ffd2a6; border-color: #ffb36b; }
.td-all { border-style: dashed !important; }
.td-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.td-link { background: none; border: 0; padding: 0; color: var(--muted, #9ba5a1); font: 600 13px/1.3 var(--sans, inherit); cursor: pointer; text-decoration: none; }
.td-link:hover { color: var(--mint, #5ef2cc); }
@media (max-width: 640px) {
  .td-pop { padding: 0; align-items: flex-end; justify-content: stretch; }
  .td-box { width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: 26px; animation: td-up .22s ease-out; }
  @keyframes td-up { from { transform: translateY(30px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { nav li.acct .xpc-dot, .td-box { animation: none; } }

/* the blue check (2026-11-09): fly.ai ambassadors, holders of badge #12 */
.fly-verified { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%;
  background: #1d9bf0; color: #fff; font: 700 10px/1 system-ui, sans-serif; vertical-align: middle; flex: none; }
h3 .fly-verified { width: 18px; height: 18px; font-size: 12px; }
.td-sub { margin: 12px 0 6px; font: 600 13px var(--sans, system-ui); color: var(--muted, #9ba5a1); }
.td-refq li .td-tick { width: 18px; text-align: center; }