:root {
  --bg: #ff5757;
  --white: #ffffff;
  --yellow: #ffc01f;
  --green: #7ed957;
  --purple: #b34d92;
  --red: #ff5757;
  --shadow: #b33d3d;
  --ink: #151515;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Arial", sans-serif;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app {
  width: 100%;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  background: var(--bg);
}

.screen {
  width: 100%;
  max-width: 1080px;
  min-height: 100svh;
  padding: 38px 42px max(42px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* The supplied reference is a 1080 x 1920 mobile composition.
   The sizes below scale from that reference so it keeps the same visual
   proportions on smaller phones. */
.brand {
  margin: 0;
  font-size: clamp(40px, 6.55vw, 76px);
  line-height: .86;
  letter-spacing: -3px;
  font-weight: 1000;
  text-shadow: 0 7px 0 var(--shadow);
}

.avatar {
  width: clamp(135px, 31.5vw, 340px);
  height: clamp(135px, 31.5vw, 340px);
  object-fit: contain;
  margin-top: clamp(38px, 4.1vw, 44px);
  flex: 0 0 auto;
}

.message {
  width: 100%;
  text-align: center;
  font-size: clamp(29px, 6.35vw, 69px);
  line-height: 1.08;
  letter-spacing: -1.8px;
  font-weight: 1000;
  text-shadow: 0 7px 0 var(--shadow);
}

/* Reference score screen */
.score-screen .avatar { margin-top: 40px; }
.score-screen .message.score-title { margin-top: 43px; }
.score-screen .score {
  margin-top: 10px;
  font-size: clamp(60px, 8.15vw, 88px);
  line-height: .92;
  letter-spacing: -2px;
}
.score-screen .risk-copy {
  margin-top: 22px;
  font-size: clamp(28px, 5.15vw, 56px);
}
.score-screen .bottom-block {
  width: 100%;
  margin-top: auto;
  padding-top: 70px;
  text-align: center;
}
.score-screen .question {
  font-size: clamp(31px, 5.9vw, 64px);
  line-height: 1.05;
  letter-spacing: -2px;
  text-shadow: 0 7px 0 var(--shadow);
  margin-bottom: 62px;
}

.buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(22px, 7vw, 78px);
}
.buttons.single { flex-direction: column; gap: 20px; }

.choice {
  border: 0;
  border-radius: 999px;
  min-height: clamp(58px, 7.2vw, 78px);
  padding: 12px clamp(25px, 3.1vw, 34px);
  color: #fff;
  background: var(--yellow);
  font-size: clamp(24px, 4.55vw, 49px);
  line-height: .98;
  font-weight: 1000;
  letter-spacing: -1.2px;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  transition: transform .08s ease, filter .08s ease;
}
.choice:active { transform: translateY(4px); filter: brightness(.96); }
.choice:focus-visible { outline: 4px solid #fff; outline-offset: 5px; }
.choice.yellow { background: var(--yellow); }
.choice.green { background: var(--green); }
.choice.teal { background: var(--green); }
.choice.purple { background: var(--purple); }
.choice.red { background: var(--red); }

/* Initial input screen: intentionally resembles the second supplied image,
   where each value is shown as a short blank line rather than a white form card. */
.input-screen .avatar { margin-top: 40px; }
.input-screen .input-title {
  margin-top: 43px;
  font-size: clamp(31px, 5.55vw, 60px);
}

.form {
  width: 100%;
  margin-top: clamp(86px, 9.6vw, 104px);
  display: grid;
  gap: clamp(42px, 5vw, 54px);
}

.reference-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 20px;
}
.reference-label {
  font-size: clamp(27px, 4.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -1.4px;
  text-align: left;
  text-shadow: 0 6px 0 var(--shadow);
}
.reference-input {
  width: clamp(54px, 8vw, 86px);
  border: 0;
  border-bottom: clamp(4px, .55vw, 6px) solid #fff;
  border-radius: 0;
  padding: 0 0 1px;
  background: transparent;
  color: #fff;
  outline: none;
  font-size: clamp(28px, 5vw, 54px);
  line-height: 1;
  text-align: center;
  font-weight: 1000;
}
.reference-input::placeholder { color: #fff; opacity: 1; }
.reference-input:focus { border-bottom-color: #fff; }

.input-submit {
  justify-self: center;
  margin-top: 2px;
}

/* Other conversation screens use the same generous vertical composition. */
.conversation-screen .avatar { margin-top: 40px; }
.conversation-screen .conversation-copy { margin-top: 43px; }
.conversation-screen .bottom-block {
  width: 100%;
  margin-top: auto;
  padding-top: 80px;
}

@media (max-width: 560px) {
  .screen { padding-left: 18px; padding-right: 18px; }
  .brand { letter-spacing: -2px; }
  .message { letter-spacing: -1px; }
  .score-screen .question { letter-spacing: -1px; }
  .buttons { gap: 16px 22px; }
  .choice { padding-left: 22px; padding-right: 22px; }
  .reference-field { column-gap: 10px; }
  .reference-label { letter-spacing: -.7px; }
}

@media (max-height: 760px) {
  .screen { padding-top: 22px; }
  .avatar { margin-top: 24px; }
  .score-screen .message.score-title,
  .input-screen .input-title,
  .conversation-screen .conversation-copy { margin-top: 25px; }
  .form { margin-top: 42px; gap: 26px; }
  .score-screen .bottom-block { padding-top: 32px; }
  .score-screen .question { margin-bottom: 28px; }
}

.conversation-screen .bottom-block > .buttons { width: 100%; }
.conversation-screen .bottom-block > .buttons + .buttons { margin-top: 24px; }
.conversation-screen .choice { max-width: 100%; }

@media (max-width: 420px) {
  .choice { font-size: clamp(21px, 5.9vw, 27px); }
  .reference-label { font-size: clamp(23px, 6.1vw, 27px); }
}