:root {
  --ham-header-height: 0px;
}

.ham-header-bar {
  --ham-bar-bg: #111827;
  --ham-button-bg: #fff;
  --ham-button-color: #111827;
  position: fixed;
  z-index: 2147483000;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  width: 100%;
  min-height: 54px;
  padding: .55rem 3rem .55rem 1rem;
  box-sizing: border-box;
  color: #fff;
  background: var(--ham-bar-bg);
  font: 600 15px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 4px 16px rgb(15 23 42 / 18%);
}

.ham-header-spacer {
  display: block;
  width: 100%;
  height: var(--ham-header-height);
  pointer-events: none;
}

body.admin-bar .ham-header-bar { top: 32px; }

.ham-diagnostic {
  position: fixed;
  z-index: 2147483647;
  right: 14px;
  bottom: 14px;
  max-width: min(420px, calc(100vw - 28px));
  padding: 10px 13px;
  border: 1px solid #f3c676;
  border-radius: 9px;
  color: #553400;
  background: #fff7df;
  box-shadow: 0 10px 28px rgb(15 23 42 / 22%);
  font: 600 12px/1.4 system-ui, sans-serif;
}

.ham-header-text {
  min-width: 0;
  text-wrap: balance;
}

.ham-header-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 32px;
  padding: .35rem .85rem;
  border-radius: 999px;
  color: var(--ham-button-color) !important;
  background: var(--ham-button-bg);
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease;
}

.ham-header-button-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border-radius: 50%;
  object-fit: cover;
}

.ham-header-button-arrow { font-size: 19px; line-height: 1; }
.ham-button-animate-wiggle { animation: ham-button-wiggle 2.4s ease-in-out infinite; }
.ham-button-animate-pulse { animation: ham-button-soft-pulse 1.8s ease-in-out infinite; }

.ham-header-button:hover,
.ham-header-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgb(0 0 0 / 20%);
}

.ham-header-button:focus-visible,
.ham-header-close:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }

.ham-header-close {
  position: absolute;
  right: .65rem;
  top: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: rgb(255 255 255 / 14%);
  font: 24px/30px sans-serif;
  cursor: pointer;
}

.ham-slot,
.ham-creative {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 1rem auto;
  overflow: hidden;
}

.ham-creative-frame {
  display: block;
  max-width: 100%;
  border: 0;
  color-scheme: normal;
}

.ham-network-banner {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  color-scheme: normal;
}

.ham-animate-fade { animation: ham-fade .35s ease both; }
.ham-animate-slide { animation: ham-slide .4s cubic-bezier(.2,.8,.2,1) both; }
.ham-animate-pulse { animation: ham-pulse 1.8s ease-in-out 2; }
.ham-animate-bounce { animation: ham-bounce .7s ease 1; }

@keyframes ham-fade { from { opacity: 0; } }
@keyframes ham-slide { from { opacity: 0; transform: translateY(-100%); } }
@keyframes ham-pulse { 50% { filter: brightness(1.18); } }
@keyframes ham-bounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(5px); } 70% { transform: translateY(-2px); } }
@keyframes ham-button-wiggle { 0%, 72%, 100% { transform: translateX(0) rotate(0); } 78% { transform: translateX(-2px) rotate(-1deg); } 84% { transform: translateX(2px) rotate(1deg); } 90% { transform: translateX(-1px) rotate(-.5deg); } }
@keyframes ham-button-soft-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgb(0 0 0 / 0%); } 50% { transform: scale(1.035); box-shadow: 0 5px 16px rgb(0 0 0 / 16%); } }

@media (max-width: 600px) {
  .ham-header-bar {
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: clamp(.35rem, 2vw, .65rem);
    min-height: 50px;
    padding: .42rem 2.75rem .42rem .6rem;
    font-size: clamp(11px, 3.05vw, 13px);
    line-height: 1.15;
    text-align: center;
  }

  .ham-header-text {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    white-space: nowrap;
  }

  .ham-header-button {
    align-self: auto;
    gap: .3rem;
    min-height: 34px;
    padding: .34rem .65rem;
    line-height: 1;
    white-space: nowrap;
  }

  .ham-header-button-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }

  .ham-header-button-arrow { font-size: 16px; }

  .ham-header-close {
    right: .4rem;
    width: 34px;
    height: 34px;
    font-size: 22px;
    line-height: 32px;
  }

  body.admin-bar .ham-header-bar { top: 46px; }
}

@media (max-width: 360px) {
  .ham-header-bar {
    gap: .3rem;
    padding-right: 2.35rem;
    padding-left: .4rem;
    font-size: 11px;
  }

  .ham-header-button { padding-right: .5rem; padding-left: .5rem; }
  .ham-header-close { right: .25rem; width: 30px; height: 30px; font-size: 20px; line-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ham-header-bar,
  .ham-header-button { animation: none !important; transition: none !important; }
}