/* ==========================================================================
   Sliverin Studios bar and footer, shared by every page on the site.
   Self-contained so it can sit on top of any game's own styles (Polarity Dash, Pressure).
   Uses divs, not <nav>/<footer>, so the games' own element rules do not touch it.
   ========================================================================== */
.studio-nav,
.studio-foot {
  --s-ink: #f3f1ec;
  --s-dim: rgba(243, 241, 236, 0.66);
  --s-faint: rgba(243, 241, 236, 0.5);
  --s-line: rgba(243, 241, 236, 0.14);
  --s-accent: #ff5a36;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Roboto Mono", monospace;
  text-align: left;
  line-height: 1.4;
}

.studio-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(8, 11, 16, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--s-line);
}
.studio-nav__in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px clamp(16px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
}
.studio-nav__brand { display: block; line-height: 0; }
.studio-nav__brand img { height: 42px; width: auto; display: block; }
.studio-nav__links { display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 3vw, 30px); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.studio-nav__links a {
  padding: 6px 0;
  color: var(--s-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.studio-nav__links a:hover,
.studio-nav__links a:focus-visible,
.studio-nav__links a[aria-current="page"] { color: var(--s-ink); border-bottom-color: var(--s-accent); }
.studio-nav a:focus-visible,
.studio-foot a:focus-visible { outline: 2px solid #ff7a52; outline-offset: 3px; }

.studio-foot {
  background: #080b10;
  border-top: 1px solid var(--s-line);
  color: var(--s-faint);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.studio-foot__in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px clamp(16px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 24px;
}
.studio-foot a { color: var(--s-faint); text-decoration: none; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.studio-foot a:hover { color: #ff7a52; }

/* Pages whose body has its own side padding (Polarity Dash): let the bars run edge to edge. */
.studio-nav--inset,
.studio-foot--inset {
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
}

/* Merged footer: studio on the left, the game or app on the right. */
.studio-foot__left,
.studio-foot__right,
.studio-foot__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.studio-foot__left > * + *::before { content: "|"; margin: 0 14px; opacity: 0.45; color: var(--s-faint); }
.studio-foot__right { gap: 6px 18px; }
.studio-foot__nav a + a::before { content: "·"; margin: 0 9px; opacity: 0.6; color: var(--s-faint); }
.studio-foot__right > span:first-child { color: var(--s-dim); }