/* ─────────────────────────────────────────────────────────────
   GEMHOOD EXTENSION MODULE (COMPLEMENTING PIXEL-UI.CSS & STYLES.CSS)
   Uses the exact pixel design system of challengerswebs1
   ───────────────────────────────────────────────────────────── */

:root {
  --px-gold: #ffd700;
  --px-gold-dim: #2b2204;
}

/* ─── Top Navigation Header (Logo Left, Checker Button Right) ─── */
.clean-top-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  max-width: 960px !important;
  width: 100% !important;
  margin: 26px auto 16px !important;
  padding: 0 20px !important;
  z-index: 40 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.top-logo-link {
  font-family: 'KiwiSoda', monospace !important;
  font-size: 3.8rem !important;
  color: var(--px-lime) !important;
  text-decoration: none !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  text-shadow: 0 0 16px rgba(214, 255, 0, 0.45) !important;
  display: inline-block !important;
  transition: transform 0.15s ease !important;
}

.top-logo-link:hover {
  transform: scale(1.04) !important;
}

.top-checker-btn {
  font-family: var(--px-font) !important;
  font-size: 1.35rem !important;
  padding: 10px 22px !important;
  letter-spacing: 0.5px !important;
}

/* Hero Streak Area (Frameless, clean inline pixel style) */
.hero-streak-container {
  display: flex;
  justify-content: center;
  margin: 12px auto 10px !important;
  position: relative;
  z-index: 10;
}

.hero-streak-badge,
.hero-streak-badge-frameless {
  cursor: default;
  user-select: none;
  font-family: var(--px-font) !important;
  font-size: 1.55rem !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transform: none !important;
}

.hero-streak-badge::before,
.hero-streak-badge::after,
.hero-streak-badge-frameless::before,
.hero-streak-badge-frameless::after {
  display: none !important;
}

.hero-streak-badge span,
.hero-streak-badge-frameless span {
  color: var(--px-lime);
  font-weight: bold;
}

/* Pixel Fire Icon - enlarged */
.pixel-fire-icon {
  width: 32px !important;
  height: 28px !important;
  vertical-align: middle !important;
  display: inline-block !important;
  margin-right: 6px !important;
  image-rendering: pixelated !important;
  shape-rendering: crispEdges !important;
}

/* ─── Streak & Round Switcher Row (Side by Side) ─── */
.streak-switcher-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 38px 0 10px !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.streak-switcher-row .oracle-demo-tag {
  position: absolute !important;
  left: 50% !important;
  bottom: 6px !important;
  transform: translateX(-50%) !important;
  font-family: var(--font-pixel) !important;
  font-size: 2.85rem !important;
  color: var(--hot) !important;
  letter-spacing: 4px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  z-index: 10 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  text-shadow: 0 0 18px rgba(214, 255, 0, 0.65) !important;
}

.streak-switcher-row .hero-streak-wrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.streak-switcher-row .hero-streak-badge,
.streak-switcher-row .hero-streak-badge-frameless {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  white-space: nowrap;
  transform: none !important;
}

/* Fixed-width Grid for Round Switcher so Left Arrow NEVER Moves */
.streak-switcher-row .round-switcher {
  margin: 0 !important;
  padding: 0 !important;
  width: 360px !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 44px 1fr 44px !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

.streak-switcher-row .round-switcher__content {
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.streak-switcher-row .round-switcher__title {
  font-size: 2.3rem !important;
  line-height: 1 !important;
}

.streak-switcher-row .round-switcher__btn {
  width: 44px !important;
  height: 44px !important;
  font-size: 1.5rem !important;
}

@media (max-width: 768px) {
  .streak-switcher-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .streak-switcher-row .round-switcher {
    width: 100% !important;
  }
}

/* Arena Main Section */
.gemhood-section {
  max-width: 960px !important;
  margin: 0 auto 70px !important;
  padding: 0 20px !important;
  position: relative;
  z-index: 5;
}

/* ─── Vote YES / NO Buttons & Stats Grid ─── */
.vote-buttons-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin-top: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.vote-choice-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.vote-choice-card .vote-action-btn {
  width: 100% !important;
  height: 56px !important;
  font-size: 2.2rem !important;
  letter-spacing: 1.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, filter 0.15s ease, background-color 0.15s ease !important;
}

.vote-choice-card .vote-action-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 0 14px rgba(214, 255, 0, 0.6)) !important;
}

