/* chrome.css — the ONE shared chrome + component system for every
   Shulkerbay page (home, vote, leaderboards, and anything future).
   Header, site nav, status pill, buttons, panels, board rows, ticker,
   pixel dividers, footer, focus rings, page backgrounds.

   Home note: the flight engine (scrub-engine.js) injects its default
   topbar CSS in @layer sw — these unlayered rules win without !important.
   Everything home-specific that is NOT chrome (flight copy, preloader,
   connect box, Living Bay hero) stays inline in index.html. */

:root {
  --navy: #0B1626;
  --navy-2: #101E33;
  --navy-3: #16263F;
  --edge: #06101E;
  --aqua: #37D4C8;
  --gold: #F2B435;
  --gold-deep: #7A5A12;
  --purple: #9B6BC3;
  --parch: #F0E6D2;
  --ink-soft: #93A5C0;
  --tier-common: #C2CEDF;
  --tier-uncommon: #37D4C8;
  --tier-rare: #B57FE8;
  --tier-legendary: #F2B435;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --t-quick: 150ms;
  --t-std: 300ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--parch);
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
h1, h2, h3 {
  font-family: 'Titan One', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
a { color: var(--aqua); }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: 2px; }
.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;
}
.shore { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* ---------- page background: generated bay art behind everything ----------
   Fixed layer, darkened into the navy ground; the slow drift keeps it
   alive (transform-only, reduced-motion safe). */
.page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--navy); }
.page-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
  opacity: .62;
}
.page-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 22, 38, .42) 0%, rgba(11, 22, 38, .74) 46%, var(--navy) 96%);
}
@media (prefers-reduced-motion: no-preference) {
  .page-bg img { animation: bg-drift 80s ease-in-out infinite alternate; }
  @keyframes bg-drift {
    from { transform: scale(1.05) translateY(0); }
    to { transform: scale(1.11) translateY(-1.6%); }
  }
}

/* ---------- topbar (one grammar, two hosts) ----------
   .bay-topbar  = sub-pages (sticky, in flow)
   .sw-topbar   = home (fixed by the flight engine over the video)    */
.bay-topbar {
  position: sticky; top: 0; z-index: 100;
}
.bay-topbar, .sw-root .sw-topbar {
  background: linear-gradient(rgba(11, 22, 38, .9), rgba(11, 22, 38, .78));
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--edge);
  box-shadow: inset 0 -2px 0 rgba(55, 212, 200, .3), 0 6px 20px rgba(0, 0, 0, .45);
}
.bay-topbar__inner {
  max-width: 1760px; margin: 0 auto; padding: 10px clamp(16px, 3vw, 48px);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
/* the engine lays out its own bar — same full-width geometry as sub-pages
   (centered 1760 inner = (100% - 1760)/2 margin + the shared clamp padding) */
.sw-root .sw-topbar {
  padding: 10px max(clamp(16px, 3vw, 48px), calc((100% - 1760px) / 2 + clamp(16px, 3vw, 48px)));
  gap: 14px; flex-wrap: wrap;
}
/* brand and right cluster take equal space so the site nav sits dead center —
   identical geometry on every page */
.bay-brand, .sw-root .sw-brand { flex: 1 1 0; min-width: 0; }
.bay-topbar__right, .sw-topright {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 0; justify-content: flex-end; margin-left: 0; min-width: 0;
}

/* brand: emblem + wordmark art (never plain text) */
.bay-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.bay-brand img.emblem { width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.bay-brand img.wordmark { width: 184px; height: 34px; }
.sw-root .sw-brand__mark {
  width: 40px; height: 40px; border-radius: 0;
  background: transparent url('/assets/emblem.svg') center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
.sw-root .sw-brand__name {
  font-size: 0; color: transparent;
  width: 184px; height: 34px;
  background: transparent url('/assets/wordmark.svg') left center / contain no-repeat;
}

/* site nav: square stone-button bar — identical on every page */
.bay-nav, .sw-root .sw-nav {
  display: flex; gap: 3px; padding: 4px; border-radius: 4px;
  background: rgba(6, 14, 26, .6); border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .06), inset -2px -2px 0 rgba(0, 0, 0, .4);
  backdrop-filter: none;
}
.bay-nav a, .sw-root .sw-nav a {
  display: inline-flex; align-items: center; min-height: 36px;
  border-radius: 2px; padding: 6px 14px; text-decoration: none;
  font-family: 'Titan One', system-ui, sans-serif; font-weight: 400;
  font-size: .76rem; letter-spacing: .05em; color: var(--parch);
  background: rgba(16, 30, 51, .65);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .06), inset -2px -2px 0 rgba(0, 0, 0, .3);
  transition: transform var(--t-quick) var(--ease-snap), background var(--t-quick), color var(--t-quick);
}
.bay-nav a:hover, .sw-root .sw-nav a:hover {
  background: rgba(55, 212, 200, .2); color: #fff; transform: translateY(-1px);
}
.bay-nav a[aria-current="page"], .sw-root .sw-nav a[aria-current="page"] {
  background: var(--gold); color: var(--navy);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .4), inset -2px -2px 0 rgba(0, 0, 0, .3);
}

