/* nav.css - the shared site chrome: top navigation bar, social buttons and
 * footer, rendered by nav.js on every page that opts in with `data-site-nav`.
 *
 * Standalone by design. index.htm and the four original games load styles.css
 * too, but whats-new.html and 404.html do not, so nothing here may depend on it.
 * Everything is namespaced `.site-*` and every property a bare-element rule in
 * styles.css could reach (button padding, link colour) is restated explicitly -
 * see the "styles.css trap" note in CLAUDE.md.
 */

:root {
  --site-nav-h: 60px;
  --site-nav-purple: #9d4edd;
  --site-nav-amber: #ff9e00;
}

/* styles.css does not set a global border-box, and neither do the two
   self-contained pages, so the chrome states it for itself. Without this a
   `width: 100%` footer plus its own side padding is wider than the viewport
   and every phone gets a horizontal scrollbar. */
.site-nav, .site-footer, .dev-handle,
.site-nav *, .site-footer *, .dev-handle * { box-sizing: border-box; }

/* ---------------------------------------------------------------- top bar */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  min-height: var(--site-nav-h);
  display: flex;
  align-items: center;
  background: rgba(10, 8, 22, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(157, 78, 221, 0.28);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
  padding-top: env(safe-area-inset-top, 0px);
}

/* A hairline of the site's three accents, so the bar reads as chrome rather
   than as a dark strip that happens to sit at the top. */
.site-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    rgba(157, 78, 221, 0.9) 25%,
    rgba(37, 117, 252, 0.75) 50%,
    rgba(255, 158, 0, 0.85) 75%,
    transparent);
  opacity: 0.75;
}

.site-nav-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* -------------------------------------------------------------- the brand */

.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding: 4px 8px 4px 4px;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}

.site-nav-brand:hover { background: rgba(157, 78, 221, 0.16); transform: translateY(-1px); }

.site-nav-brand img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(157, 78, 221, 0.6);
  box-shadow: 0 0 14px rgba(157, 78, 221, 0.45);
}

