/* =========================================================
   TALES OF THE MUDCRABB - COMBINED FINAL PATCH
   Fixes: Mud Crabb panel overflow + meteorite buttons + hero polish
   ========================================================= */

/* Better full-site button: meteorite steel, silver face, gold trim */
.tmc-btn,
button.tmc-btn,
a.tmc-btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #f8fbff !important;
  -webkit-text-fill-color: #f8fbff !important;
  border: 1px solid rgba(225, 184, 92, .88) !important;
  background:
    repeating-linear-gradient(128deg,
      rgba(255,255,255,.22) 0px,
      rgba(166,188,199,.22) 4px,
      rgba(32,43,50,.32) 8px,
      rgba(236,249,255,.24) 13px,
      rgba(77,92,101,.26) 18px,
      rgba(20,28,34,.32) 25px),
    linear-gradient(180deg,
      #52626c 0%,
      #27343c 42%,
      #111a20 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 0 0 1px rgba(255,224,140,.14),
    0 8px 20px rgba(0,0,0,.38) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.95),
    0 0 8px rgba(168,224,255,.22) !important;
}

.tmc-btn::before,
button.tmc-btn::before,
a.tmc-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    linear-gradient(110deg,
      transparent 0%,
      rgba(136,222,255,.16) 36%,
      rgba(255,255,255,.22) 49%,
      rgba(136,222,255,.12) 62%,
      transparent 100%) !important;
  transform: translateX(-120%) !important;
  transition: transform .42s ease !important;
}

.tmc-btn:hover,
button.tmc-btn:hover,
a.tmc-btn:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255,218,126,.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -2px 0 rgba(0,0,0,.62),
    0 0 18px rgba(103,214,255,.28),
    0 0 18px rgba(255,195,84,.25),
    0 13px 26px rgba(0,0,0,.45) !important;
}

.tmc-btn:hover::before,
button.tmc-btn:hover::before,
a.tmc-btn:hover::before {
  transform: translateX(120%) !important;
}

/* Make DRAKORIA sit higher and separate from subtitle */
.tmc-hero-content {
  transform: translateY(-30px) !important;
}

.tmc-wordmark {
  margin-bottom: .42rem !important;
}

.tmc-subtitle {
  margin-top: .65rem !important;
}

/* Make the meteorite/steel title less flat and more forged */
.tmc-wordmark > span {
  background:
    repeating-linear-gradient(135deg,
      #f7fbff 0px,
      #7f929e 5px,
      #27353d 10px,
      #dcecf5 15px,
      #4e6572 22px,
      #f9ffff 30px,
      #18252c 38px),
    linear-gradient(180deg,
      #f8ffff 0%,
      #c4d4dc 14%,
      #586e7a 33%,
      #f4fbff 48%,
      #354a56 64%,
      #cbd9e1 78%,
      #eef8ff 100%) !important;
  background-blend-mode: overlay, normal !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.52),
    0 -1px 0 rgba(0,0,0,.92),
    0 0 8px rgba(130,220,255,.28),
    0 0 16px rgba(255,207,116,.08),
    0 7px 10px rgba(0,0,0,.78) !important;
}

/* Tone the O down so it feels part of the word */
.tmc-ring-o {
  width: clamp(64px, 7.1vw, 106px) !important;
  margin: 0 clamp(-.32em, -.75vw, -.18em) !important;
  transform: translateY(.025em) scale(.9) !important;
}

/* Keep moon visible and logo proud */
.tmc-header {
  min-height: 104px !important;
  background: linear-gradient(180deg, rgba(3,8,13,.18), rgba(3,8,13,.05) 68%, rgba(3,8,13,0)) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.tmc-brand {
  width: 132px !important;
  min-width: 132px !important;
  height: 116px !important;
}

.tmc-brand img {
  width: 124px !important;
  max-width: 124px !important;
  opacity: 1 !important;
}

/* Blue Mountains glow */
.tmc-hero-bg {
  filter: brightness(1.16) contrast(1.2) saturate(1.55) hue-rotate(-4deg) !important;
}

/* =========================================================
   MUD CRABB / ABOUT SECTION FIX
   The right heading now wraps and never runs off side.
   ========================================================= */

.tmc-about-feature {
  background:
    radial-gradient(circle at 24% 40%, rgba(255,174,77,.20), transparent 25rem),
    radial-gradient(circle at 70% 45%, rgba(83,190,255,.12), transparent 24rem),
    linear-gradient(180deg, #07131f, #0b1b2a) !important;
}

.tmc-about-grid {
  grid-template-columns: minmax(340px, 1.02fr) minmax(360px, .98fr) !important;
  gap: clamp(1.4rem, 3vw, 3.2rem) !important;
  align-items: center !important;
}

.tmc-opening-page {
  transform: scale(1.06) !important;
  transform-origin: center center !important;
  box-shadow:
    0 0 28px rgba(255,169,73,.22),
    0 18px 42px rgba(0,0,0,.50) !important;
}

.tmc-opening-page img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.tmc-about-copy {
  width: 100% !important;
  max-width: 620px !important;
  padding: clamp(1.6rem, 3.2vw, 3.15rem) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,186,90,.12), transparent 18rem),
    linear-gradient(180deg, rgba(13,34,52,.94), rgba(7,20,32,.96)) !important;
}

.tmc-about-copy h2 {
  font-size: clamp(2.35rem, 5.1vw, 4.95rem) !important;
  line-height: .95 !important;
  letter-spacing: .045em !important;
  word-spacing: .08em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  max-width: 100% !important;
  margin-bottom: 1.25rem !important;
}

.tmc-about-copy p {
  max-width: 44rem !important;
}

.tmc-about-actions {
  justify-content: flex-start !important;
}

/* Mobile safety */
@media (max-width: 980px) {
  .tmc-about-grid {
    grid-template-columns: 1fr !important;
  }

  .tmc-opening-page {
    transform: none !important;
  }

  .tmc-about-copy {
    max-width: none !important;
  }
}

@media (max-width: 620px) {
  .tmc-hero-content {
    transform: translateY(-14px) !important;
  }

  .tmc-about-copy h2 {
    font-size: clamp(2rem, 12vw, 3.3rem) !important;
    letter-spacing: .025em !important;
  }

  .tmc-brand {
    width: 86px !important;
    min-width: 86px !important;
    height: 84px !important;
  }

  .tmc-brand img {
    width: 80px !important;
    max-width: 80px !important;
  }
}