/* live harbor status: a compact line under each page's hero subheading
   (used to be a heavy pill in the header — too big for the chrome) */
.status-line {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px 0 0; font-size: .88rem; font-weight: 700; color: var(--ink-soft);
}
.status-line .dot {
  width: 9px; height: 9px; border-radius: 1px; background: var(--ink-soft);
  box-shadow: 0 0 6px rgba(0, 0, 0, .4);
}
.status-line.is-online { color: var(--parch); }
.status-line.is-online .dot { background: var(--aqua); box-shadow: 0 0 8px var(--aqua); }
.status-line.is-offline .dot { background: #E06C5A; box-shadow: 0 0 8px rgba(224, 108, 90, .7); }

/* ---------- buttons: the chunky Minecraft bevel, one recipe ----------
   .bay-btn = any page; .sw-topcta / .sw-btn = home engine chrome.     */
.bay-btn, .sw-root .sw-topcta, .sw-root .sw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; border: 0; cursor: pointer; text-decoration: none;
  border-radius: 3px; background: var(--gold); color: var(--navy);
  font-family: 'Titan One', system-ui, sans-serif; font-weight: 400;
  font-size: .92rem; letter-spacing: .04em; padding: 11px 22px; white-space: nowrap;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .38), inset -3px -3px 0 rgba(0, 0, 0, .28),
              0 4px 0 var(--gold-deep), 0 8px 16px rgba(0, 0, 0, .45);
  transition: transform 80ms var(--ease-snap), box-shadow 80ms, filter 80ms;
}
.bay-btn:hover, .sw-root .sw-topcta:hover, .sw-root .sw-btn:hover {
  transform: translateY(-1px); filter: brightness(1.07);
}
.bay-btn:active, .sw-root .sw-topcta:active, .sw-root .sw-btn:active {
  transform: translateY(3px);
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .25), inset -3px -3px 0 rgba(0, 0, 0, .3),
              0 1px 0 var(--gold-deep), 0 3px 8px rgba(0, 0, 0, .4);
}
.bay-btn--aqua, .sw-root .sw-btn--aqua {
  background: var(--aqua); color: var(--navy);
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .38), inset -3px -3px 0 rgba(0, 0, 0, .28),
              0 4px 0 #16706A, 0 8px 16px rgba(0, 0, 0, .45);
}
.bay-btn--aqua:active, .sw-root .sw-btn--aqua:active {
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .25), inset -3px -3px 0 rgba(0, 0, 0, .3),
              0 1px 0 #16706A, 0 3px 8px rgba(0, 0, 0, .4);
}
.bay-btn--ghost, .sw-root .sw-btn--ghost {
  background: var(--navy-3); color: var(--parch);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .08), inset -2px -2px 0 rgba(0, 0, 0, .35),
              0 4px 0 var(--edge), 0 8px 16px rgba(0, 0, 0, .35);
}
.bay-btn--ghost:active, .sw-root .sw-btn--ghost:active {
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .06), inset -2px -2px 0 rgba(0, 0, 0, .35),
              0 1px 0 var(--edge), 0 3px 8px rgba(0, 0, 0, .3);
}
/* home engine ghost buttons keep their own border look */
.sw-root .sw-btn--ghost { border: 2px solid var(--edge); }
/* copy-address success: flash aqua */
.bay-btn.is-copied { background: var(--aqua); }