.vote-choice-card .vote-action-btn:disabled:not(.is-winner-btn):not(.is-selected) {
  cursor: default !important;
  opacity: 0.45 !important;
  filter: none !important;
  transform: none !important;
}

.vote-choice-card .vote-action-btn.is-selected {
  background-color: var(--px-lime) !important;
  color: #000000 !important;
  box-shadow: 0 0 18px rgba(214, 255, 0, 0.6) !important;
  opacity: 1 !important;
}

.vote-choice-card .vote-action-btn.is-selected::before {
  display: none !important;
}

.vote-choice-card .vote-action-btn.is-winner-btn {
  background-color: var(--px-gold) !important;
  color: #000000 !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.7) !important;
  opacity: 1 !important;
}

.vote-choice-card .vote-action-btn.is-winner-btn::before {
  display: none !important;
}

.vote-stat-details {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  padding: 4px 2px !important;
  width: 100% !important;
}

.vote-stat-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: var(--px-font) !important;
  width: 100% !important;
  text-align: center !important;
}

.vote-stat-pct {
  font-size: 1.85rem !important;
  font-weight: bold !important;
  color: var(--px-lime) !important;
  line-height: 1 !important;
  text-align: center !important;
}

.vote-stat-count {
  font-size: 1.25rem !important;
  color: var(--px-gray) !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
}

.vote-choice-card.is-winner .vote-stat-pct {
  color: var(--px-gold);
}

.vote-choice-card.is-winner .option-bar-fill {
  background-color: var(--px-gold);
}

.vote-tag-badge {
  display: inline-flex !important;
  align-self: center !important;
  margin: 4px auto 0 auto !important;
  font-family: var(--px-font) !important;
  font-size: 1.2rem !important;
  padding: 4px 10px !important;
  font-weight: bold !important;
  letter-spacing: 0.5px !important;
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)) !important;
}

.vote-tag-badge.is-winner {
  background-color: var(--px-gold) !important;
  color: #000000 !important;
}

.vote-tag-badge.is-user {
  background-color: var(--px-lime) !important;
  color: #000000 !important;
}

/* Oracle Subdesc (Moved below percentages & votes) */
.oracle-subdesc-bottom {
  margin-top: 18px !important;
  font-size: 1.35rem !important;
  color: var(--px-gray) !important;
  letter-spacing: 0.5px !important;
  line-height: 1.45 !important;
  border-top: none !important;
  padding-top: 0 !important;
}

@media (max-width: 480px) {
  .vote-stat-pct {
    font-size: 1.55rem !important;
  }
  .vote-stat-count {
    font-size: 1.1rem !important;
  }
}

/* Craft Button Insufficient Gems State (#0d100a background) */
.btn--insufficient,
#btn-craft-action:disabled {
  background-color: #0d100a !important;
  background: #0d100a !important;
  color: rgba(255, 255, 255, 0.3) !important;
  border: 2px solid #1a2712 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.btn--insufficient::before,
#btn-craft-action:disabled::before {
  display: none !important;
}

/* ─── Checker Page Layout (Card Vertically Centered in Screen, Footer Below Fold) ─── */
.checker-page-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  box-sizing: border-box !important;
  padding: 100px 20px 48px !important;
  z-index: 5;
}

.checker-page-wrapper .clean-top-nav {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 960px !important;
  margin: 26px auto 0 !important;
  padding: 0 20px !important;
}

