/* Menu Buttons Container */
.selection-menu-buttons {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 28rem;
  animation: fade-in-up 0.5s ease-out forwards;
}

/* Selection Button */
.selection-button {
  position: relative;
  padding: 1rem 1.5rem;
  border: 1px solid var(--matrix-color);
  transition: all 0.3s ease;
  overflow: hidden;
  background-color: transparent;
  cursor: pointer;
  color: var(--matrix-color);
}

.selection-button:hover {
  background-color: var(--matrix-color); /* hover:bg-matrix-green */
  color: black; /* hover:text-black */
}

/* Button Background Hover Effect */
.selection-button .button-bg-hover {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 255, 65, 0.2);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.selection-button:hover .button-bg-hover {
  transform: translateY(0);
}

/* Button Content */
.selection-button .button-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Button Text */
.selection-button .button-text {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* Button Subtext */
.selection-button .button-subtext {
  font-size: 0.75rem;
  line-height: 1rem;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.selection-button:hover .button-subtext {
  opacity: 1;
}

/* Selection Quote Box */
.selection-quote-box {
  margin-top: 2rem;
  text-align: center;
  border-top: 1px solid var(--matrix-dim);
  padding-top: 1rem;
}

.selection-quote {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--matrix-dim);
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
}

/* Animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.back-button {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--matrix-color);
  transition: color 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.back-button:hover {
  color: #fff; /* hover:text-white */
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.control-label {
  color: var(--matrix-dim);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* WPM Slider (range input styling) */
.wpm-slider {
  -webkit-appearance: none;
  appearance: none;
  background: var(--matrix-dim);
  height: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

/* Thumb styling */
.wpm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--matrix-green);
  cursor: pointer;
}

.wpm-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--matrix-green);
  cursor: pointer;
}

.wpm-value {
  color: var(--matrix-light);
  width: 2rem;
}

.difficulty-button {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  border: 1px solid;
  background: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.difficulty-button.active {
  background-color: var(--matrix-green);
  color: black;
  border-color: var(--matrix-green);
}

.difficulty-button:not(.active) {
  color: var(--matrix-green);
  border-color: var(--matrix-dim);
}

.receiver-main-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.play-button {
  position: relative;
  overflow: hidden;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border: 2px solid var(--matrix-green);
  color: var(--matrix-green);
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  background: none;
  cursor: pointer;
}

.play-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.play-button:not(:disabled):hover {
  background-color: var(--matrix-green);
  color: var(--matrix-color);
  box-shadow: 0 0 20px #00FF41;
}

/* Inner pulse animation for play button */
.play-button .absolute {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 255, 65, 0.2);
  animation: play-pulse 1s infinite;
}

@keyframes play-pulse {
  0% { transform: scale(0); opacity: 0.5; }
  50% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

.status-display {
  height: 2rem;
  text-align: center;
  font-family: "Share Tech Mono", monospace;
  box-sizing: border-box;
  color: var(--matrix-dim);
}

.input-area-wrapper {
  width: 100%;
  position: relative;
  align-self: stretch; /* Ensure it stretches to fill the flex container width */
}

.decoder-input {
  width: 100%;
  background-color: black;
  border: 1px solid var(--matrix-dim);
  padding: 1rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--matrix-light);
  outline: none;
  font-family: "Share Tech Mono", monospace;
  box-sizing: border-box;
}

.decoder-input::placeholder {
  color: rgba(0, 59, 0, 0.5);
}

.decoder-input:focus {
  border-color: var(--matrix-green);
  box-shadow: 0 0 10px #00FF41;
}

/* Styling for the sender's live feed output */
.decoder-input.live-feed-output {
  height: 6rem; /* Adjust height to allow multiple lines */
  resize: vertical; /* Allow vertical resizing only */
  text-align: left; /* Align text to the left for better readability in multiline */
}

.decoder-input.live-feed-output:focus {
  border-color: var(--matrix-dim); /* Keep border color normal on focus */
  box-shadow: none; /* Remove glow on focus for live feed */
}

.input-result-icon {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding-right: 0.75rem;
  pointer-events: none;
}

.action-buttons {
  display: flex;
  gap: 1rem;
}

.action-button {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border: 1px solid;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-button.primary {
  border-color: var(--matrix-green);
  color: var(--matrix-green);
}

.action-button.primary:hover {
  background-color: var(--matrix-green);
  color: var(--matrix-color);
}

.action-button.secondary {
  border-color: var(--matrix-dim);
  color: var(--matrix-dim);
}

.action-button.secondary:hover {
  color: var(--matrix-light);
  border-color: var(--matrix-light);
}

.action-button .icon-small {
  width: 1rem;
  height: 1rem;
}

.result-display {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid;
  width: 100%;
  text-align: center;
  animation: pulse 1s infinite;
}

.result-display.correct {
  border-color: var(--matrix-green);
  color: var(--matrix-green);
}

.result-display.incorrect {
  border-color: #ef4444;
  color: #ef4444;
}

.result-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--matrix-dim);
  margin-bottom: 0.25rem;
}

.result-text {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: bold;
  letter-spacing: 0.025em;
}

.result-morse {
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 0.5rem;
  font-family: "Share Tech Mono", monospace;
  box-sizing: border-box;
  opacity: 0.7;
}


/* Playback Controls */


/* Specific styling for the live feed label that was inside output-display-wrapper, if it's still needed in a different context */
/*
.live-feed-label {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--matrix-dim);
  text-transform: uppercase;
}
*/


.current-symbol-display-wrapper {
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.buffer-label {
  color: var(--matrix-dim);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.current-symbol {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  height: 2rem;
  min-width: 3.125rem;
  text-align: center;
}

.tap-button-wrapper {
  display: flex;
  justify-content: center;
}

.tap-button {
  width: 100%; /* Take full width of parent */
  max-width: 12rem; /* Max size is still 12rem */
  min-width: 8rem; /* Ensure a minimum size */
  aspect-ratio: 1 / 1; /* Keep it square */
  border-radius: 9999px;
  border: 4px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}

.tap-button.is-pressing {
  background-color: var(--matrix-green);
  border-color: white;
  box-shadow: 0 0 50px var(--matrix-green);
  transform: scale(0.95);
}

.tap-button:not(.is-pressing) {
  background-color: black;
  border-color: var(--matrix-green);
  box-shadow: 0 0 20px var(--matrix-dark);
}

.tap-button:not(.is-pressing):hover {
  box-shadow: 0 0 30px var(--matrix-dim);
}

.tap-button-text {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  pointer-events: none;
}

.tap-button.is-pressing .tap-button-text {
  color: black;
}

.tap-button:not(.is-pressing) .tap-button-text {
  color: var(--matrix-green);
}

.tap-hint-text {
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--matrix-dim);
  margin-top: 1rem;
}

.clear-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}