/* ── Fancy buttons ───────────────────────────────────────────
   TWIST: Join, Send, Submit — compact, centered, rounded
   SQUARE: back, settings, theme
   ─────────────────────────────────────────────────────────── */

/* ========== TWIST — Join / Send / Submit ========== */
.name-submit-btn,
#challenge-code-btn,
#name-submit-btn,
button.name-submit-btn,
.feedback-send-btn,
#feedback-send {
  position: relative !important;
  appearance: none;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text, #1a1714);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  width: 78px;
  height: 34px;
  min-height: 34px;
  min-width: 78px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* clip segments to rounded box */
  border-radius: 10px;
  z-index: 1;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
  text-align: center;
}

/* Segment strip — full button, no float offset */
.name-submit-btn .btn-twists,
#challenge-code-btn .btn-twists,
#name-submit-btn .btn-twists,
.feedback-send-btn .btn-twists,
#feedback-send .btn-twists {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 10px;
  overflow: hidden;
}

.name-submit-btn .twist-seg,
#challenge-code-btn .twist-seg,
#name-submit-btn .twist-seg,
.feedback-send-btn .twist-seg,
#feedback-send .twist-seg {
  display: block;
  height: 100%;
  flex: 1 1 25%;
  width: 25%;
  max-width: 25%;
  position: relative;
  margin: 0 !important;
  float: none;
}

.name-submit-btn .twist-seg:before,
#challenge-code-btn .twist-seg:before,
#name-submit-btn .twist-seg:before,
.feedback-send-btn .twist-seg:before,
#feedback-send .twist-seg:before {
  content: "";
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--blue, #1a4de8) 28%, #fed5a9);
  bottom: 100%;
  left: 0;
  position: absolute;
  transform-origin: center bottom 0px;
  transform: matrix3d(1, 0, 0, 0, 0, 0, -1, -0.003, 0, 1, 0, 0, 0, 0, 0, 1);
  transition: all 450ms cubic-bezier(0.97, 0, 0.395, 0.995);
}

.name-submit-btn .twist-seg:after,
#challenge-code-btn .twist-seg:after,
#name-submit-btn .twist-seg:after,
.feedback-send-btn .twist-seg:after,
#feedback-send .twist-seg:after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--blue, #1a4de8) 70%, #000);
  transform-origin: center top 0px;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.003, 0, -34, 0, 1);
  transition: all 450ms cubic-bezier(0.97, 0, 0.395, 0.995);
}

.name-submit-btn:hover .twist-seg:before,
#challenge-code-btn:hover .twist-seg:before,
#name-submit-btn:hover .twist-seg:before,
.feedback-send-btn:hover .twist-seg:before,
#feedback-send:hover .twist-seg:before {
  background: #fff;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0.003, 0, 34, 0, 1);
}

.name-submit-btn:hover .twist-seg:after,
#challenge-code-btn:hover .twist-seg:after,
#name-submit-btn:hover .twist-seg:after,
.feedback-send-btn:hover .twist-seg:after,
#feedback-send:hover .twist-seg:after {
  background: color-mix(in srgb, var(--purple, #7a3aee) 35%, #dedae1);
  transform: matrix3d(1, 0, 0, 0, 0, 0, -1, 0.003, 0, 1, 0, 0, 0, 0, 0, 1);
}

.name-submit-btn .twist-seg:nth-of-type(1):before,
.name-submit-btn .twist-seg:nth-of-type(1):after,
#challenge-code-btn .twist-seg:nth-of-type(1):before,
#challenge-code-btn .twist-seg:nth-of-type(1):after,
#name-submit-btn .twist-seg:nth-of-type(1):before,
#name-submit-btn .twist-seg:nth-of-type(1):after {
  transition-delay: 0s;
}
.name-submit-btn .twist-seg:nth-of-type(2):before,
.name-submit-btn .twist-seg:nth-of-type(2):after,
#challenge-code-btn .twist-seg:nth-of-type(2):before,
#challenge-code-btn .twist-seg:nth-of-type(2):after,
#name-submit-btn .twist-seg:nth-of-type(2):before,
#name-submit-btn .twist-seg:nth-of-type(2):after {
  transition-delay: 0.08s;
}
.name-submit-btn .twist-seg:nth-of-type(3):before,
.name-submit-btn .twist-seg:nth-of-type(3):after,
#challenge-code-btn .twist-seg:nth-of-type(3):before,
#challenge-code-btn .twist-seg:nth-of-type(3):after,
#name-submit-btn .twist-seg:nth-of-type(3):before,
#name-submit-btn .twist-seg:nth-of-type(3):after {
  transition-delay: 0.16s;
}
.name-submit-btn .twist-seg:nth-of-type(4):before,
.name-submit-btn .twist-seg:nth-of-type(4):after,
#challenge-code-btn .twist-seg:nth-of-type(4):before,
#challenge-code-btn .twist-seg:nth-of-type(4):after,
#name-submit-btn .twist-seg:nth-of-type(4):before,
#name-submit-btn .twist-seg:nth-of-type(4):after {
  transition-delay: 0.24s;
}

/* Labels perfectly centered in the box */
.name-submit-btn .btn-label,
#challenge-code-btn .btn-label,
#name-submit-btn .btn-label,
.feedback-send-btn .btn-label,
#feedback-send .btn-label {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  transition: all 450ms cubic-bezier(0.97, 0, 0.395, 0.995);
  box-sizing: border-box;
}