.checker-page-wrapper .checker-section-center {
  width: 100% !important;
  max-width: 860px !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.checker-page-wrapper .checker-section-center .wl-checker-panel {
  width: 100% !important;
}

.checker-page-wrapper + .footer {
  margin-top: 0 !important;
}

/* Options Grid in Prediction Oracle */
.options-challengers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.option-box {
  background-color: var(--px-dark);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease;
  user-select: none;
}

.option-box:hover:not(.is-disabled) {
  transform: translateY(-3px);
  filter: drop-shadow(0 0 14px rgba(214, 255, 0, 0.45));
}

.option-box.is-selected::before {
  background-color: #162411 !important;
}

.option-box.is-winner {
  background-color: var(--px-gold) !important;
}

.option-box.is-winner::before {
  background-color: #211e0a !important;
}

.option-box.is-disabled {
  cursor: default;
}

.option-box__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.option-box__label {
  font-family: var(--px-font);
  font-size: 1.25rem;
  color: #9ab800;
  letter-spacing: 0.5px;
}

.option-box__title {
  font-family: var(--px-font);
  font-size: 1.85rem;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.2;
}

.option-box__stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--px-font);
  font-size: 1.25rem;
  color: var(--px-gray);
  margin-bottom: 6px;
}

.option-box__pct {
  color: var(--px-lime);
  font-weight: bold;
}

.option-box.is-winner .option-box__pct {
  color: var(--px-gold);
}

.option-bar-track {
  width: 100%;
  height: 8px;
  background: #040603;
  border: 1px solid #1a2712;
  overflow: hidden;
}

.option-bar-fill {
  height: 100%;
  background-color: var(--px-lime);
  transition: width 0.3s ease;
}

.option-box.is-winner .option-bar-fill {
  background-color: var(--px-gold);
}

/* Minecraft 4x4 Workbench Container */
.craft-bench-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
  background-color: #060904 !important;
  border: 2px solid #1a2712 !important;
  padding: 24px !important;
  margin: 20px 0 !important;
  flex-wrap: wrap !important;
}

/* 4x4 Grid - Styled as a Pixel Window with Stepped Corners and Thick #d6ff00 Dividing Lines */
.craft-grid-4x4.detail-box,
.craft-grid-4x4 {
  display: grid !important;
  grid-template-columns: repeat(4, 56px) !important;
  grid-template-rows: repeat(4, 56px) !important;
  gap: 4px !important; /* Thick 4px dividing lines */
  background-color: #d6ff00 !important; /* Frame and dividing lines in vibrant #d6ff00 */
  padding: 4px !important; /* 4px outer frame width */
  border: none !important;
  box-sizing: content-box !important;
  position: relative !important;
  isolation: isolate !important;
  box-shadow: 0 0 16px rgba(214, 255, 0, 0.35) !important;
  /* 16px True stepped pixel arc corners */
  clip-path: polygon(
    0 16px, 4px 16px, 4px 8px, 8px 8px, 8px 4px, 16px 4px, 16px 0,
    calc(100% - 16px) 0, calc(100% - 16px) 4px, calc(100% - 8px) 4px, calc(100% - 8px) 8px, calc(100% - 4px) 8px, calc(100% - 4px) 16px,
    100% 16px, 100% calc(100% - 16px),
    calc(100% - 4px) calc(100% - 16px), calc(100% - 4px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 4px), calc(100% - 16px) calc(100% - 4px), calc(100% - 16px) 100%,
    16px 100%, 16px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 8px), 4px calc(100% - 8px), 4px calc(100% - 8px), 4px calc(100% - 16px), 0 calc(100% - 16px)
  ) !important;
}

.craft-grid-4x4::before {
  display: none !important;
}

/* Individual Slot within the 4x4 Crafting Table */
.craft-slot-px {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  background-color: #080b06 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background-color 0.12s ease !important;
  box-sizing: border-box !important;
}

.craft-slot-px:hover {
  background-color: #15220f !important;
}

/* Corner Slots Inner Pixel Arc (Guarantees perfect 4px #d6ff00 border around every corner) */
.craft-slot-px:nth-child(1) {
  clip-path: polygon(
    0 12px, 4px 12px, 4px 4px, 12px 4px, 12px 0,
    100% 0, 100% 100%, 0 100%
  ) !important;
}

