/**
 * Button Components
 * All button styles using design system tokens
 * NO !important needed with proper cascade
 */

/* Terminal Button - Primary game button */
.btn-terminal {
  background: var(--nv-surface, rgba(10, 10, 15, 0.85));
  border: 1px solid var(--nv-amber, #ffb300);
  color: var(--nv-amber, #ffb300);
  padding: var(--button-padding-y, 12px) var(--button-padding-x, 24px);
  font-size: var(--font-size-base, 1rem);
  font-family: var(--font-display, "Orbitron", sans-serif);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease;
  letter-spacing: 2px;
  min-width: var(--button-min-width, 120px);
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
}

.btn-terminal:hover:not(:disabled) {
  background: var(--nv-amber, #ffb300);
  color: var(--nv-void, #050505);
  box-shadow: var(--nv-glow-amber, 0 0 15px rgba(255, 179, 0, 0.4));
  animation: nv-glitch-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
    infinite;
}

.btn-terminal:disabled {
  border-color: var(--nv-surface, rgba(255, 255, 255, 0.1));
  color: var(--nv-surface, rgba(255, 255, 255, 0.2));
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-terminal.small {
  padding: calc(var(--button-padding-y, 12px) * 0.5)
    calc(var(--button-padding-x, 24px) * 0.5);
  font-size: var(--font-size-sm, 0.8rem);
}

.btn-terminal.tiny {
  padding: 2px 5px;
  font-size: var(--font-size-xs, 0.7rem);
}

/* Action Buttons */
.action-btn-active {
  width: 100%;
  padding: var(--spacing-md, 15px);
  background: var(--nv-acid, #39ff14);
  border: none;
  color: var(--nv-void, #050505);
  font-family: var(--font-display, "Orbitron", sans-serif);
  font-weight: 900;
  cursor: pointer;
  margin-top: var(--spacing-md, 20px);
  text-transform: uppercase;
  box-shadow: var(--nv-glow-acid, 0 0 15px rgba(57, 255, 20, 0.4));
  animation: pulse-glow 2s infinite;
  transition: all 0.3s ease;
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
}

.action-btn-active:hover {
  box-shadow: 0 0 25px rgba(57, 255, 20, 0.8);
  transform: scale(1.02);
  animation: nv-glitch-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
    infinite;
}

.action-btn-locked {
  width: 100%;
  padding: var(--spacing-md, 15px);
  background: transparent;
  border: 1px dashed var(--nv-surface, rgba(255, 255, 255, 0.1));
  color: var(--nv-surface, rgba(255, 255, 255, 0.2));
  font-family: var(--font-display, "Orbitron", sans-serif);
  font-weight: bold;
  cursor: not-allowed;
  opacity: 0.5;
  margin-top: var(--spacing-md, 20px);
  text-transform: uppercase;
  transition: all 0.3s ease;
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
}

/* Load Button */
.load-btn {
  background: transparent;
  border: 1px solid var(--nv-amber, #ffb300);
  color: var(--nv-amber, #ffb300);
  padding: var(--spacing-sm, 10px);
  font-family: var(--font-display, "Orbitron", sans-serif);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease;
  font-size: var(--font-size-sm, 0.85rem);
  letter-spacing: 1px;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
}

.load-btn:hover {
  background: var(--nv-amber, #ffb300);
  color: var(--nv-void, #050505);
  font-weight: bold;
  box-shadow: var(--nv-glow-amber, 0 0 15px rgba(255, 179, 0, 0.4));
  animation: nv-glitch-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
    infinite;
}

/* Terminal Start Prompt */
.terminal-start-prompt {
  margin-top: var(--spacing-3xl, 80px);
  font-family: var(--font-mono, "Roboto Mono", monospace);
  font-size: var(--font-size-lg, 1.2rem);
  color: var(--terminal-green, var(--signal-emerald));
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: var(--spacing-md, 15px) var(--spacing-xl, 30px);
  border: 1px solid transparent;
  transition: all var(--transition-base, 0.2s);
  animation: blink-text 2s infinite;
  user-select: none;
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.8);
  opacity: 0.9;
}

.terminal-start-prompt:hover {
  background: rgba(57, 255, 20, 0.1);
  border: 1px dashed var(--terminal-green, var(--signal-emerald));
  text-shadow: 0 0 15px rgba(57, 255, 20, 1);
  animation: none;
  opacity: 1;
}

/* Help Icon Button */
.help-icon {
  background: transparent;
  border: 1px solid var(--terminal-green, var(--signal-emerald));
  color: var(--terminal-green, var(--signal-emerald));
  width: var(--icon-size-md, 24px);
  height: var(--icon-size-md, 24px);
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--font-mono, "Roboto Mono", monospace);
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base, 0.2s);
  padding: 0;
  line-height: 1;
}

.help-icon:hover {
  background: var(--terminal-green, var(--signal-emerald));
  color: var(--surface-0, #000);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
  transform: scale(1.1);
}

/* Tooltip Close Button */
.tooltip-close {
  background: transparent;
  border: 1px solid var(--terminal-green, var(--signal-emerald));
  color: var(--terminal-green, var(--signal-emerald));
  padding: var(--spacing-sm, 10px) var(--spacing-md, 20px);
  cursor: pointer;
  font-family: var(--font-mono, "Roboto Mono", monospace);
  font-weight: bold;
  text-transform: uppercase;
  transition: all var(--transition-base, 0.2s);
  width: 100%;
  margin-top: var(--spacing-md, 15px);
}

.tooltip-close:hover {
  background: rgba(57, 255, 20, 0.1);
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
}

/* Animations */
@keyframes blink-text {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes pulse-ready {
  0% {
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.8);
  }
  100% {
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
  }
}