/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */

header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  border-bottom: var(--grid);
  background: var(--bg);
  display: grid; grid-template-columns: auto 1fr 200px;
  align-items: center;
  z-index: 900;
}
@media (max-width: 768px) {
  header { grid-template-columns: auto 1fr auto; }
}

.logo {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  text-decoration: none; padding: 10px 20px;
  border-right: var(--grid); height: 100%;
  flex-shrink: 0;
}
.logo-badge {
  width: 34px; height: 34px;
  background: var(--pink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cond); font-size: 24px; font-weight: 900;
  color: var(--white); flex-shrink: 0;
  clip-path: polygon(0 0, 90% 0, 100% 15%, 100% 100%, 10% 100%, 0 85%);
}

.logo-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  flex-shrink: 0;
}
.logo-name {
  font-family: var(--cond); font-size: 24px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--white);
  white-space: nowrap;
}

.header-ticker {
  overflow: hidden; padding: 0 24px;
  border-right: var(--grid); height: 100%;
  display: flex; align-items: center;
}
.ticker-text {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--white-dim);
  white-space: nowrap;
  animation: ticker 28s linear infinite;
  display: inline-block;
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 768px) { .header-ticker { display: none; } }

.header-right {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 20px; height: 100%; gap: 16px;
}
.sound-toggle {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
  background: transparent; border: none; color: var(--white-dim); cursor: none;
  transition: color 0.2s; white-space: nowrap;
}
.sound-toggle.on { color: var(--pink); }
.sound-toggle:hover { color: var(--white); }
@media (max-width: 768px) { .sound-toggle { cursor: default; font-size: 10px; padding: 0; } }