/* ============================================================================
   Isometricland — animated nav buttons
   Anatomy copied from the game: ToggleButton.Skeuo.Top -> AnimatedIcon
   (icon area on top, 3D-extruded label band below). Icon design aspect 1.94:1,
   the same the game's IconArt is authored against. Labels extrude DOWN-RIGHT
   with a per-letter bounce, matching IconArt.DrawAnimatedLabel.
   ============================================================================ */

.navrow { display:flex; gap:10px; align-items:flex-end; }

/* The page you are ON wears the lit brass ring — the same idea as .tab--active
   in skeuo.css. It lives HERE, with the nav, so every page gets it from the one
   stylesheet they all already load (it used to be a copy inside about.css). */
.navbtn[aria-current="page"]{
  box-shadow:
    0 3px 4px rgba(0,0,0,.6),
    0 0 0 1px #1C0F05,
    0 0 0 2px #FFE9A8,
    0 0 12px rgba(255,208,106,.45),
    inset 1px 1px 0 rgba(255,247,221,.7),
    inset -1px -1px 0 rgba(0,0,0,.35);
}

.navbtn{
  --plate-a:#A06E40; --plate-b:#8D5B2E; --plate-c:#6E4422; --plate-d:#5A371A;
  --ext:#4a2d12; --lbl:#FFF3D0;
  position:relative; display:flex; flex-direction:column; align-items:center;
  width:92px; padding:5px 5px 4px; border:none; cursor:pointer;
  border-radius:8px; text-decoration:none;
  background:linear-gradient(180deg,var(--plate-a) 0%,var(--plate-b) 35%,var(--plate-c) 85%,var(--plate-d) 100%);
  box-shadow:
    0 3px 4px rgba(0,0,0,.6),
    0 0 0 1px #1C0F05,
    0 0 0 2px #C99230,
    inset 1px 1px 0 rgba(255,233,168,.55),
    inset -1px -1px 0 rgba(0,0,0,.35);
  transition:filter .13s ease, transform .07s ease, box-shadow .13s ease;
}
.navbtn:hover{
  filter:brightness(1.12);
  box-shadow:
    0 3px 4px rgba(0,0,0,.6), 0 0 0 1px #1C0F05, 0 0 0 2px #F5C25A,
    0 0 12px rgba(255,208,106,.4),
    inset 1px 1px 0 rgba(255,247,221,.7), inset -1px -1px 0 rgba(0,0,0,.35);
}
.navbtn:active{ transform:translateY(1px); filter:brightness(.94); }
.navbtn:focus-visible{ outline:3px solid #FFE9A8; outline-offset:3px; }

/* icon well — inset like a screen set into the plate */
.navbtn__icon{
  width:100%; aspect-ratio:132/68; border-radius:5px; overflow:hidden;
  background:transparent;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), inset 0 2px 5px rgba(0,0,0,.30);
}
.navbtn__icon svg{ display:block; width:100%; height:100%; }

/* label band — 3D extruded, down-right, per-letter bounce (game parity) */
.navbtn__label{
  margin-top:3px; display:flex; gap:.3px;
  font-family:"Trebuchet MS","Segoe UI",sans-serif; font-weight:900;
  font-size:11px; letter-spacing:.04em; color:var(--lbl);
  text-transform:uppercase; line-height:1;
}
.navbtn__label span{
  display:inline-block;
  text-shadow:
    1px 1px 0 var(--ext), 2px 2px 0 #150c03, 0 3px 4px rgba(0,0,0,.55);
  animation:lblBounce 1.9s ease-in-out infinite;
}

/* ── GAME PARITY: the scene is FROZEN until you point at it ──────────────────
   IconArt's _phase is "seconds since the host hover began", so a resting tab
   holds a still frame and only comes alive under the cursor.
   !important is REQUIRED: every scene declares its animation via an inline
   style="animation:…" shorthand, and an inline shorthand resets play-state to
   `running` and outranks a normal stylesheet rule. Without !important the
   whole page animates forever. (2026-07-22 — owner caught this.) */
.navbtn .navbtn__icon svg *,
.navbtn .navbtn__label span { animation-play-state:paused !important; }
.navbtn:hover .navbtn__icon svg *,
.navbtn:hover .navbtn__label span,
.navbtn:focus-visible .navbtn__icon svg *,
.navbtn:focus-visible .navbtn__label span { animation-play-state:running !important; }
@keyframes lblBounce{
  0%,72%,100%{ transform:translateY(0) }
  80%{ transform:translateY(-2.5px) }
  88%{ transform:translateY(0) }
}