.craft-slot-px:nth-child(4) {
  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0, calc(100% - 12px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 12px, 100% 12px,
    100% 100%, 0 100%
  ) !important;
}

.craft-slot-px:nth-child(13) {
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    12px 100%, 12px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 12px), 0 calc(100% - 12px)
  ) !important;
}

.craft-slot-px:nth-child(16) {
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%,
    0 100%
  ) !important;
}

.craft-slot-gem {
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  pointer-events: none !important;
  display: block !important;
  filter: drop-shadow(0 0 6px rgba(214, 255, 0, 0.45)) !important;
}

.craft-slot-empty {
  display: none !important;
}

/* Arrow */
.craft-arrow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pixel-arrow-svg {
  width: 58px;
  height: 34px;
  fill: #3a4a30;
  transition: fill 0.2s ease, filter 0.2s ease;
}

.craft-arrow-wrap.is-ready .pixel-arrow-svg {
  fill: var(--px-lime);
  filter: drop-shadow(0 0 12px rgba(214, 255, 0, 0.85));
}

/* Result Slot */
.craft-result-slot {
  width: 96px;
  height: 96px;
  background-color: #080b06;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #1a2712;
  transition: all 0.2s ease;
}

.craft-result-slot.is-ready {
  border-color: var(--px-lime);
  filter: drop-shadow(0 0 16px rgba(214, 255, 0, 0.5));
}

.result-locked-icon {
  font-size: 2.2rem;
  opacity: 0.35;
}

.result-nft-img {
  width: 80px;
  height: 80px;
  border: 2px solid var(--px-lime);
  image-rendering: pixelated;
  animation: popIn 0.2s ease;
}

@keyframes popIn {
  from { transform: scale(0.7); }
  to { transform: scale(1); }
}

/* Responsive */
@media (max-width: 768px) {
  .options-challengers-grid {
    grid-template-columns: 1fr;
  }

  .craft-bench-container {
    flex-direction: column;
    gap: 18px;
  }

  .craft-grid-4x4.detail-box,
  .craft-grid-4x4 {
    grid-template-columns: repeat(4, 46px) !important;
    grid-template-rows: repeat(4, 46px) !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .craft-slot-px {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }

  .craft-slot-gem {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }

  .craft-arrow-wrap {
    transform: rotate(90deg);
  }

  .btn--large {
    width: 100% !important;
  }
}

/* ─── Rainbow Shimmer Button Override (Ensuring no dark overlay from pixel-ui) ─── */
#btn-hero-form,
a.btn--rainbow,
.btn--rainbow,
.top-form-btn {
  font-family: var(--font-pixel), monospace !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  padding: 14px 44px !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  background-image: linear-gradient(
    90deg,
    #ff0033 0%,
    #ff6600 7.14%,
    #ffea00 14.28%,
    #00ff55 21.42%,
    #00f0ff 28.56%,
    #7a00ff 35.7%,
    #ff00b3 42.84%,
    #ff0033 50%,
    #ff6600 57.14%,
    #ffea00 64.28%,
    #00ff55 71.42%,
    #00f0ff 78.56%,
    #7a00ff 85.7%,
    #ff00b3 92.84%,
    #ff0033 100%
  ) !important;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
  background-position: 0% 50%;
  animation: rainbow-flow 3s linear infinite !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
  text-shadow: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  user-select: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  clip-path: polygon(
    0 16px, 4px 16px, 4px 8px, 8px 8px, 8px 4px, 16px 4px, 16px 0,
    calc(100% - 16px) 0, calc(100% - 16px) 4px, calc(100% - 8px) 4px, calc(100% - 8px) 8px, calc(100% - 4px) 8px, calc(100% - 4px) 16px,
    100% 16px, 100% calc(100% - 16px),
    calc(100% - 4px) calc(100% - 16px), calc(100% - 4px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 4px), calc(100% - 16px) calc(100% - 4px), calc(100% - 16px) 100%,
    16px 100%, 16px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 8px), 4px calc(100% - 8px), 4px calc(100% - 16px), 0 calc(100% - 16px)
  ) !important;
}

