/* The site bar above the game on /play/ (play.js). Look A tokens; Cinzel comes from the game's own @font-face. */
:root {
  --tl-site-bar: 44px;
  --tl-inset-top: calc(var(--tl-site-bar) + env(safe-area-inset-top, 0px));
}

.tl-site-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  block-size: calc(var(--tl-site-bar) + env(safe-area-inset-top, 0px));
  padding-block-start: env(safe-area-inset-top, 0px);
  padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
  background: rgba(18, 13, 9, 0.92);
  border-block-end: 1px solid #3a2c1c;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.tl-site-bar a,
.tl-site-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 40px;
  padding-inline: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #f3e7d0;
  font: 700 15px/1 Cinzel, Georgia, serif;
  text-decoration: none;
  cursor: pointer;
}

.tl-site-bar button {
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #b8a68a;
}

.tl-site-bar button[hidden] {
  display: none;
}

.tl-site-bar svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tl-site-bar a:focus-visible,
.tl-site-bar button:focus-visible {
  outline: 3px solid #ffc44d;
  outline-offset: 1px;
}

.tl-site-noscript {
  position: fixed;
  inset: 60px 16px auto;
  color: #f3e7d0;
  font: 16px/1.5 system-ui, sans-serif;
}