/* =========================================================================
   Tell Tale — the shared top bar (ui/nav.js) + the holographic foil
   primitive every public page shares.

   Everything is namespaced (.ttn-*, .tt-holo, .tt-glint) so it can sit on
   top of any page's own stylesheet, including the deck's style.css.
   Fonts: Michroma (legends) and VT323 (the counter), loaded by each page;
   the fallbacks keep it tidy if they aren't.
   ========================================================================= */

/* --- the foil ---------------------------------------------------------------
   Silver base, an iridescent band field that slides with the light
   (--hx/--hy on <html>, −1…1), fine diffraction lines, and a glint. */
.tt-holo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(120deg, #d6d9df 0%, #f3f4f6 28%, #bcc1c9 52%, #eceef1 76%, #c8ccd3 100%);
}
.tt-holo::before {
  content: "";
  position: absolute;
  inset: -90% -170%;
  z-index: 0;
  background: repeating-linear-gradient(105deg,
    hsl(332 92% 83%) 0%, hsl(268 88% 85%) 5.5%, hsl(196 95% 81%) 11%,
    hsl(152 78% 80%) 16.5%, hsl(52 96% 82%) 22%, hsl(332 92% 83%) 27.5%);
  mix-blend-mode: multiply;
  opacity: 0.92;
  transform:
    translate3d(calc(var(--hx, 0) * 16%), calc(var(--hy, 0) * 10%), 0)
    rotate(calc(var(--hx, 0) * 9deg + var(--hy, 0) * 4deg));
  pointer-events: none;
}
.tt-holo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.24) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.8;
  pointer-events: none;
}
.tt-glint {
  position: absolute;
  inset: -60%;
  z-index: 2;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: soft-light;
  transform: translate3d(calc(var(--hx, 0) * 34%), calc(var(--hy, 0) * 34%), 0) scale(0.55);
  pointer-events: none;
}
.tt-holo > b, .tt-holo > span { position: relative; z-index: 3; }

/* --- the bar ---------------------------------------------------------------- */
#tt-nav.ttn {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: block;
  margin: 0;
  padding: env(safe-area-inset-top) 0 0;
  color: #dcd4c3;
  background:
    linear-gradient(180deg, #2c2e33 0%, #222327 70%, #1b1c20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1px 0 #0b0c0e,
    0 10px 24px -14px rgba(0, 0, 0, 0.75);
  font-family: Michroma, "Arial Narrow", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* oxide / amber / cyan pinstripes along the foot, like a deck's trim */
#tt-nav.ttn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: linear-gradient(180deg, #D14B34 0 1px, transparent 1px 2px, #FFB84D 2px 3px, #2FB5BC 3px 4px);
  opacity: 0.9;
  pointer-events: none;
}

.ttn-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 56px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}

.ttn a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ttn a:focus-visible { outline: 2px solid #FFB84D; outline-offset: 3px; border-radius: 6px; }

.ttn-brand { display: flex; align-items: center; gap: 10px; flex: none; min-height: 44px; }
.ttn-badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 29px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.ttn-badge svg { display: block; width: 100%; height: 100%; }
/* the reels wind when you point at the mark */
.ttn-reel { transform-box: fill-box; transform-origin: center; }
.ttn-brand:hover .ttn-reel,
.ttn-brand:focus-visible .ttn-reel { animation: ttn-wind 1.4s linear infinite; }
@keyframes ttn-wind { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ttn-brand:hover .ttn-reel, .ttn-brand:focus-visible .ttn-reel { animation: none; }
}
.ttn-word {
  font-family: "Permanent Marker", "Marker Felt", system-ui, sans-serif;
  font-size: 1.32rem;
  line-height: 1;
  color: #F3EAD7;
  transform: rotate(-1.5deg);
  white-space: nowrap;
}

.ttn-links {
  display: flex;
  gap: 4px;
  margin: 0 auto 0 8px;
  padding: 0;
  list-style: none;
}
.ttn-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b9b1a0;
  transition: color 0.15s, background-color 0.15s;
  white-space: nowrap;
}
.ttn-link:hover { color: #F3EAD7; background: rgba(255, 255, 255, 0.04); }
.ttn-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a2a14;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
  flex: none;
}
.ttn-link[aria-current="page"] { color: #FFB84D; }
.ttn-link[aria-current="page"] .ttn-led {
  background: radial-gradient(circle at 40% 35%, #ffe0a8, #FFB84D 55%, #a8701f);
  box-shadow: 0 0 7px rgba(255, 184, 77, 0.9);
}

.ttn-end { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }

.ttn-god {
  display: inline-grid;
  place-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  color: rgba(25, 25, 35, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 14px rgba(190, 150, 255, 0.35);
  white-space: nowrap;
  cursor: default;
}
.ttn-god b { font-weight: 400; }

.ttn-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid #45474e;
  background: linear-gradient(180deg, #34363c, #26282c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 #0d0e10;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F3EAD7;
  white-space: nowrap;
  transition: border-color 0.15s, transform 0.1s;
}
.ttn-me:hover { border-color: #FFB84D; }
.ttn-me:active { transform: translateY(1px); }
.ttn-me[aria-current="page"] { border-color: #FFB84D; }
.ttn-me-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D14B34;
  box-shadow: 0 0 6px rgba(209, 75, 52, 0.8);
}
.ttn-me.is-in { padding: 0 12px 0 4px; gap: 7px; }
.ttn-av {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 12px;
  color: rgba(25, 25, 35, 0.8);
  box-shadow: 0 0 0 2px #f6f1e6, 0 2px 5px rgba(0, 0, 0, 0.6);
}
.ttn-av b { font-weight: 400; }
.ttn-count {
  font-family: VT323, ui-monospace, monospace;
  font-size: 19px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #FFB84D;
  text-shadow: 0 0 6px rgba(255, 160, 50, 0.55);
}

/* --- phones: two rows, the three destinations as equal piano keys -------- */
@media (max-width: 760px) {
  .ttn-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand end end" "links links links";
    gap: 0 10px;
    padding-top: 4px;
    padding-bottom: 6px;
    min-height: 0;
  }
  .ttn-brand { grid-area: brand; min-height: 46px; }
  .ttn-end { grid-area: end; justify-self: end; gap: 8px; }
  .ttn-links {
    grid-area: links;
    margin: 2px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1.45fr;
    gap: 5px;
  }
  .ttn-link {
    justify-content: center;
    min-height: 40px;
    padding: 0 6px;
    gap: 6px;
    border-radius: 7px;
    background: linear-gradient(180deg, #2f3136, #27292d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 #0d0e10;
    font-size: 8px;
    letter-spacing: 0.14em;
  }
  .ttn-link:hover { background: linear-gradient(180deg, #34363c, #2a2c31); }
  .ttn-link[aria-current="page"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 0 #FFB84D; }
  .ttn-word { font-size: 1.2rem; }
  .ttn-god { height: 22px; padding: 0 7px; font-size: 6.5px; letter-spacing: 0.14em; }
}
@media (max-width: 360px) {
  .ttn-word { display: none; }
  .ttn-link { letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-holo::before, .tt-glint { transform: none; }
}