/* category tints — straight from the game's TopTab gradients */
.navbtn--home  { --plate-a:#8FA6B8; --plate-b:#5C7589; --plate-c:#465c6e; --plate-d:#34485A; --ext:#22303c; }
.navbtn--feat  { --plate-a:#6F8FC8; --plate-b:#3A5A93; --plate-c:#2b4472; --plate-d:#1E335B; --ext:#16233f; }
.navbtn--about { --plate-a:#B07AC8; --plate-b:#7B40A4; --plate-c:#5d2c7f; --plate-d:#451D62; --ext:#2f1444; }
.navbtn--give  { --plate-a:#F1C658; --plate-b:#C68A20; --plate-c:#9a6a12; --plate-d:#82570B; --ext:#6a4408; --lbl:#FFFBEC; }
.navbtn--buy   { --plate-a:#E27040; --plate-b:#BE3F1E; --plate-c:#a5300f; --plate-d:#841C0C; --ext:#5c1a08; }

/* ── SOCIAL COINS (top-right corner) ─────────────────────────────────────────
   Brass-set enamel badges: the same plate gradient and gold ring as .navbtn,
   struck round with the brand's own colour set into the middle. ROUND is the
   whole point — the square plates are PAGES OF THIS SITE and the coins are us
   somewhere ELSE, so the shape carries the difference and nobody goes hunting
   for a "TikTok page" here.
   They sit INSIDE .navrow, not as a fourth <nav> child, because both wrap
   rules below already target .navrow and one selector is one thing to keep
   right. Coin 30px + gap 5px x5 = 170px, and the beading adds 10px. */
/* align-self overrides .navrow's flex-end: the tabs hang their labels off a
   65px plate and a 30px coin sitting on that baseline reads as having fallen
   to the bottom of the bar. Centred, it lines up with the logo instead. */
.socrow{ display:flex; align-items:center; align-self:center; gap:5px; flex:none; }

/* beading — the join between "our pages" and "our accounts" */
.socrow::before{
  content:""; align-self:stretch; width:2px; margin:7px 9px 7px 0; border-radius:2px;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(255,224,150,.32),rgba(0,0,0,.6));
  box-shadow:1px 0 0 rgba(255,233,168,.16);
}

.socbtn{
  position:relative; display:block; width:30px; height:30px; flex:none;
  border-radius:50%; text-decoration:none;
  background:linear-gradient(180deg,#A06E40 0%,#8D5B2E 35%,#6E4422 85%,#5A371A 100%);
  box-shadow:
    0 3px 4px rgba(0,0,0,.6),
    0 0 0 1px #1C0F05,
    0 0 0 2px #C99230,
    inset 1px 1px 0 rgba(255,233,168,.55),
    inset -1px -1px 0 rgba(0,0,0,.35);
  transition:filter .13s ease, transform .07s ease, box-shadow .13s ease;
}
.socbtn:hover{
  filter:brightness(1.12);
  box-shadow:
    0 3px 4px rgba(0,0,0,.6), 0 0 0 1px #1C0F05, 0 0 0 2px #F5C25A,
    0 0 12px rgba(255,208,106,.45),
    inset 1px 1px 0 rgba(255,247,221,.7), inset -1px -1px 0 rgba(0,0,0,.35);
}
.socbtn:active{ transform:translateY(1px); filter:brightness(.94); }
.socbtn:focus-visible{ outline:3px solid #FFE9A8; outline-offset:3px; }
.socbtn svg{ display:block; width:100%; height:100%; border-radius:50%; }

/* the glass over the enamel — one rule for all five, so the SVGs stay pure
   brand mark and nothing has to be re-drawn to re-light them */
.socbtn::after{
  content:""; position:absolute; inset:2px; border-radius:50%; pointer-events:none;
  background:linear-gradient(158deg,
    rgba(255,255,255,.44) 0%, rgba(255,255,255,.12) 33%, rgba(255,255,255,0) 52%);
}

/* the mark itself gives a little under the cursor (the nav tabs come alive on
   hover too — a coin that stayed dead would read as a picture, not a button) */
.socglyph{
  transform-box:fill-box; transform-origin:center;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.socbtn:hover .socglyph{ transform:scale(1.13); }

/* ── shared scene motion ─────────────────────────────────────────────────── */
@keyframes twinkle   { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes smokeRise { 0%{transform:translate(0,0) scale(.5);opacity:0} 18%{opacity:.55}
                       100%{transform:translate(-5px,-19px) scale(1.5);opacity:0} }
@keyframes lampGlow  { 0%,100%{opacity:.45} 50%{opacity:.85} }
@keyframes winOn     { 0%,44%{opacity:0} 50%,94%{opacity:1} 100%{opacity:0} }
@keyframes garage    { 0%,26%{transform:scaleY(1)} 44%,68%{transform:scaleY(.06)} 88%,100%{transform:scaleY(1)} }
/* shutters fold edge-on (scaleX toward the hinge) — reliable in SVG, reads as swinging open */
@keyframes shutter   { 0%,38%{transform:scaleX(1)} 54%,84%{transform:scaleX(.18)} 100%{transform:scaleX(1)} }
@keyframes carRoll   { 0%{transform:translateX(-16px)} 100%{transform:translateX(150px)} }

/* Features — CRT */
@keyframes wheelSpin { to{ transform:rotate(360deg) } }
@keyframes flash1    { 0%,4%{opacity:0} 8%,26%{opacity:1} 30%,100%{opacity:0} }
@keyframes flash2    { 0%,34%{opacity:0} 38%,56%{opacity:1} 60%,100%{opacity:0} }
@keyframes flash3    { 0%,64%{opacity:0} 68%,88%{opacity:1} 92%,100%{opacity:0} }
@keyframes scan      { 0%{transform:translateY(0)} 100%{transform:translateY(6px)} }
@keyframes led       { 0%,100%{opacity:1} 55%{opacity:.25} }
@keyframes crtFlick  { 0%,100%{opacity:1} 47%{opacity:.93} 49%{opacity:1} }
@keyframes carGo     { 0%{transform:translateX(0)} 100%{transform:translateX(46px)} }

/* About — question marks */
@keyframes bobA { 0%,100%{transform:translateY(0) rotate(-7deg)} 50%{transform:translateY(-5px) rotate(5deg)} }
@keyframes bobB { 0%,100%{transform:translateY(0) rotate(6deg)}  50%{transform:translateY(-7px) rotate(-6deg)} }
@keyframes bobC { 0%,100%{transform:translateY(0)}               50%{transform:translateY(-4px)} }
@keyframes qSpin{ to{ transform:rotate(360deg) } }
@keyframes neonBuzz{ 0%,100%{opacity:1;filter:drop-shadow(0 0 3px #6FE9FF)} 8%{opacity:.35;filter:none} 12%{opacity:1} }
@keyframes jitter{ 0%,100%{transform:translate(0,0) rotate(-4deg)} 25%{transform:translate(1px,-2px) rotate(3deg)}
                   50%{transform:translate(-1px,1px) rotate(-2deg)} 75%{transform:translate(2px,0) rotate(4deg)} }
@keyframes floatUp{ 0%{transform:translateY(6px);opacity:0} 15%,80%{opacity:.9} 100%{transform:translateY(-16px);opacity:0} }

/* ── DONATE — Mount Money ─────────────────────────────────────────────────────
   THE MUZZLE-CENTRE LAW (owner, 2026-08-16: "have the money shoot out from the
   CENTRE of the cannon end"). The barrel is authored HORIZONTAL, pointing +x,
   about a trunnion pivot at (20,52) in the icon's viewBox; the bore mouth is
   therefore the local point (46.4,52), i.e. 26.4 units out along the bore. The
   gun SWIVELS on that trunnion and holds EXACTLY -40deg across the whole firing
   window (38%..66%), so the muzzle centre at the shot is a number, not a guess:

       M = P + 26.4 * (cos -40, sin -40) = (20+20.224, 52-16.970) = (40.22,35.03)

   Every projectile is authored centred on that point. `shotY` is then the real
   parabola through it -- y = -tan(40)*x + 0.016341*x^2 sampled at 13 stops --
   so the launch tangent IS the bore line (first chord 38.9deg vs 40deg) instead
   of a hand-tuned arc that happens to look about right. Change the rest/aim
   angles and BOTH the authored muzzle point and this curve have to be redone;
   they are one derivation, not two settings. */
@keyframes aim    { 0%,14%{transform:rotate(-11deg)} 38%,66%{transform:rotate(-40deg)}
                    82%{transform:rotate(-14deg)} 90%{transform:rotate(-9.5deg)}
                    100%{transform:rotate(-11deg)} }
/* recoil runs INSIDE the aim group, so -x is back along the bore at any elevation */
@keyframes kick   { 0%,58%{transform:translateX(0)} 62%{transform:translateX(-5.4px)}
                    70%{transform:translateX(-1.6px)} 78%,100%{transform:translateX(0)} }
@keyframes jolt   { 0%,58%{transform:translate(0,0)} 63%{transform:translate(-2.6px,1px)}
                    75%,100%{transform:translate(0,0)} }
@keyframes muzzle { 0%,57%{opacity:0;transform:scale(.2)} 60%{opacity:1;transform:scale(1.25)}
                    66%{opacity:.7;transform:scale(1)} 74%,100%{opacity:0;transform:scale(.45)} }
/* x is linear in flight time -- two stops and `linear` IS the constant vx */
@keyframes shotX  { 0%,58%{transform:translateX(0)} 98%,100%{transform:translateX(58px)} }
/* ⚠ THE EARLY STOPS ARE NOT DECORATION. Between stops the browser interpolates
   LINEARLY, so the visible launch direction is the first CHORD, never the
   tangent -- and a chord across a coarse first segment reads 1.2deg flat of the
   bore. Sampling the same parabola densely over the first 4% of the flight
   pulls that to 0.07deg, which is what makes "along the bore" a measurement
   instead of a description. Coarse stops are fine once gravity dominates. */
@keyframes shotY  { 0%,58%{transform:translateY(0)}
                    58.24%{transform:translateY(-0.29px)} 58.6%{transform:translateY(-0.72px)}
                    59.4%{transform:translateY(-1.64px)}  60.4%{transform:translateY(-2.72px)}
                    61.6%{transform:translateY(-3.93px)}  64.4%{transform:translateY(-6.38px)}
                    68%{transform:translateY(-8.73px)}    72%{transform:translateY(-10.30px)}
                    76%{transform:translateY(-10.77px)}   80%{transform:translateY(-10.14px)}
                    84%{transform:translateY(-8.41px)}    88%{transform:translateY(-5.58px)}
                    92%{transform:translateY(-1.65px)}    95.2%{transform:translateY(2.29px)}
                    98%,100%{transform:translateY(6.30px)} }
@keyframes flySpin{ 0%,58%{transform:rotate(0)} 100%{transform:rotate(430deg)} }
/* three landing times so the burst scatters along the arc without ever moving
   the ORIGIN -- all three leave the same bore centre, which is the whole point */
@keyframes shotFade1{ 0%,57.9%{opacity:0} 58%,93%{opacity:1} 98%,100%{opacity:0} }
@keyframes shotFade2{ 0%,57.9%{opacity:0} 58%,86%{opacity:1} 91%,100%{opacity:0} }
@keyframes shotFade3{ 0%,57.9%{opacity:0} 58%,92%{opacity:1} 97.5%,100%{opacity:0} }
@keyframes pileSettle{ 0%,90%{transform:scaleY(1)} 94%{transform:scaleY(1.035)} 100%{transform:scaleY(1)} }
@keyframes glint  { 0%,100%{opacity:0} 50%{opacity:.95} }

/* Buy — park entrance arch + handshake */
@keyframes bulbChase { 0%,100%{opacity:1;r:1.15} 45%{opacity:.28;r:.85} }
@keyframes marqueeGlow{ 0%,100%{opacity:1} 46%{opacity:.62} }
@keyframes archHalo  { 0%,100%{opacity:.35} 50%{opacity:.7} }
/* ── A REAL PUMP: THE CLASP IS RIGID ─────────────────────────────────────────
   The old motion counter-rotated the two forearms about the clasp, which opens
   and closes the V -- i.e. it SHEARS a joint that in life cannot move at all.
   A handshake pumps from the ELBOWS, both of which are off-canvas, so each
   forearm swings about a distant pivot and the clasp just rides up and down.
   The three curves below are ONE derivation, not three settings:

       left  forearm pivots about (-40,55), |r| = 106 -> +-1.7deg
       right forearm pivots about (172,55), |r| = 106 -> -+1.7deg
       clasp translateY = 106 * sin(1.7deg) = 3.14px, matching BOTH ends

   so the wrists stay attached at every instant. Change one angle and the
   translate has to change with it or the hands tear off the sleeves. */
@keyframes shakeArmL{ 0%,100%{transform:rotate(1.7deg)}  50%{transform:rotate(-1.7deg)} }
@keyframes shakeArmR{ 0%,100%{transform:rotate(-1.7deg)} 50%{transform:rotate(1.7deg)} }
@keyframes shakePump{ 0%,100%{transform:translateY(3.14px)} 50%{transform:translateY(-3.14px)} }
 }
 50%{transform:translateY(.9px)} }
 33%{transform:translateY(-28px)}
                      46%{transform:translateY(-25px)} 54%{transform:translateY(-28px)}
                      64%{transform:translateY(0)} 100%{transform:translateY(0)} }

/* ⚠ A SECOND @keyframes OF THE SAME NAME LATER IN THE FILE SILENTLY WINS.
   `aim`, `kick`, `shotX` and `shotY` used to be declared a second time RIGHT
   HERE (an older 38-degree draft kept for nav-demo.html), which would have
   overridden the derived set above and put the launch back off the bore axis
   with nothing to show for it but a slightly wrong-looking arc. Redefining a
   keyframe name is not additive -- keep every scene's motion declared once. */

@media (prefers-reduced-motion:reduce){
  .navbtn *, .navbtn__label span { animation:none !important; }
  .socglyph { transition:none !important; transform:none !important; }
}

/* ── NARROW LAPTOPS (1001–1140px) ─────────────────────────────────────────────
   The full band wants 1107px: 40 padding + 340 logo + 36 gaps + 691 for the
   five tabs and the five coins. Rather than break the toolbar in two the
   moment a window is dragged in a little, take the slack out of it first —
   smaller logo, 27px coins, tighter gaps — which holds the single band all the
   way down to 1002px. */
@media (max-width:1140px) and (min-width:761px){
  .wood > nav{ gap:12px !important; padding:9px 14px !important; }
  .wood > nav > a[aria-label="Isometricland"]{ width:280px !important; }
  .socrow{ gap:4px; }
  .socrow::before{ margin-right:7px; }
  .socbtn{ width:27px; height:27px; }
}

/* ── TABLETS / SMALL WINDOWS (761–1000px) ────────────────────────────────────
   Two centred rows: logo, then tabs + coins. Note this band was ALREADY broken
   before the coins arrived — the bar has always needed 896px and the only wrap
   rule started at 760px, so 761–896 pushed the whole document sideways. */
@media (max-width:1000px){
  .wood > nav{
    flex-wrap:wrap; justify-content:center; gap:9px !important; padding:9px 14px !important;
  }
  .wood > nav > div[style*="flex:1"]{ display:none !important; }
  .navrow{ width:100%; justify-content:center; }
}

/* ── PHONES ───────────────────────────────────────────────────────────────────
   At full size the bar needs 896px (340px logo + five 92px tabs), so on a phone
   it used to push the whole document sideways and clip every page. The logo
   takes its own row, the five tabs share the next one and shrink to fit — all
   five stay visible, which is the point of the game's toolbar.
   !important is REQUIRED on the logo width and the spacer: both are declared
   as inline style="…" in the markup and outrank a normal stylesheet rule. */
@media (max-width:760px){
  .wood > nav{
    flex-wrap:wrap; justify-content:center; gap:8px !important;
    padding:8px 12px !important;
  }
  .wood > nav > a[aria-label="Isometricland"]{ width:min(72vw,300px) !important; }
  .wood > nav > div[style*="flex:1"]{ display:none !important; }

  .navrow{ width:100%; justify-content:center; gap:6px; flex-wrap:wrap; row-gap:7px; }
  .navbtn{ width:auto; flex:1 1 0; min-width:0; max-width:80px; padding:4px 4px 3px; }
  .navbtn__label{ font-size:9px; letter-spacing:.01em; }

  /* the coins take a row of their own: five 28px coins need 160px, which fits
     the narrowest phone in use, whereas sharing the tab row would squeeze the
     five tabs to ~31px and cost them their labels. */
  .socrow{ width:100%; justify-content:center; gap:5px; }
  .socrow::before{ display:none; }
  .socbtn{ width:28px; height:28px; }
}