:root {
  --cream: #FFF6E7;
  --red: #a91920;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #100607;
}

body {
  font-family: 'Balthazar', serif;
  color: var(--cream);
}

.home {
  position: relative;
  width: 100%;
  max-width: 390px;
  min-height: 844px;
  margin: 0 auto;
  background: #100607 url('./assets/hell-deal-bg.webp')
    center top / 100% auto no-repeat;
}

.home-title {
  font-family: 'Metal Mania', cursive;
}

.home input,
.home textarea,
.home button {
  font: inherit;
}

.home input,
.home textarea {
  color: var(--cream);
  background: transparent;
  border: none;
  outline: none;
}

.home textarea {
  resize: none;
}

.home button {
  cursor: pointer;
}


.home input::placeholder,
.home textarea::placeholder {
  color: #9B9B9B;
  opacity: 1;
}

/* HOME form frames */
.home .name-field,
.home .wish-field {
  box-sizing: border-box;
  overflow: hidden;
}

/* NAME */
.home .name-field input {
  top: 21px !important;
  width: calc(100% - 85px) !important;
  height: 18px !important;
  line-height: 18px !important;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

/* WISH */
.home .wish-field textarea {
  top: 21px !important;
  width: calc(100% - 92px) !important;
  height: 48px !important;
  line-height: 18px !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
  overflow-x: hidden;
  overflow-y: auto;
  resize: none;
}

/* Final visual text alignment */
.home .deal-subtitle {
  transform: translateY(4px);
}

.home .name-field input {
  transform: translateY(-4px);
}

.home .wish-field textarea {
  transform: translateY(-4px);
}

.home .sell-button span {
  transform: translateY(2px);
}