/* Neumorphism button system — replica CSS del Framer "Button Component" */

:root {
  --neu-radius: 98px;
  --neu-transition:
    box-shadow 0.35s ease,
    transform 0.15s ease,
    background-color 0.2s ease;

  /* default / menu */
  --neu-bg: rgb(228, 222, 210);
  --neu-text: rgb(58, 48, 36);

  /* shared shadow builders */
  --neu-shadow-raised:
    7px 6px 10px 0px rgba(0, 0, 0, 0.28),
    -0.4px -0.4px 2.8px -0.875px rgba(255, 255, 255, 0.75),
    -1.2px -1.2px 8.5px -1.75px rgba(255, 255, 255, 0.7),
    -3.2px -3.2px 22.6px -2.625px rgba(255, 255, 255, 0.55),
    -10px -10px 70.7px -3.5px rgba(255, 255, 255, 0.28);
  --neu-shadow-pressed:
    inset 2px 1px 3px 1px rgba(90, 80, 68, 0.34),
    inset -1px -1px 4px 0px rgba(255, 255, 255, 0.84);
}

/* ── Base ── */

.neu-btn {
  --neu-btn-bg: var(--neu-bg);
  --neu-btn-text: var(--neu-text);
  --neu-btn-shadow-raised: var(--neu-shadow-raised);
  --neu-btn-shadow-pressed: var(--neu-shadow-pressed);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 10px 15px;
  border: none;
  border-radius: var(--neu-radius);
  background-color: var(--neu-btn-bg);
  color: var(--neu-btn-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--neu-btn-shadow-raised);
  transition: var(--neu-transition);
  -webkit-tap-highlight-color: transparent;
}

.neu-btn:hover,
.neu-btn:focus-visible {
  box-shadow: var(--neu-btn-shadow-pressed);
  outline: none;
}

.neu-btn:active {
  box-shadow: var(--neu-btn-shadow-pressed);
  transform: scale(0.98);
}

.neu-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Primary CTA (gold) ── */

.neu-btn--primary,
.menu-btn-primary.neu-btn {
  --neu-btn-bg: rgb(218, 178, 62);
  --neu-btn-text: rgb(42, 30, 8);
  --neu-btn-shadow-raised:
    7px 6px 10px 0px rgba(80, 55, 10, 0.32),
    -0.4px -0.4px 2.8px -0.875px rgba(255, 240, 180, 0.8),
    -1.2px -1.2px 8.5px -1.75px rgba(255, 235, 160, 0.7),
    -3.2px -3.2px 22.6px -2.625px rgba(255, 225, 140, 0.5),
    -10px -10px 70.7px -3.5px rgba(255, 210, 120, 0.25);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(100, 70, 15, 0.38),
    inset -1px -1px 4px 0px rgba(255, 235, 170, 0.85);
  font-weight: 700;
}

/* ── Auth chips (warm terracotta) ── */

.neu-btn--chip {
  --neu-btn-bg: rgb(210, 168, 132);
  --neu-btn-text: rgb(62, 38, 22);
  --neu-btn-shadow-raised:
    7px 6px 10px 0px rgba(70, 40, 20, 0.3),
    -0.4px -0.4px 2.8px -0.875px rgba(255, 225, 200, 0.75),
    -1.2px -1.2px 8.5px -1.75px rgba(255, 215, 185, 0.65),
    -10px -10px 70.7px -3.5px rgba(255, 200, 165, 0.22);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(90, 55, 30, 0.36),
    inset -1px -1px 4px 0px rgba(255, 225, 200, 0.82);

  min-height: 44px;
  padding: 0 18px;
  font-size: 0.82rem;
  letter-spacing: -0.04em;
}

/* ── Icon buttons (sage green) ── */

