/* ============================================================
   PLAKORO — shared site header
   The single source of truth for the topbar. Every page links this
   file so the header looks and behaves identically everywhere.
   (Styles lifted verbatim from index.html, which is the design origin.)
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--card);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}
.topbar-brand {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--gold);
}
.topbar-link {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.topbar-link:hover {
  opacity: 1;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lang-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.85rem;
}
.update-bar {
  background: var(--card);
  color: var(--muted);
  font-size: 0.75rem;
  padding: 4px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Mobile */
@media (max-width: 768px) {
  .topbar-hamburger {
    display: block;
  }
  .topbar-left .topbar-link {
    display: none;
  }
  .topbar.menu-open .topbar-left .topbar-link {
    display: block;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--card);
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
}

/* Active page indicator */
.topbar-link.is-active {
  opacity: 1;
  color: var(--gold, #f5c518);
  font-weight: 600;
}

/* The gold Play button on the right */
.plk-header-play {
  background: var(--gold, #f5c518);
  color: #1a1a2e;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 7px 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.plk-header-play:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(245, 197, 24, 0.4);
}

/* On the home page the Play button would link to itself — hide it there */
.topbar-link.is-active[href$="index.html"],
body.is-home .plk-header-play {
  display: none;
}

/* Keep the right-hand controls from squashing on small screens */
@media (max-width: 768px) {
  .topbar-right {
    gap: 8px;
  }
  .plk-header-play {
    display: none;
  }
  .topbar-brand {
    font-size: 1rem;
  }
}