/* ==========================================================================
   Slime Royale — brand kit
   Self-hosted display font + the lime gradient sampled from the current
   logo.png: lit face #fdfd78 (top) -> #f7fc49 (mid) -> #90de02 (bottom), with
   the outline measured by dilating the glyph mask outward (#4a8b02 at +1px,
   settling to #2f6b01), hence --slime-ink.
   The lettering stays LIME on the Arc navy theme on purpose: lime is the
   largest element of the logo, so a navy wordmark would fight the artwork.
   Loaded AFTER each page's inline <style> so it wins on equal specificity.
   ========================================================================== */

@font-face{
  font-family:'Luckiest Guy';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/luckiestguy.woff2') format('woff2');
}

:root{
  --slime-1:#fdfdb4;   /* top highlight   */
  --slime-2:#fdfd78;   /* upper body      */
  --slime-3:#f8fc4b;
  --slime-4:#f7fc49;   /* mid             */
  --slime-5:#d1fa07;
  --slime-6:#a8e802;   /* lower body      */
  --slime-7:#90de02;   /* bottom shade    */
  --slime-ink:#1d5502; /* dark outline    */
}

/* --- headings -------------------------------------------------------------
   Markup:
     <h1 class="logo-h">
       <span class="logo-type" data-text="AIRDROP">AIRDROP</span>
     </h1>
   The <h1> stays a normal centered block (so page layout is untouched); only
   the inner span is the logo lettering.

   Paint order matters. `background-clip:text` paints in the element's
   BACKGROUND layer, which sits *below* any z-index:-1 child -- so the outline
   can't be a negative-z pseudo or it covers the gradient. Instead:
     span itself  -> solid ink glyph + fat stroke  (the outline mass)
     ::before     -> green gradient fill  (z-index 1, on top)
     ::after      -> white gloss          (z-index 2, on top of that)
   -------------------------------------------------------------------------- */

.logo-h{
  display:block;
  text-align:center;
  font-family:'Luckiest Guy',ui-monospace,Menlo,monospace;
  font-weight:400;
  text-shadow:none;            /* kill the old neon glow */
  color:inherit;
}

.logo-type{
  position:relative;
  display:inline-block;
  font-family:'Luckiest Guy',ui-monospace,Menlo,monospace;
  font-weight:400;
  letter-spacing:.045em;
  line-height:1.15;
  padding:.10em .10em .16em;   /* room for the stroke, nothing clips */
  text-shadow:none;

  /* layer 0 — the dark outline */
  color:var(--slime-ink);
  -webkit-text-fill-color:var(--slime-ink);
  -webkit-text-stroke:.115em var(--slime-ink);
  paint-order:stroke fill;

  filter:drop-shadow(0 .05em .01em rgba(0,0,0,.55))
         drop-shadow(0 .09em .12em rgba(0,0,0,.45))
         drop-shadow(0 0 .55em rgba(247,252,73,.20));
}

/* layer 1 — green gradient fill */
.logo-type::before{
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  z-index:1;
  padding:inherit;
  letter-spacing:inherit;
  -webkit-text-stroke:0;
  background:linear-gradient(180deg,
      var(--slime-1) 0%,  var(--slime-2) 12%, var(--slime-3) 28%,
      var(--slime-4) 48%, var(--slime-5) 68%, var(--slime-6) 86%,
      var(--slime-7) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  pointer-events:none;
}

/* layer 2 — glossy sheen across the top of each letter */
.logo-type::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  z-index:2;
  padding:inherit;
  letter-spacing:inherit;
  -webkit-text-stroke:0;
  background:linear-gradient(180deg,
      rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 18%,
      rgba(255,255,255,.08) 36%, rgba(255,255,255,0) 48%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  pointer-events:none;
}

/* white/stone variant — matches the word ROYALE in the logo */
.logo-type.stone::before{
  background:linear-gradient(180deg,#ffffff 0%,#f2f6f3 34%,#c8d3cc 68%,#93a49b 100%);
  -webkit-background-clip:text; background-clip:text;
}

/* --- nav row: identical geometry on every page ---------------------------
   Pages shipped two different paddings (12px 10px vs 12px 14px), so the brand
   started at x=10 on some and x=14 on others. Pin one value. The mobile rule
   in wallet.js is !important and still wins below its breakpoint.
   Scoped with :not(.toc) so it can't hit the docs sidebar, which is a <nav>. */
nav:not(.toc){padding:12px 14px}

/* --- nav brand: small logo mark + wordmark -------------------------------
   Canonical nav layout for EVERY page: brand pinned hard left, links flowing
   after it. Some pages shipped `justify-content:center` + `margin-right:14px`
   (centred cluster) and others `margin-right:auto` (left-pinned) — this rule
   normalises all of them to the left-pinned look used by home/history.
   `margin-right:auto` eats the free space, which also neutralises any
   `justify-content:center` still sitting in a page's inline <style>. */
.brand{display:inline-flex!important;align-items:center;gap:8px;text-decoration:none;
       text-shadow:none!important;margin-right:auto!important}
.brand img{width:30px;height:auto;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.brand .bt{
  font-family:'Luckiest Guy',ui-monospace,Menlo,monospace;
  font-weight:400;letter-spacing:.07em;font-size:17px;line-height:1.3;
  color:var(--slime-ink);
  -webkit-text-fill-color:var(--slime-ink);
  -webkit-text-stroke:.055em var(--slime-ink);
  paint-order:stroke fill;
  position:relative;display:inline-block;
}
.brand .bt::before{
  content:'SLIME ROYALE';
  position:absolute;left:0;top:0;
  -webkit-text-stroke:0;
  background:linear-gradient(180deg,var(--slime-2) 0%,var(--slime-4) 52%,var(--slime-6) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* --- home hero logo ------------------------------------------------------
   The glow is lime, not navy: it reads as light spilling off the wordmark,
   which is the brightest mass in the artwork. A navy glow on a navy page is
   invisible. */
.hero-logo{
  width:min(72vw,430px);height:auto;display:block;margin:0 auto 6px;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.6)) drop-shadow(0 0 46px rgba(247,252,73,.18));
  animation:logobob 4.2s ease-in-out infinite;
}
@keyframes logobob{50%{transform:translateY(-9px)}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){ .hero-logo{animation:none} }