body {
  font-family: Arial, "Trebuchet MS", Verdana, sans-serif;
  margin: 0px;
  background-color: black;
  color: white;
}

.textbox {
  font-size: 15px;
  padding-top: 89px;
}

.content,
.legend-content {
  line-height: 28px;
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%;
}

.content {
  padding-top: 89px;
}

.header-img,
.header-img-bottom-border {
  max-width: 100%;
  border-bottom: 21px;
  border-style: solid;
}

.header-img {
  border-top: 21px;
  border-color: #09256e;
}

.header-img-bottom-border {
  border-color: #001e2e;
}

.text-center-small {
  font-size: 12px;
  text-align: center;
}

.logo {
  width: 10%;
  max-width: 200px;
  padding-top: 55px;
  padding-bottom: 34px;
}

.art {
  max-width: 50%;
  min-width: 300px;
}

.player {
  padding-top: 12px;
  padding-bottom: 55px;
}

.menu-link {
  padding-left: 8px;
  padding-right: 8px;
}

.menuContainer {
  padding-top: 34px;
  background: linear-gradient(#8918e4, #18066a);
  padding-bottom: 34px;
}

.link-logo {
  max-width: 100px;
  max-height: 30px;
  margin-right: 21px;
}

.special-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: monospace;
  font-size: 14px;
  background: linear-gradient(#c00093, #8918e4);
  padding: 15px;
  width: 90%; /* fluid */
  max-width: 500px; /* cap on desktop */
  margin: 12px auto 0; /* auto centers it */
  border-radius: 4px;
  box-sizing: border-box;
}

a,
.share-label {
  color: #ff0095;
}

.legend-background {
  background: linear-gradient(#0a071c, #3050b7);
  min-height: 100vh;
  padding: 64px 0 120px;
  box-sizing: border-box;
}

.form-card {
  width: min(90vw, 420px);
  margin: 0 auto 120px;
  background: rgba(255, 255, 255, 0.08);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  display: grid;
  gap: 16px;
}

.form-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.form-field {
  display: grid;
  gap: 8px;
  text-align: left;
  font-weight: bold;
}

.form-input,
.form-file-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
  color: white;
}

.form-input:focus,
.form-file-input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
}

.form-file-input::file-selector-button {
  background: #8918e4;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.form-file-input::file-selector-button:hover {
  background: #c00093;
}

.form-submit-button {
  width: 100%;
  font-weight: bold;
  font-size: 1rem;
  padding: 12px;
}

.form-submit-button:disabled {
  background: #777;
  cursor: not-allowed;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.85);
}

.form-status {
  text-align: center;
  font-weight: bold;
  padding: 10px;
  border-radius: 6px;
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status--working {
  background: rgba(48, 80, 183, 0.2);
  color: #9fc0ff;
}

.form-status--success {
  background: rgba(137, 24, 228, 0.2);
  color: #dcb8ff;
}

.form-status--error {
  background: rgba(192, 0, 147, 0.2);
  color: #ff78cf;
}

.status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  text-align: center;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}