.name-submit-btn .btn-label-a,
#challenge-code-btn .btn-label-a,
#name-submit-btn .btn-label-a,
.feedback-send-btn .btn-label-a,
#feedback-send .btn-label-a {
  color: var(--text, #3d3b40);
  top: 0;
  bottom: auto;
  /* Start flipped “above”; hover brings into place */
  transform-origin: center bottom 0px;
  transform: matrix3d(1, 0, 0, 0, 0, 0, -1, -0.003, 0, 1, 0, 0, 0, 0, 0, 1);
}

.name-submit-btn:hover .btn-label-a,
#challenge-code-btn:hover .btn-label-a,
#name-submit-btn:hover .btn-label-a,
.feedback-send-btn:hover .btn-label-a,
#feedback-send:hover .btn-label-a {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0.003, 0, 34, 0, 1);
  color: var(--text, #1a1714);
}

.name-submit-btn .btn-label-b,
#challenge-code-btn .btn-label-b,
#name-submit-btn .btn-label-b,
.feedback-send-btn .btn-label-b,
#feedback-send .btn-label-b {
  color: #fff;
  top: 0;
  transform-origin: center top 0px;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.003, 0, -34, 0, 1);
}

.name-submit-btn:hover .btn-label-b,
#challenge-code-btn:hover .btn-label-b,
#name-submit-btn:hover .btn-label-b,
.feedback-send-btn:hover .btn-label-b,
#feedback-send:hover .btn-label-b {
  transform: matrix3d(1, 0, 0, 0, 0, 0, -1, 0.003, 0, 1, 0, 0, 0, 0, 0, 1);
}

/* Idle: show label A sitting in the box (not flipped away) for readability */
.name-submit-btn .btn-label-a,
#challenge-code-btn .btn-label-a,
#name-submit-btn .btn-label-a,
.feedback-send-btn .btn-label-a,
#feedback-send .btn-label-a {
  transform: none;
  color: #fff;
}

.name-submit-btn .btn-label-b,
#challenge-code-btn .btn-label-b,
#name-submit-btn .btn-label-b,
.feedback-send-btn .btn-label-b,
#feedback-send .btn-label-b {
  opacity: 0;
  transform: none;
}

/* Idle fill so the rounded pill is visible before hover */
.name-submit-btn::after,
#challenge-code-btn::after,
#name-submit-btn::after,
.feedback-send-btn::after,
#feedback-send::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: var(--blue, #1a4de8);
  z-index: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.name-submit-btn:hover::after,
#challenge-code-btn:hover::after,
#name-submit-btn:hover::after,
.feedback-send-btn:hover::after,
#feedback-send:hover::after {
  opacity: 0;
}

.name-submit-btn:hover .btn-label-a,
#challenge-code-btn:hover .btn-label-a,
#name-submit-btn:hover .btn-label-a {
  opacity: 0;
  transform: none;
}

.name-submit-btn:hover .btn-label-b,
#challenge-code-btn:hover .btn-label-b,
#name-submit-btn:hover .btn-label-b {
  opacity: 1;
  color: var(--text, #1a1714);
  transform: none;
}

/* ========== SQUARE / DIAMOND — back, settings, theme ========== */
.back-btn,
.settings-btn,
.theme-toggle {
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--text, #1a1714);
}

.back-btn::before,
.settings-btn::before,
.theme-toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid var(--blue, #1a4de8);
  transform: rotate(45deg);
  z-index: 0;
  transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);
  background: color-mix(in srgb, var(--blue, #1a4de8) 10%, transparent);
}

.back-btn:hover::before,
.settings-btn:hover::before,
.theme-toggle:hover::before {
  transform: rotate(135deg);
  border-color: var(--purple, #7a3aee);
  background: color-mix(in srgb, var(--blue, #1a4de8) 28%, transparent);
}

.back-btn > svg,
.settings-btn > svg,
.theme-toggle {
  position: relative;
  z-index: 2;
}

.back-btn:hover,
.settings-btn:hover,
.theme-toggle:hover {
  color: var(--blue, #1a4de8) !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.back-btn .btn-twists,
.settings-btn .btn-twists,
.theme-toggle .btn-twists {
  display: none !important;
}

[data-mode="dark"] .back-btn,
[data-mode="dark"] .settings-btn,
[data-mode="dark"] .theme-toggle,
[data-mode="dark"] .back-btn,
[data-mode="dark"] .settings-btn,
[data-mode="dark"] .theme-toggle {
  color: #f0ece6;
}

@media (prefers-reduced-motion: reduce) {
  .twist-seg:before,
  .twist-seg:after,
  .btn-label,
  .back-btn::before,
  .settings-btn::before,
  .theme-toggle::before {
    transition: none !important;
  }
}

/* The button grows with its label (the labels themselves are absolutely positioned for the flip) */
.name-submit-btn, #challenge-code-btn, #name-submit-btn, .feedback-send-btn, #feedback-send { width: auto !important; }
.name-submit-btn .btn-sizer, #challenge-code-btn .btn-sizer, #name-submit-btn .btn-sizer, .feedback-send-btn .btn-sizer, #feedback-send .btn-sizer {
  visibility: hidden; display: block; padding: 0 18px; white-space: nowrap; pointer-events: none;
}
.name-submit-btn .btn-label, #challenge-code-btn .btn-label, #name-submit-btn .btn-label { white-space: nowrap; }