.site-nav-wordmark {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

.site-nav-wordmark .g {
  background: linear-gradient(135deg, #ffffff 0%, var(--site-nav-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.site-nav-wordmark .fun { color: rgba(255, 255, 255, 0.5); }

/* --------------------------------------------------------------- the links */

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav-link {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 13px;
  border-radius: 11px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  color: #fff;
  background: rgba(157, 78, 221, 0.2);
  border-color: rgba(157, 78, 221, 0.38);
}

.site-nav-link[aria-current="page"] {
  color: var(--site-nav-amber);
  background: rgba(157, 78, 221, 0.24);
  border-color: rgba(157, 78, 221, 0.5);
}

/* ------------------------------------------------------- the $michi ticker */

/* Sits between the links and the socials. It is a link to a swap, so it is
   styled as a button rather than as a readout - the number is the hook, the
   click is the point.

   Everything inside is optional: michi-token.js writes the price and the change
   only if its quote arrives, so on a blocked or offline load this collapses to
   a "$MICHI" pill that still goes to DexScreener. The gap is on the flex container
   rather than as margins, so empty spans take no width at all. */
.site-nav-ticker {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, rgba(157, 78, 221, 0.32), rgba(255, 158, 0, 0.26));
  border: 1px solid rgba(255, 158, 0, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-nav-ticker:hover,
.site-nav-ticker:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 158, 0, 0.9);
  box-shadow: 0 6px 18px rgba(255, 158, 0, 0.35);
}

.ticker-sym { color: var(--site-nav-amber, #ff9e00); }
.ticker-price { font-variant-numeric: tabular-nums; }

.ticker-change {
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ticker-change.is-up { color: #37d67a; }
.ticker-change.is-down { color: #ff6b6b; }

/* The buy chip in the footer, given the accent the plain link chips do not get. */
.site-footer-chip.is-buy {
  color: #1a1206;
  background: linear-gradient(135deg, #ffc247, #ff9e00);
  border-color: rgba(255, 194, 71, 0.9);
  font-weight: 700;
}

.site-footer-chip.is-buy:hover,
.site-footer-chip.is-buy:focus-visible {
  box-shadow: 0 6px 18px rgba(255, 158, 0, 0.45);
}

/* ------------------------------------------------------------ social icons */

.site-nav-socials {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.site-social {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}

.site-social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.site-social:hover { transform: translateY(-2px); }

.site-social[data-net="x"]:hover,
.site-social[data-net="x"]:focus-visible {
  color: #0a0a0f;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.28);
}

.site-social[data-net="tg"]:hover,
.site-social[data-net="tg"]:focus-visible {
  color: #fff;
  background: #229ed9;
  border-color: #229ed9;
  box-shadow: 0 6px 18px rgba(34, 158, 217, 0.5);
}

/* --------------------------------------------------------- mobile toggle */

/* styles.css sets `button { min-width: 160px; padding: 12px 25px }` on every
   button on the page, which would blow this up to a 160px slab. Two classes
   out-specify a bare element selector, so this wins without !important. */
.site-nav .site-nav-toggle {
  display: none;
  min-width: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(157, 78, 221, 0.35);
  background: rgba(157, 78, 221, 0.14);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease;
}

.site-nav .site-nav-toggle:hover { background: rgba(157, 78, 221, 0.3); }
.site-nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.site-nav-toggle .bars { display: block; }
.site-nav-toggle .cross { display: none; }
.site-nav.is-open .site-nav-toggle .bars { display: none; }
.site-nav.is-open .site-nav-toggle .cross { display: block; }

.site-nav :focus-visible { outline: 2px solid var(--site-nav-amber); outline-offset: 2px; }

/* 1023, not 900. The bar is brand + six links + the $michi ticker + two socials,
   and adding the ticker pushed that past the viewport between 901px and about
   1090px - the Telegram icon was simply cut off the right edge, with no
   scrollbar to hint at it because .site-nav does not scroll. Widening the
   collapse point is the honest fix: the row genuinely no longer fits there. */
/* Moved again on 2026-08-29, from 1023px to 1139px, when the Account link
   became the seventh in the row: at 1024px the full row plus the ticker ran
   the last social icon out to 1081px. Same reasoning as before - the row
   genuinely no longer fits there, and a burger at 1100px is better than a
   clipped Telegram button. The sweep in tests/smoke.spec.js is what caught it. */
@media (max-width: 1139px) {
  .site-nav .site-nav-toggle { display: grid; }

  .site-nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 16px 18px;
    /* Fully opaque: the panel overlays a page of animated cat photos, and any
       translucency at all turns the link text into camouflage. */
    background: #0b0817;
    border-bottom: 1px solid rgba(157, 78, 221, 0.3);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
  }

  .site-nav.is-open .site-nav-links { display: flex; animation: site-nav-drop 0.22s ease both; }
  .site-nav-link { font-size: 0.92rem; padding: 11px 14px; }
}

@keyframes site-nav-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Between the collapse point and about 1220px the full link row and the ticker
   are both on screen and it is close. The 24h change is the first thing to go. */
@media (max-width: 1220px) {
  .ticker-change { display: none; }
}

/* The burger is the only way to the nav links under 1023px, so it is the one
   thing in the bar that may never be squeezed out. Adding the ticker did
   exactly that - at 390px it pushed the button to x=391 on a 390px viewport,
   which loses every link on the site on every phone. Measured, not eyeballed:
   see the widths in tests/smoke.spec.js. */
.site-nav .site-nav-toggle { flex: 0 0 auto; }
.site-nav-ticker { min-width: 0; }

@media (max-width: 560px) {
  /* The 24h change goes first. The price is the number worth showing and the
     bar has no room for both. */
  .site-nav-ticker { padding: 6px 10px; gap: 5px; font-size: 0.76rem; }
  .ticker-change { display: none; }
}

@media (max-width: 480px) {
  .site-nav-inner { padding: 8px 12px; gap: 6px; }
  .site-nav-socials { padding-left: 8px; gap: 5px; }
  .site-social { width: 33px; height: 33px; }
  .site-nav-ticker { padding: 6px 9px; font-size: 0.74rem; }

  /* Brand drops to the photo alone. That buys back about 90px - enough for the
     ticker, both socials and the burger to fit a 360px bar - and the photo is
     still a link home, so nothing is lost but the word. 480 rather than 420
     because the widest phone that still collapses the nav is 430 (iPhone Pro
     Max), and it was the one width left overflowing. */
  .site-nav-wordmark { display: none; }
  .site-nav-brand { padding: 2px; }
}

@media (max-width: 330px) {
  /* Narrower than an iPhone SE. Keep the pill and its link, drop the price. */
  .ticker-price { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav *, .site-footer * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------- the footer */

.site-footer {
  width: 100%;
  max-width: 900px;
  margin: 44px auto 0;
  padding: 26px 18px calc(28px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  border-top: 1px solid rgba(157, 78, 221, 0.22);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.site-footer-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
}

.site-footer-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(157, 78, 221, 0.14);
  border: 1px solid rgba(157, 78, 221, 0.34);
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.site-footer-chip svg { width: 15px; height: 15px; fill: currentColor; display: block; }

.site-footer-chip:hover,
.site-footer-chip:focus-visible {
  background: rgba(157, 78, 221, 0.32);
  border-color: rgba(157, 78, 221, 0.6);
  color: #fff;
  transform: translateY(-2px);
}

.site-footer-chip[data-net="x"]:hover     { background: #fff; border-color: #fff; color: #0a0a0f; }
.site-footer-chip[data-net="tg"]:hover    { background: #229ed9; border-color: #229ed9; color: #fff; }

.site-footer-line { margin: 0 0 8px; }

/*
 * The inline footer links measured 16px tall on a phone and sit two or three
 * to a line separated by a middot, which is a mis-tap waiting to happen. The
 * padding grows the hit box to ~28px and the equal negative margin keeps the
 * line box - and so the footer's height - exactly where it was; inline-block
 * is what makes vertical padding count towards the target at all.
 */
.site-footer-line a:not(.dev-handle),
.site-footer-fine a { display: inline-block; padding: 6px 3px; margin: -6px 0; }

.site-footer-line a { color: rgba(255, 255, 255, 0.72); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.site-footer-line a:hover { color: #fff; border-bottom-color: #fff; }
/* 32% white over the footer measured 2.9:1 - under AA at 11.5px, on every page
   that renders the footer. 0.52 clears 4.5:1 and still reads as fine print. */
.site-footer-fine { margin: 0; font-size: 0.72rem; color: rgba(255, 255, 255, 0.52); }
.site-footer-fine a { color: rgba(255, 255, 255, 0.66); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.site-footer-fine a:hover { color: #fff; border-bottom-color: #fff; }
/* A signed-in handle can be fourteen characters; keep it on one line. */
.site-nav-account { white-space: nowrap; max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.site-footer :focus-visible { outline: 2px solid var(--site-nav-amber); outline-offset: 2px; }

/* --------------------------------------------------- the @lil_runnr credit */

/* Used on the portal subtitle and inside the two games that already credited
   the dev in body text. Standalone so those three spots stay identical. */
.dev-handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dev-handle svg { width: 13px; height: 13px; fill: currentColor; display: block; }

.dev-handle:hover,
.dev-handle:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #0a0a0f;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.25);
}