/* ================================================================
   NO PERRY — game-ui.css (24D1)
   EXACT CodePen technique:
   LEFT CAP (::before) + REPEAT-X CENTER (span) + RIGHT CAP (::after)
   Local sprites only. background-position state rows.
   ================================================================ */

:root {
  --np-btn-h: 56px;
  --np-btn-cap: 16px;
  --np-btn-press: 3px;
  --np-btn-shadow: 4px;
  --np-btn-y-default: 0px;
  --np-btn-y-hover: -56px;
  --np-btn-y-pressed: -112px;
  --np-btn-y-disabled: -168px;

  --np-btn-primary-center: url('../assets/game-ui/8bit-buttons/primary-center-sprite.png');
  --np-btn-primary-caps: url('../assets/game-ui/8bit-buttons/primary-caps-sprite.png');
  --np-btn-secondary-center: url('../assets/game-ui/8bit-buttons/secondary-center-sprite.png');
  --np-btn-secondary-caps: url('../assets/game-ui/8bit-buttons/secondary-caps-sprite.png');

  --np-btn-primary-center-compact: url('../assets/game-ui/8bit-buttons/primary-center-compact-sprite.png');
  --np-btn-primary-caps-compact: url('../assets/game-ui/8bit-buttons/primary-caps-compact-sprite.png');
  --np-btn-secondary-center-compact: url('../assets/game-ui/8bit-buttons/secondary-center-compact-sprite.png');
  --np-btn-secondary-caps-compact: url('../assets/game-ui/8bit-buttons/secondary-caps-compact-sprite.png');

  --np-btn-primary-center-micro: url('../assets/game-ui/8bit-buttons/primary-center-micro-sprite.png');
  --np-btn-primary-caps-micro: url('../assets/game-ui/8bit-buttons/primary-caps-micro-sprite.png');
  --np-btn-secondary-center-micro: url('../assets/game-ui/8bit-buttons/secondary-center-micro-sprite.png');
  --np-btn-secondary-caps-micro: url('../assets/game-ui/8bit-buttons/secondary-caps-micro-sprite.png');
}