.neu-btn--icon {
  --neu-btn-bg: rgb(158, 188, 162);
  --neu-btn-text: rgb(28, 52, 34);
  --neu-btn-shadow-raised:
    7px 6px 10px 0px rgba(20, 50, 28, 0.3),
    -0.4px -0.4px 2.8px -0.875px rgba(220, 245, 225, 0.75),
    -1.2px -1.2px 8.5px -1.75px rgba(200, 235, 210, 0.65),
    -10px -10px 70.7px -3.5px rgba(180, 220, 190, 0.22);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(40, 75, 48, 0.36),
    inset -1px -1px 4px 0px rgba(220, 245, 225, 0.82);

  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.1rem;
}

.neu-btn--icon.menu-btn-icon {
  --neu-btn-bg: rgb(175, 195, 178);
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}

/* ── HUD action chips (cool slate) ── */

.neu-btn.glass-chip {
  --neu-btn-bg: rgb(186, 198, 210);
  --neu-btn-text: rgb(32, 42, 54);
  --neu-btn-shadow-raised:
    7px 6px 10px 0px rgba(30, 40, 55, 0.28),
    -0.4px -0.4px 2.8px -0.875px rgba(235, 242, 250, 0.75),
    -10px -10px 70.7px -3.5px rgba(210, 225, 240, 0.22);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(50, 65, 82, 0.34),
    inset -1px -1px 4px 0px rgba(235, 242, 250, 0.84);

  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.9rem;
  letter-spacing: -0.04em;
}

/* ── HUD primary chips (amber) ── */

.neu-btn.glass-chip--primary {
  --neu-btn-bg: rgb(212, 168, 58);
  --neu-btn-text: rgb(42, 30, 8);
  --neu-btn-shadow-raised:
    7px 6px 10px 0px rgba(80, 55, 10, 0.3),
    -0.4px -0.4px 2.8px -0.875px rgba(255, 235, 170, 0.78),
    -10px -10px 70.7px -3.5px rgba(255, 210, 120, 0.22);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(95, 68, 12, 0.38),
    inset -1px -1px 4px 0px rgba(255, 235, 170, 0.84);
  font-weight: 700;
}

/* ── HUD capture / active chip (forest green) ── */

.neu-btn.glass-chip.active {
  --neu-btn-bg: rgb(108, 168, 122);
  --neu-btn-text: rgb(18, 42, 26);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(30, 70, 42, 0.4),
    inset -1px -1px 4px 0px rgba(180, 230, 195, 0.8);
  transform: none;
}

/* ── Toggle groups (lavender stone) ── */

.neu-btn--toggle {
  --neu-btn-bg: rgb(198, 192, 214);
  --neu-btn-text: rgb(48, 40, 62);
  --neu-btn-shadow-raised:
    7px 6px 10px 0px rgba(50, 40, 70, 0.26),
    -0.4px -0.4px 2.8px -0.875px rgba(240, 235, 250, 0.75),
    -10px -10px 70.7px -3.5px rgba(220, 215, 240, 0.2);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(70, 58, 95, 0.32),
    inset -1px -1px 4px 0px rgba(240, 235, 250, 0.82);

  width: 100%;
  min-height: 44px;
  font-size: 0.92rem;
  letter-spacing: -0.04em;
  white-space: normal;
  text-align: center;
}

.play-mode-target-btn--active.neu-btn--toggle {
  --neu-btn-bg: rgb(218, 178, 62);
  --neu-btn-text: rgb(42, 30, 8);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(100, 70, 15, 0.38),
    inset -1px -1px 4px 0px rgba(255, 235, 170, 0.85);
}

/* ── Theme picker cards (pearl) ── */

.neu-btn--theme {
  --neu-btn-bg: rgb(220, 218, 212);
  --neu-btn-text: rgb(52, 48, 42);
  --neu-btn-shadow-raised:
    7px 6px 10px 0px rgba(60, 55, 48, 0.24),
    -0.4px -0.4px 2.8px -0.875px rgba(255, 255, 252, 0.78),
    -10px -10px 70.7px -3.5px rgba(245, 244, 240, 0.22);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(80, 75, 65, 0.3),
    inset -1px -1px 4px 0px rgba(255, 255, 252, 0.84);

  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 16px;
  text-align: left;
  white-space: normal;
}