/* home flight route dots: square pixels, not circles */
.sw-root .sw-route__dot i { border-radius: 1px; }
.sw-root .sw-route__dot.is-active i { box-shadow: 0 0 0 4px rgba(55, 212, 200, .18), 0 0 10px var(--sw-accent); }
.sw-root .sw-route__label {
  background: rgba(11, 22, 38, .92); color: var(--parch);
  border: 2px solid var(--edge); border-radius: 3px;
  font-family: 'Titan One', system-ui, sans-serif; font-weight: 400;
  font-size: .72rem; letter-spacing: .05em;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .08), inset -2px -2px 0 rgba(0, 0, 0, .35);
}
/* home scroll progress: aqua-to-gold */
.sw-root .sw-scrollbar span { background: linear-gradient(90deg, var(--aqua), var(--gold)); }

/* ---------- panels: the "dock notice board" surface ---------- */
.bay-panel {
  background: var(--navy-2);
  border: 3px solid var(--edge); border-radius: 6px;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .05), inset -2px -2px 0 rgba(0, 0, 0, .3),
              0 10px 30px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.bay-panel__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px 12px;
  border-bottom: 2px solid var(--edge);
  background: linear-gradient(rgba(55, 212, 200, .07), transparent);
}
.bay-panel__head h2, .bay-panel__head h3 { font-size: 1.05rem; letter-spacing: .03em; }
.bay-panel__head .sub { margin-left: auto; font-size: .8rem; color: var(--ink-soft); font-weight: 700; }

/* leaderboard rows */
.lb-row {
  display: grid; grid-template-columns: 34px 48px 1fr auto; gap: 12px;
  align-items: center; padding: 10px 18px; min-height: 56px;
  border-bottom: 1px solid rgba(6, 16, 30, .8);
  transition: background var(--t-quick) var(--ease-out);
}
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: rgba(55, 212, 200, .05); }
.lb-row .rank {
  font-family: 'JetBrains Mono', monospace; font-size: .95rem; font-weight: 700;
  color: var(--ink-soft); text-align: center;
}
.lb-row .medal {
  width: 26px; height: 26px; margin: 0 auto; border-radius: 3px;
  display: grid; place-items: center;
  font-family: 'Titan One', sans-serif; font-size: .8rem; color: var(--navy);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .45), inset -2px -2px 0 rgba(0, 0, 0, .3);
}
.lb-row .medal--1 { background: var(--gold); }
.lb-row .medal--2 { background: #C2CEDF; }
.lb-row .medal--3 { background: #C98A4B; }
.lb-row img.head {
  width: 40px; height: 40px; border-radius: 3px; image-rendering: pixelated;
  border: 2px solid var(--edge); background: var(--navy-3);
}
.lb-row .who { min-width: 0; }
.lb-row .who .name {
  display: block; font-weight: 800; color: #fff; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.lb-row .who .note { display: block; font-size: .76rem; color: var(--ink-soft); }
.lb-row .val {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 1rem; font-weight: 700; color: var(--parch); text-align: right;
  /* score plate — numbers read like a game scoreboard */
  background: rgba(6, 14, 26, .55); border: 2px solid var(--edge); border-radius: 3px;
  padding: 4px 10px;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .06);
}
.lb-row.is-first { background: linear-gradient(90deg, rgba(242, 180, 53, .1), transparent 65%); }
.lb-row.is-first .val { color: var(--gold); border-color: var(--gold-deep); }
.lb-row.is-first img.head { border-color: var(--gold-deep); box-shadow: 0 0 10px rgba(242, 180, 53, .35); }

/* skeleton shimmer while data loads */
.bay-skel { position: relative; overflow: hidden; background: var(--navy-3); border-radius: 3px; }
.bay-skel::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(240, 230, 210, .08), transparent);
  animation: bay-shimmer 1.4s infinite;
}
@keyframes bay-shimmer { to { transform: translateX(100%); } }