/* Inner cut leaving 4px rainbow border */
#btn-hero-form::before,
a.btn--rainbow::before,
.btn--rainbow::before,
.top-form-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 4px !important;
  background-color: #0e120b !important;
  z-index: 1 !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
  transition: background-color 0.15s ease !important;
  clip-path: polygon(
    0 12px,
    4px 12px,
    4px 4px,
    12px 4px,
    12px 0,
    calc(100% - 12px) 0,
    calc(100% - 12px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 12px,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 12px) 100%,
    12px 100%,
    12px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 12px),
    0 calc(100% - 12px)
  ) !important;
}

/* Rainbow Text Inside Button */
.rainbow-btn-text {
  position: relative !important;
  z-index: 2 !important;
  display: inline-block !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: 1 !important;
  background-image: linear-gradient(
    90deg,
    #ff0033 0%,
    #ff6600 7.14%,
    #ffea00 14.28%,
    #00ff55 21.42%,
    #00f0ff 28.56%,
    #7a00ff 35.7%,
    #ff00b3 42.84%,
    #ff0033 50%,
    #ff6600 57.14%,
    #ffea00 64.28%,
    #00ff55 71.42%,
    #00f0ff 78.56%,
    #7a00ff 85.7%,
    #ff00b3 92.84%,
    #ff0033 100%
  ) !important;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
  background-position: 0% 50%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  animation: rainbow-flow 3s linear infinite !important;
}

#btn-hero-form:hover,
a.btn--rainbow:hover,
.btn--rainbow:hover,
.top-form-btn:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 0 20px rgba(255, 0, 80, 0.45), 0 0 30px rgba(0, 240, 255, 0.35) !important;
}

#btn-hero-form:hover::before,
a.btn--rainbow:hover::before,
.btn--rainbow:hover::before,
.top-form-btn:hover::before {
  background-color: #162012 !important;
}

#btn-hero-form:active,
a.btn--rainbow:active,
.btn--rainbow:active,
.top-form-btn:active {
  transform: translateY(1px) scale(0.98) !important;
}

/* Tasks spacing override */
.tasks-intro-header {
  margin: 0 auto 36px auto !important;
}

.tasks-intro-sub {
  margin: 0 0 32px 0 !important;
}

/* ─── Rainbow Shimmer for FORM !!! Title ─── */
.tasks-intro-title {
  background-image: linear-gradient(
    90deg,
    #ff0033 0%,
    #ff6600 7.14%,
    #ffea00 14.28%,
    #00ff55 21.42%,
    #00f0ff 28.56%,
    #7a00ff 35.7%,
    #ff00b3 42.84%,
    #ff0033 50%,
    #ff6600 57.14%,
    #ffea00 64.28%,
    #00ff55 71.42%,
    #00f0ff 78.56%,
    #7a00ff 85.7%,
    #ff00b3 92.84%,
    #ff0033 100%
  ) !important;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
  background-position: 0% 50%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  animation: rainbow-flow 3s linear infinite !important;
  filter: drop-shadow(0 0 14px rgba(255, 0, 100, 0.4)) drop-shadow(0 0 24px rgba(0, 240, 255, 0.3)) !important;
}

@keyframes rainbow-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@-webkit-keyframes rainbow-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* ─── Fixed Top-Right Corner Web3 Wallet & Mint Controls ─── */
.corner-wallet-wrap {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.corner-mint-btn {
  font-family: var(--px-font, '04B_03', monospace) !important;
  font-size: 1.25rem !important;
  padding: 10px 22px !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 16px rgba(214, 255, 0, 0.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
  animation: cornerMintPulse 2.8s ease-in-out infinite !important;
}

@keyframes cornerMintPulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(214, 255, 0, 0.35));
    transform: translateY(0);
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(214, 255, 0, 0.85));
    transform: translateY(-1px);
  }
}

