/* ---------------------------------------------------------------------------
   Design tokens for both themes.

   Every page used to declare its own :root palette and then hardcode a dozen
   more colours inline, which is why the site could only ever be dark. All of
   them now come from here, so a page written against these tokens themes
   itself for free.

   Dark is the default and the identity of the board; light is a first-class
   alternative, not an inversion. Resolution order: an explicit choice the
   visitor saved, else the OS preference.
   --------------------------------------------------------------------------- */

:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #080b10;
  --surface: #111622;
  --surface2: #171d2b;
  --inset: #0b0f17;        /* inputs, wells, anything recessed */
  --canvas-bg: #05070b;    /* the board's own backdrop, darker than the page */
  --track: #1a2130;        /* progress + placeholder grids */

  --ink: #f5f7ff;
  --prose: #d3d9e8;        /* long-form body text, a shade softer than --ink */
  --muted: #a6b0c4;
  --line: #273044;
  --line-soft: #ffffff2e;   /* dashed/ghost borders over dark surfaces */

  --accent: #8b5cf6;
  --accent-ink: #fff;       /* text on top of --accent */
  --accent-soft: #c4b5fd;   /* accent-tinted text */
  --accent-wash: #8b5cf618; /* faint accent fill */
  --accent-ring: #8b5cf633;
  --accent-glow: #8b5cf6aa;

  --pink: #ff4da6;
  --warning: #fcd98a;
  --warn-line: #fbbf2444;
  --warn-wash: #fbbf2412;
  --danger: #fb7185;
  --danger-wash: #fb718514;
  --danger-ink: #ffc9cf;
  --good: #4ade80;
  --good-wash: #4ade8022;
  --good-ink: #9af4b8;
  --pending-wash: #fbbf2422;
  --pending-ink: #fde68a;

  /* Moderation risk badges. These carry meaning, so they keep their own
     ramp rather than reusing the generic semantic colours. */
  --risk-high-bg: #4a1512;
  --risk-high-ink: #ffb4ac;
  --risk-med-bg: #43310a;
  --risk-med-ink: #fcd98a;
  --risk-low-bg: #123322;
  --risk-low-ink: #86efac;

  --accent-hover: #9b70ff;

  --glow: #211947;                        /* page-corner aurora */
  --nav-bg: rgba(8, 11, 16, .88);
  --shadow-sm: 0 20px 60px #0006;
  --shadow: 0 22px 60px #0008;
  --shadow-lg: 0 22px 60px #000a;
  --heading-grad: linear-gradient(100deg, #fff 25%, #c4b5fd 60%, #f9a8d4);
  --scrim: #020408bf;                     /* modal backdrop */
  --tour-scrim: rgba(3, 5, 9, .82);
  --card-grad: linear-gradient(140deg, #171d2be6, #111622e6);
  --about-grad: linear-gradient(140deg, #1b1533e6, #111622e6);
  --pull-grad: linear-gradient(100deg, #1b1533cc, #11162200);
  --tip-bg: #080b10ee;
  --overlay-btn: #080b10cc;

  /* Board selection marks sit on top of buyer artwork, so they need a colour
     that reads against both a bright meme and the empty board. */
  --mark-edge: #fff;
  --mark-shade: #000a;
  /* Drag selection that overlaps a live meme. */
  --blocked: #ff6b6b;
  --blocked-wash: #ff6b6b33;
  --blocked-solid: #e0483f;

  --r: 16px;
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg: #f6f7fc;
  --surface: #ffffff;
  --surface2: #f0f2f9;
  --inset: #f4f5fb;
  --canvas-bg: #e9ecf5;
  --track: #e4e7f1;

  --ink: #0f1320;
  --prose: #262d3f;
  /* Deliberately dark enough to clear 4.5:1 on --surface; the dark theme's
     muted grey fails that test on white. */
  --muted: #59617a;
  --line: #dde1ed;
  --line-soft: #00000026;

  /* Several steps darker than the dark theme's violet. #8b5cf6 on white is
     ~3.2:1 and #6d33e0 still only reaches 4.23:1 against white button text —
     both fail AA. This clears 4.5:1 for text on --accent. */
  --accent: #5b21b6;
  --accent-ink: #fff;
  --accent-soft: #5b21b6;
  --accent-wash: #5b21b60f;
  --accent-ring: #5b21b626;
  --accent-glow: #5b21b655;

  --pink: #db2777;
  /* Warning copy sits on a pale amber wash, not on --surface, so it needs to
     be darker than it looks like it should be. */
  --warning: #5f4000;
  --warn-line: #f0c36b88;
  --warn-wash: #fbbf240f;
  --danger: #d92d43;
  --danger-wash: #d92d430d;
  --danger-ink: #93122a;
  --good: #12894a;
  --good-wash: #12894a16;
  --good-ink: #0c6636;
  --pending-wash: #fbbf2426;
  --pending-ink: #7a5300;

  --risk-high-bg: #fde7e4;
  --risk-high-ink: #8f1d10;
  --risk-med-bg: #fbf0d6;
  --risk-med-ink: #6b4600;
  --risk-low-bg: #dcf3e6;
  --risk-low-ink: #0c5c33;

  --accent-hover: #4c1d95;

  --glow: #ded5ff;
  --nav-bg: rgba(255, 255, 255, .9);
  --shadow-sm: 0 12px 32px #1a234211;
  --shadow: 0 16px 40px #1a234219;
  --shadow-lg: 0 20px 48px #1a234222;
  --heading-grad: linear-gradient(100deg, #17122b 20%, #6d33e0 62%, #c026a3);
  --scrim: #1a2036a6;
  --tour-scrim: rgba(28, 32, 48, .55);
  --card-grad: linear-gradient(140deg, #ffffff, #f4f5fb);
  --about-grad: linear-gradient(140deg, #f3efff, #ffffff);
  --pull-grad: linear-gradient(100deg, #efe9ff, #ffffff00);
  --tip-bg: #ffffffF2;
  --overlay-btn: #ffffffe0;

  /* Inverted from dark: on a light board the white outline vanishes, so the
     selection edge goes dark and the shade goes light. */
  --mark-edge: #10131c;
  --mark-shade: #ffffffcc;
  --blocked: #d92d43;
  --blocked-wash: #d92d4333;
  --blocked-solid: #b3122b;
}

/* --- the toggle ---------------------------------------------------------- */

.theme-mount {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}
/* On the two narrow pages the nav puts the back-link on margin-left:auto, so
   the mount must not push it around. */
.nav .theme-mount { flex: 0 0 auto; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  transition: background .16s, border-color .16s;
}
.theme-toggle:hover {
  background: var(--surface2);
  border-color: var(--accent);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* One glyph per theme; the inactive one is removed from the a11y tree so a
   screen reader does not announce both. */
.theme-toggle .t-sun { display: none; }
.theme-toggle .t-moon { display: block; }
:root[data-theme='light'] .theme-toggle .t-sun { display: block; }
:root[data-theme='light'] .theme-toggle .t-moon { display: none; }

/* Respect a visitor who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* A visible focus ring everywhere — keyboard users could not previously tell
   where they were on the board controls. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   Ad placements (see public/assets/ads.js).

   A deploy with ads switched off has no empty gap. Once ads are configured,
   304px is reserved before Google loads a responsive unit.
   --------------------------------------------------------------------------- */
.ad-slot {
  display: none;
}
.ads-enabled .ad-slot:not([hidden]) {
  display: block;
  width: 100%;
  max-width: 970px;
  margin: 26px auto;
  min-height: 304px;
  contain: layout paint;
  contain-intrinsic-size: auto 304px;
}
.ad-slot .adsbygoogle {
  min-height: 280px;
}
.ads-enabled .ad-slot[data-ad-placement="home-below-board"] {
  /* The board is a click-and-drag surface. Keep its first ad well outside the
     interaction area to reduce accidental-click risk. */
  margin-top: 150px;
}
/* Labelled because an unlabelled ad next to user-submitted memes reads as
   editorial endorsement, and disclosure is required in most jurisdictions. */
.ads-enabled .ad-slot:not([hidden])::before {
  content: "Advertisement";
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Site navigation.

   This used to be hand-written in four pages and had already drifted: one had
   "Sign in" and "Tutorial", another "My Profile" and "How it works", the Vault
   had neither, and the leaderboard had no links at all. It is now rendered once
   by /assets/nav.js and styled here, so a nav change lands everywhere.

   Uses its own .nav-cta rather than .btn, because the per-page .btn rules
   disagree (account.html's is full-width).
   --------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--line);
}
.nav .nav-inner {
  width: min(1640px, calc(100% - 28px));
  height: 66px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 850;
  letter-spacing: -.03em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
}
.nav .mark {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: conic-gradient(#ff4da6, #fbbf24, #4ade80, #38bdf8, #8b5cf6, #ff4da6);
  color: #12131c;
  box-shadow: 0 0 20px var(--accent-glow);
}
.nav .links {
  display: flex;
  align-items: center;
  gap: 19px;
  margin-left: auto;
}
.nav .links > a {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.nav .links > a:hover { color: var(--ink); }
.nav .links > a[aria-current="page"] { color: var(--ink); font-weight: 700; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 0;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 24px var(--accent-ring);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}
.nav-cta:hover { background: var(--accent-hover); }

/* --- the Account menu: Sign in, My memes and the Vault under one item --- */
.acct { position: relative; flex: 0 0 auto; }
.acct-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
}
.acct-btn:hover { color: var(--ink); border-color: var(--line-soft); }
.acct-btn .caret { font-size: 9px; opacity: .8; }
.acct-btn .who {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-ring);
  color: var(--accent-soft);
  font-size: 11px;
  font-weight: 900;
}
.acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: none;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.acct.open .acct-menu { display: block; }
.acct-menu a,
.acct-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
}
.acct-menu a:hover,
.acct-menu button:hover { background: var(--inset); }
.acct-menu .sep { height: 1px; margin: 5px 4px; background: var(--line); }
.acct-menu .hint {
  display: block;
  padding: 4px 10px 7px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  word-break: break-all;
}

@media (max-width: 760px) {
  /* The links wrap onto a second scrollable row rather than disappearing —
     phone visitors previously lost every route off the homepage on /about and
     /vault, which set .links{display:none} here.

     Kept deliberately tight: this bar is sticky, so every pixel it takes is a
     pixel of board the visitor never sees. */
  .nav .nav-inner {
    height: auto;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding-top: 7px;
    padding-bottom: 5px;
  }
  /* The wordmark is the widest thing in the bar and the only one that is pure
     decoration here — without dropping it, the account pill and the CTA push
     onto a third row and the sticky header eats 118px of a phone screen. The
     mark still links home, and the <a> keeps an aria-label. */
  .nav .brand-text { display: none; }
  .nav .mark { width: 26px; height: 26px; border-radius: 8px; }
  .nav .links {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 13px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav .links::-webkit-scrollbar { display: none; }
  .nav .links > a { font-size: 13px; }
  /* Account, theme and the CTA stay on the first row, pushed right; only the
     links wrap below. That keeps the dropdown anchored near the right edge
     instead of inside a row that scrolls sideways. */
  .nav .acct { margin-left: auto; }
  .nav-cta { padding: 7px 11px; font-size: 13px; }
  /* 40px is the smallest reliably tappable target; the pill was 27px. */
  .acct-btn { min-height: 40px; padding: 4px 11px; font-size: 13px; }
  .acct-menu { max-width: calc(100vw - 24px); }
}

/* 2026 navbar: one compact desktop row and a deliberate mobile menu. These
   overrides also protect the header from page-level legacy link styles. */
.nav {
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  isolation: isolate;
}
.nav .nav-inner {
  position: relative;
  min-height: 68px;
  height: auto;
  flex-wrap: nowrap;
  padding: 0;
}
.nav-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
}
.nav .nav-panel .links { margin-left: 0; }
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}
.nav-toggle-icon { display: grid; gap: 3px; width: 16px; }
.nav-toggle-icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; }

@media (max-width: 880px) {
  .nav .nav-inner { min-height: 62px; gap: 10px; flex-wrap: nowrap; padding: 0; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-panel {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    margin-left: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
  }
  .nav.open .nav-panel { display: flex; }
  .nav .nav-panel .links {
    order: initial;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow: visible;
  }
  .nav .nav-panel .links > a { padding: 10px 11px; border-radius: 9px; font-size: 14px; }
  .nav .nav-panel .links > a:hover { background: var(--inset); }
  .nav .acct { width: 100%; margin-left: 0; }
  .acct-btn { justify-content: space-between; width: 100%; min-height: 42px; border-radius: 10px; }
  .acct-menu { position: static; width: 100%; max-width: none; margin-top: 5px; box-shadow: none; }
  .nav-panel .theme-mount { margin: 0; }
  .nav-panel .theme-toggle, .nav-panel .nav-cta { width: 100%; min-height: 42px; }
}

@media (max-width: 480px) {
  .nav .brand-text { display: none; }
  .nav .mark { width: 28px; height: 28px; border-radius: 8px; }
}