.bay-empty { padding: 26px 18px; text-align: center; color: var(--ink-soft); font-size: .92rem; }

/* ---------- live ticker ---------- */
.tick-row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px;
  align-items: center; padding: 9px 18px; min-height: 48px;
  border-bottom: 1px solid rgba(6, 16, 30, .8);
}
.tick-row:last-child { border-bottom: 0; }
.tick-row .ico {
  width: 28px; height: 28px; border-radius: 3px; display: grid; place-items: center;
  background: var(--navy-3); border: 2px solid var(--edge);
}
.tick-row .ico svg { width: 15px; height: 15px; }
.tick-row .what { min-width: 0; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick-row .what strong { color: #fff; }
.tick-row .when {
  font-family: 'JetBrains Mono', monospace; font-size: .74rem;
  color: var(--ink-soft); white-space: nowrap;
}
/* `forwards` matters: pages that hide rows by default (opacity:0 + row-in) lose
   that fill-mode when this more-specific rule replaces the shorthand. */
.tick-row.is-new { animation: tick-in .5s var(--ease-out) forwards; }
@keyframes tick-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- pixel divider: the checkerboard seam between sections ---------- */
.pdiv {
  height: 12px; border-block: 2px solid var(--edge);
  background: repeating-conic-gradient(var(--navy-2) 0% 25%, var(--navy) 0% 50%) 0 0 / 24px 24px;
}

/* ---------- footer: one flag, one link row, every page ---------- */
.bay-footer {
  text-align: center; padding: 44px 20px 56px; color: var(--ink-soft); font-size: .95rem;
  border-top: 3px solid var(--edge);
  box-shadow: inset 0 2px 0 rgba(55, 212, 200, .25);
  background: linear-gradient(rgba(55, 212, 200, .04), transparent 40%);
}
.bay-footer .mark { width: 44px; height: 44px; margin-bottom: 10px; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .5)); }
.bay-footer .flag {
  font-family: 'Titan One', sans-serif; font-size: 1.05rem; margin-bottom: .4rem;
  color: var(--gold); letter-spacing: .06em;
  text-shadow: 0 2px 0 var(--edge), 0 0 22px rgba(242, 180, 53, .3);
}
.bay-footer .tag { margin: 0 0 14px; }
.bay-footer .links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.bay-footer .links a {
  color: var(--aqua); text-decoration: none; font-weight: 700;
  padding: 6px 2px; /* keeps a 44px-friendly hit area without looking like a button */
}
.bay-footer .links a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.bay-footer .links a[aria-current="page"] { color: var(--parch); pointer-events: none; text-decoration: none; }

/* ---------- shared motion ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .tick-row.is-new { animation: none; }
  .bay-skel::after { animation: none; }
}

/* ---------- small screens: one bar, two rows, everywhere ---------- */
@media (max-width: 940px) {
  /* the nav drops to a full-width second row — the brand, pill and CTA
     keep the first row. (Also overrides the home engine's layered
     mobile hide of .sw-nav: the site nav must survive.) */
  .sw-root .sw-nav { display: flex; order: 5; width: 100%; justify-content: center; }
  .bay-topbar__inner, .sw-root .sw-topbar { gap: 8px 14px; }
  .bay-nav, .sw-root .sw-nav { order: 5; width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .bay-brand img.wordmark { display: none; }
  .sw-root .sw-brand__name { display: none; }
  .bay-nav a, .sw-root .sw-nav a { padding: 6px 10px; font-size: .7rem; }
  .bay-topbar__right .bay-btn, .sw-root .sw-topcta { font-size: .78rem; padding: 9px 12px; }
  .lb-row { padding: 10px 12px; grid-template-columns: 28px 36px 1fr auto; gap: 8px; }
  .tick-row { padding: 9px 12px; }
}