/* -------------------------------------------------------------------
   Devquo 3D buttons. Loaded on every page after style.css.
   Same language as the home hero buttons: a solid face with a darker
   edge underneath that lifts on hover and presses down on click.
   The home hero restyles .nav-btn for its dark background in home-fx.css.
------------------------------------------------------------------- */
:root{
  --b3-blue:#1f6feb;          /* same blue as the stat numbers */
  --b3-blue-hover:#3a82f2;
  --b3-blue-deep:#0f4bb3;     /* edge under blue buttons */
  --b3-face:#ffffff;
  --b3-face-hover:#f4f8ff;
  --b3-line:#dde4ef;          /* thin outline on light buttons */
  --b3-edge:#cdd6e4;          /* edge under light buttons */
  --b3-font:"Baloo 2","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- Light 3D keys: header nav, footer links, modal controls ---------- */
.nav-btn,
.footer-btn,
.modal-close,
.day-step{
  font-family:var(--b3-font);
  background:var(--b3-face);
  box-shadow:inset 0 0 0 1px var(--b3-line), 0 4px 0 var(--b3-edge);
  transform:translateY(0);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
.nav-btn,
.footer-btn{ font-weight:700; border-radius:12px; }

.nav-btn:hover,
.footer-btn:hover,
.modal-close:hover,
.day-step:hover{
  background:var(--b3-face-hover); color:var(--b3-blue); text-decoration:none;
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--b3-line), 0 6px 0 var(--b3-edge);
}
.nav-btn:active,
.footer-btn:active,
.modal-close:active,
.day-step:active{
  transform:translateY(4px);   /* press all the way down onto the 3D edge */
  transition-duration:.06s;
  box-shadow:inset 0 0 0 1px var(--b3-line), 0 0 0 var(--b3-edge);
}
.day-step:disabled{
  opacity:.45; cursor:default; transform:none; color:inherit;
  background:var(--b3-face);
  box-shadow:inset 0 0 0 1px var(--b3-line), 0 4px 0 var(--b3-edge);
}

/* Current page in the nav: solid blue key */
.nav-btn[aria-current="page"]{
  background:var(--b3-blue); color:#fff;
  box-shadow:0 4px 0 var(--b3-blue-deep);
}
.nav-btn[aria-current="page"]:hover{
  background:var(--b3-blue-hover); color:#fff;
  box-shadow:0 6px 0 var(--b3-blue-deep);
}
.nav-btn[aria-current="page"]:active{ box-shadow:0 0 0 var(--b3-blue-deep); }

.nav-btn:focus-visible,
.footer-btn:focus-visible,
.modal-close:focus-visible,
.day-step:focus-visible{ outline:3px solid #9fc2fa; outline-offset:3px; }

/* ---------- Timeline game icons: flat gradient tiles ----------
   Each tile's frame matches the game's status tag in the game pop-up -- the same
   135deg gradient and soft glow (gold = Success, red = Failure, blue = Prototype
   and any other status). Hovering brightens the outer glow.
   The status class comes from timeline.json via script.js. */
.tl-icons{ position:relative; gap:26px; }
.tl-icons::before{                      /* line linking the tiles in a month */
  content:""; position:absolute; z-index:0;
  left:37px; right:37px; top:50%; height:4px; margin-top:-2px;
  border-radius:2px;
  background:rgba(120,170,255,.45);
}
.tl-icon-btn{
  --tl-a:#5b8def; --tl-b:#1f6feb; --tl-glow:rgba(47,107,230,.5); --tl-glow-hi:rgba(90,150,255,.95);
  position:relative; z-index:1;
  padding:5px; border-radius:21px;
  background:linear-gradient(135deg, var(--tl-a) 0%, var(--tl-b) 100%);
  box-shadow:0 4px 16px -4px var(--tl-glow);
  transition:box-shadow .2s ease, filter .2s ease;
}
.tl-icon-btn.is-success{ --tl-a:#f8cf4a; --tl-b:#dc9a0a; --tl-glow:rgba(220,154,10,.55); --tl-glow-hi:rgba(255,196,40,.95); }
.tl-icon-btn.is-failure{ --tl-a:#ff6b6b; --tl-b:#e03131; --tl-glow:rgba(224,49,49,.5); --tl-glow-hi:rgba(255,80,80,.95); }
.tl-icon-btn:hover,
.tl-icon-btn:focus-visible{
  box-shadow:0 0 14px 2px var(--tl-glow-hi), 0 0 34px 8px var(--tl-glow);
  filter:brightness(1.06);
}
.tl-icon-btn:focus-visible{ border-radius:21px; outline-offset:4px; }
.tl-icon-btn .tl-icon,
.tl-icon-btn:hover .tl-icon,
.tl-icon-btn:active .tl-icon{ box-shadow:none; transform:none; transition:none; }

/* ---------- Hover card over a timeline tile (built by script.js) ---------- */
.tl-hovercard{
  --hc-bg:#0c1f5e; --hc-glow:rgba(47,107,230,.6);
  position:fixed; z-index:60; left:0; top:0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:150px; max-width:260px; padding:12px 18px 11px;
  border-radius:14px; background:var(--hc-bg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 34px -10px rgba(0,0,25,.75), 0 0 28px -4px var(--hc-glow);
  color:#fff; text-align:center; font-family:var(--b3-font); line-height:1.15;
  pointer-events:none;
  opacity:0; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
}
.tl-hovercard.is-below{ transform:translateY(-6px); }
.tl-hovercard.is-on{ opacity:1; transform:none; }
.tl-hovercard[data-status="success"]{ --hc-glow:rgba(220,154,10,.6); }
.tl-hovercard[data-status="failure"]{ --hc-glow:rgba(224,49,49,.6); }
.tl-hovercard::after{                   /* little pointer down to the tile */
  content:""; position:absolute; top:100%; left:var(--arrow-x, 50%);
  width:12px; height:12px; margin:-6px 0 0 -6px;
  background:var(--hc-bg); transform:rotate(45deg);
  box-shadow:1px 1px 0 rgba(255,255,255,.14);
}
.tl-hovercard.is-below::after{ top:0; box-shadow:-1px -1px 0 rgba(255,255,255,.14); }
.tl-hc-name{ font-size:1.05rem; font-weight:800; letter-spacing:-.01em; }
.tl-hovercard .game-status{ font-size:.82rem; padding:2px 12px; border-radius:6px; }
.tl-hc-sub{ font-size:.78rem; font-weight:700; color:rgba(226,236,255,.7); }
.tl-hc-sub:empty{ display:none; }

@media (prefers-reduced-motion: reduce){
  .nav-btn, .footer-btn, .modal-close, .day-step, .tl-icon-btn, .tl-hovercard{ transition:none; }
}

/* ---------- Sticky top bar ----------
   Full-width so its background spans the page; the content stays in the usual
   centred column through the side padding. Background fades in on scroll (site.js). */
.site-header{
  position:sticky; top:0; z-index:50;
  max-width:none; margin:0;
  padding-left:max(24px, calc((100% - var(--maxw, 1120px)) / 2 + 24px));
  padding-right:max(24px, calc((100% - var(--maxw, 1120px)) / 2 + 24px));
  transition:background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{
  background-color:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 0 rgba(16,21,28,.08), 0 10px 30px -18px rgba(16,21,28,.35);
}
@media (max-width: 520px){
  .site-header{ padding-left:16px; padding-right:16px; }
}