/* —— Base: CodePen float construction —— */
.np-pixel-btn {
  --_center: var(--np-btn-primary-center);
  --_caps: var(--np-btn-primary-caps);
  --_ink: #120e08;
  --_h: var(--np-btn-h);
  --_cap: var(--np-btn-cap);
  --_y: var(--np-btn-y-default);
  --_y-hover: var(--np-btn-y-hover);
  --_y-pressed: var(--np-btn-y-pressed);
  --_y-disabled: var(--np-btn-y-disabled);
  --_center-w: 8px;
  --_sheet-h: 224px; /* 56 * 4 */
  --_pad-x: 14px;
  --_font: 13px;
  --_track: 0.12em;

  position: relative;
  display: inline-block;
  height: var(--_h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-decoration: none;
  color: var(--_ink);
  -webkit-text-fill-color: var(--_ink);
  cursor: pointer;
  font-family: var(--font-title, 'Cinzel', 'Times New Roman', serif);
  font-size: var(--_font);
  font-weight: 700;
  letter-spacing: var(--_track);
  text-transform: uppercase;
  line-height: var(--_h);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  image-rendering: pixelated;
  filter: drop-shadow(0 var(--np-btn-shadow) 0 #050403);
  transition: transform 70ms steps(2, end), filter 70ms steps(2, end);
  vertical-align: middle;
}

/* Kill any leftover mid/cap spans from prior system */
.np-pixel-btn .np-pixel-btn__cap-l,
.np-pixel-btn .np-pixel-btn__cap-r,
.np-pixel-btn .np-pixel-btn__mid,
.np-pixel-btn .np-pixel-btn__label {
  all: unset;
}

.np-pixel-btn > span,
.np-pixel-btn::before,
.np-pixel-btn::after {
  float: left;
  height: var(--_h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* CENTER — repeat-x sprite behind label */
.np-pixel-btn > span {
  display: block;
  position: relative;
  z-index: 1;
  min-width: var(--_center-w);
  padding: 0 var(--_pad-x);
  line-height: var(--_h);
  text-align: center;
  color: var(--_ink);
  -webkit-text-fill-color: var(--_ink);
  background-image: var(--_center);
  background-repeat: repeat-x;
  background-size: var(--_center-w) var(--_sheet-h);
  background-position: 0 var(--_y);
  background-color: transparent;
  pointer-events: none;
}

.np-pixel-btn > span svg {
  display: inline-block;
  vertical-align: -0.15em;
  width: 1em;
  height: 1em;
  margin-right: 6px;
}

.np-pixel-btn > span .np-pixel-btn__arrow {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  vertical-align: 0.1em;
}

/* LEFT CAP */
.np-pixel-btn::before {
  content: '';
  width: var(--_cap);
  background-image: var(--_caps);
  background-repeat: no-repeat;
  background-size: calc(var(--_cap) * 2) var(--_sheet-h);
  background-position: 0 var(--_y);
  background-color: transparent;
}

/* RIGHT CAP */
.np-pixel-btn::after {
  content: '';
  width: var(--_cap);
  background-image: var(--_caps);
  background-repeat: no-repeat;
  background-size: calc(var(--_cap) * 2) var(--_sheet-h);
  background-position: calc(var(--_cap) * -1) var(--_y);
  background-color: transparent;
}

/* —— States: background-position only —— */
.np-pixel-btn:hover,
.np-pixel-btn:focus-visible {
  --_y: var(--_y-hover);
  color: var(--_ink);
  -webkit-text-fill-color: var(--_ink);
}

.np-pixel-btn:focus-visible {
  outline: 2px solid #e8c547;
  outline-offset: 3px;
}

.np-pixel-btn:active {
  --_y: var(--_y-pressed);
  transform: translateY(var(--np-btn-press));
  filter: drop-shadow(0 1px 0 #050403);
  color: var(--_ink);
  -webkit-text-fill-color: var(--_ink);
}

.np-pixel-btn:disabled,
.np-pixel-btn.is-disabled,
.np-pixel-btn[aria-disabled='true'] {
  --_y: var(--_y-disabled);
  pointer-events: none;
  cursor: default;
}

/* —— Variants —— */
.np-pixel-btn--primary {
  --_center: var(--np-btn-primary-center);
  --_caps: var(--np-btn-primary-caps);
  --_ink: #120e08;
}

.np-pixel-btn--secondary,
.np-pixel-btn--ghost {
  --_center: var(--np-btn-secondary-center);
  --_caps: var(--np-btn-secondary-caps);
  --_ink: #e8d6a0;
}

/* Compact — dedicated 40px sprites (integer, no scale) */
.np-pixel-btn--compact,
.np-pixel-btn--nav {
  --_h: 40px;
  --_cap: 16px;
  --_center-w: 8px;
  --_sheet-h: 160px; /* 40 * 4 */
  --_y-default: 0px;
  --_y-hover: -40px;
  --_y-pressed: -80px;
  --_y-disabled: -120px;
  --_y: 0px;
  --_pad-x: 10px;
  --_font: 11px;
  height: 40px;
  line-height: 40px;
}

.np-pixel-btn--compact.np-pixel-btn--primary,
.np-pixel-btn--nav.np-pixel-btn--primary {
  --_center: var(--np-btn-primary-center-compact);
  --_caps: var(--np-btn-primary-caps-compact);
}

.np-pixel-btn--compact.np-pixel-btn--secondary,
.np-pixel-btn--compact.np-pixel-btn--ghost,
.np-pixel-btn--nav.np-pixel-btn--secondary,
.np-pixel-btn--nav.np-pixel-btn--ghost {
  --_center: var(--np-btn-secondary-center-compact);
  --_caps: var(--np-btn-secondary-caps-compact);
}

.np-pixel-btn--compact:hover,
.np-pixel-btn--compact:focus-visible,
.np-pixel-btn--nav:hover,
.np-pixel-btn--nav:focus-visible {
  --_y: -40px;
}

.np-pixel-btn--compact:active,
.np-pixel-btn--nav:active {
  --_y: -80px;
}

.np-pixel-btn--compact:disabled,
.np-pixel-btn--compact.is-disabled,
.np-pixel-btn--nav:disabled,
.np-pixel-btn--nav.is-disabled {
  --_y: -120px;
}

/* Micro — dedicated 32px sprites, 12px caps */
.np-pixel-btn--micro {
  --_h: 32px;
  --_cap: 12px;
  --_center-w: 6px;
  --_sheet-h: 128px; /* 32 * 4 */
  --_y: 0px;
  --_pad-x: 8px;
  --_font: 10px;
  --_track: 0.08em;
  height: 32px;
  line-height: 32px;
}

.np-pixel-btn--micro.np-pixel-btn--primary {
  --_center: var(--np-btn-primary-center-micro);
  --_caps: var(--np-btn-primary-caps-micro);
}

.np-pixel-btn--micro.np-pixel-btn--secondary,
.np-pixel-btn--micro.np-pixel-btn--ghost {
  --_center: var(--np-btn-secondary-center-micro);
  --_caps: var(--np-btn-secondary-caps-micro);
}

.np-pixel-btn--micro:hover,
.np-pixel-btn--micro:focus-visible {
  --_y: -32px;
}

.np-pixel-btn--micro:active {
  --_y: -64px;
}

.np-pixel-btn--micro:disabled,
.np-pixel-btn--micro.is-disabled {
  --_y: -96px;
}

/* Layout helpers */
.np-war-cta-row .np-pixel-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.np-war-cta-row .np-pixel-btn > span {
  /* fill remaining width between caps */
  width: calc(100% - var(--_cap) * 2);
  box-sizing: border-box;
}
.np-war-row-kd .np-pixel-btn {
  display: inline-block;
  vertical-align: middle;
  margin: 2px 0;
}
.hero-actions .np-pixel-btn {
  flex: 0 1 auto;
}

@media (max-width: 430px) {
  .hero-actions .np-pixel-btn {
    --_font: 11px;
    --_track: 0.06em;
    --_pad-x: 10px;
    max-width: calc(100vw - 2rem);
    min-height: 44px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
}

/* inline-block contains floats; do not overflow:hidden (clips drop-shadow) */

/* Kill layout.css padding/font overrides on migrated CTAs */
.nav-cta.np-pixel-btn,
.hero-cta.np-pixel-btn,
.hero-cta-ghost.np-pixel-btn,
.mobile-cta.np-pixel-btn,
.final-cta.np-pixel-btn,
.battle-link.np-pixel-btn,
.np-creator-cta.np-pixel-btn {
  padding: 0;
  font-size: var(--_font);
}