.menu-theme-card--selected.neu-btn--theme {
  --neu-btn-bg: rgb(218, 178, 62);
  --neu-btn-text: rgb(42, 30, 8);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(100, 70, 15, 0.38),
    inset -1px -1px 4px 0px rgba(255, 235, 170, 0.85);
}

/* ── Tutorial progress dots ── */

.neu-btn--dot {
  --neu-btn-bg: rgb(175, 185, 178);
  --neu-btn-text: rgb(42, 52, 46);
  --neu-btn-shadow-raised:
    4px 3px 6px 0px rgba(40, 55, 45, 0.28),
    -0.3px -0.3px 2px rgba(230, 240, 232, 0.7);
  --neu-btn-shadow-pressed:
    inset 1px 1px 2px 1px rgba(55, 70, 58, 0.34),
    inset -1px -1px 3px rgba(230, 240, 232, 0.8);

  width: 14px;
  height: 14px;
  min-height: 14px;
  min-width: 14px;
  padding: 0;
  border-radius: 50%;
}

.neu-btn--dot.tutorial-progress-dot--active {
  --neu-btn-bg: rgb(218, 178, 62);
  --neu-btn-text: rgb(42, 30, 8);
  transform: scale(1.2);
}

/* ── Chat emote grid (soft sky) ── */

.neu-btn--emote {
  --neu-btn-bg: rgb(172, 198, 220);
  --neu-btn-text: rgb(28, 48, 68);
  --neu-btn-shadow-raised:
    5px 4px 8px 0px rgba(30, 55, 80, 0.28),
    -0.3px -0.3px 2px rgba(225, 240, 252, 0.72);
  --neu-btn-shadow-pressed:
    inset 2px 1px 3px 1px rgba(45, 75, 105, 0.34),
    inset -1px -1px 4px rgba(225, 240, 252, 0.82);

  width: 48px;
  height: 48px;
  min-height: 48px;
  min-width: 48px;
  padding: 0;
  border-radius: 16px;
}

.neu-btn--emote:hover:not(:disabled) {
  transform: scale(1.05);
}

.neu-btn--emote:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Text link buttons (login / register) ── */

.neu-btn--link {
  --neu-btn-bg: rgb(205, 185, 145);
  --neu-btn-text: rgb(62, 42, 12);
  --neu-btn-shadow-raised:
    4px 3px 6px 0px rgba(70, 50, 15, 0.26),
    -0.3px -0.3px 2px rgba(255, 240, 200, 0.7);
  --neu-btn-shadow-pressed:
    inset 1px 1px 2px 1px rgba(85, 60, 18, 0.32),
    inset -1px -1px 3px rgba(255, 240, 200, 0.8);

  display: inline;
  min-height: unset;
  padding: 2px 8px;
  border-radius: var(--neu-radius);
  font-size: inherit;
  font-family: inherit;
  letter-spacing: -0.04em;
  text-decoration: none;
  vertical-align: baseline;
}

.neu-btn--link:hover,
.neu-btn--link:focus-visible {
  text-decoration: none;
}

/* ── Active / selected (generic pressed state) ── */

.neu-btn--active,
.play-mode-target-btn--active,
.menu-theme-card--selected,
.tutorial-progress-dot--active,
.glass-chip.active {
  box-shadow: var(--neu-btn-shadow-pressed);
}

.neu-btn--active:hover,
.play-mode-target-btn--active:hover,
.menu-theme-card--selected:hover,
.tutorial-progress-dot--active:hover,
.glass-chip.active:hover {
  box-shadow: var(--neu-btn-shadow-pressed);
}

/* ── Compact (lobby / friends) ── */

.neu-btn--compact,
.menu-btn-compact.neu-btn {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.8rem;
}

/* ── Full-width menu actions ── */

.menu-actions .neu-btn,
.glass-modal-actions .neu-btn {
  width: 100%;
}

.glass-modal-actions .neu-btn.glass-chip {
  white-space: normal;
  text-align: center;
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .neu-btn {
    transition: none;
  }

  .neu-btn--emote:hover:not(:disabled),
  .neu-btn--dot.tutorial-progress-dot--active,
  .neu-btn:active {
    transform: none;
  }
}