.corner-mint-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  filter: drop-shadow(0 0 24px rgba(214, 255, 0, 0.95)) !important;
}

.corner-wallet-btn,
.nav-wallet-btn {
  font-family: var(--px-font, '04B_03', monospace) !important;
  font-size: 1.25rem !important;
  padding: 10px 22px !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 12px rgba(214, 255, 0, 0.25) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.corner-wallet-btn:hover,
.nav-wallet-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 20px rgba(214, 255, 0, 0.45) !important;
}

.corner-wallet-pill,
.nav-wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(9, 14, 6, 0.94);
  border: 2px solid #283e1a;
  padding: 8px 16px;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 16px rgba(214, 255, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.wallet-status-dot {
  width: 8px;
  height: 8px;
  background: #70808a;
  box-sizing: border-box;
  image-rendering: pixelated;
  display: inline-block;
}

.wallet-status-dot.is-connected {
  background: #00ff66;
  box-shadow: 0 0 8px #00ff66;
}

.wallet-address-short {
  font-family: var(--px-font, '04B_03', monospace);
  font-size: 1.15rem;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.wallet-disconnect-btn {
  background: transparent;
  border: none;
  color: #8c9c84;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
}

.wallet-disconnect-btn:hover {
  color: #ff3366;
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .corner-wallet-wrap {
    top: 14px;
    right: 14px;
    gap: 8px;
  }
  .corner-mint-btn,
  .corner-wallet-btn,
  .nav-wallet-btn {
    font-size: 1.05rem !important;
    padding: 8px 12px !important;
  }
  .corner-wallet-pill,
  .nav-wallet-pill {
    padding: 6px 12px;
    gap: 8px;
  }
  .wallet-address-short {
    font-size: 1rem;
  }
}

/* ─── Holder Verification Status Bar (Anti-Sybil & Continuous Holding) ─── */
.holder-verification-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #060904;
  border: 1px solid #1a2712;
  padding: 12px 18px;
  margin: 16px 0 20px 0;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.holder-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.holder-stat-label {
  font-family: var(--px-font, '04B_03', monospace);
  font-size: 1.05rem;
  color: #7d8f76;
  letter-spacing: 0.5px;
}

.holder-stat-val {
  font-family: var(--px-font, '04B_03', monospace);
  font-size: 1.25rem;
  color: var(--px-lime, #d6ff00);
  font-weight: bold;
}

.holder-stat-divider {
  color: #27381c;
  font-size: 0.9rem;
}

.holder-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--px-font, '04B_03', monospace);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}

.holder-status-pill.status-verified {
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

.holder-status-pill.status-pending {
  color: #ffea00;
  text-shadow: 0 0 10px rgba(255, 234, 0, 0.4);
}

.holder-status-pill.status-none {
  color: #ff4466;
  text-shadow: 0 0 10px rgba(255, 68, 102, 0.4);
}

.holder-status-pill.status-disconnected {
  color: #8c9c84;
}

.status-dot-mini {
  width: 7px;
  height: 7px;
  display: inline-block;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.holder-yield-badge {
  font-family: var(--px-font, '04B_03', monospace);
  font-size: 1.1rem;
  color: var(--px-gold, #ffd700);
  background: #171404;
  border: 1px solid #3d3408;
  padding: 2px 8px;
  letter-spacing: 0.5px;
}

.holder-sim-toggle {
  background: #0c1409;
  border: 1px dashed #2d451e;
  color: #9ab800;
  font-family: var(--px-font, '04B_03', monospace);
  font-size: 0.95rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.holder-sim-toggle:hover {
  background: #15240f;
  color: #d6ff00;
  border-color: #d6ff00;
}

@media (max-width: 768px) {
  .top-nav-inner {
    padding: 10px 16px;
  }
  .top-nav-link {
    display: none;
  }
  .holder-verification-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .holder-stat-divider {
    display: none;
  }
}