/* Ehen! web player, "v2 Pop": paper, ink, loud colour blocks, stickers. */

:root {
  --paper: #eeede7;
  --ink: #161616;
  --white: #ffffff;
  --bubblegum: #ff9ee6;
  --acid: #f3ee47;
  --tangerine: #ff6b1a;
  --lilac: #c6b5ff;
  --teal: #2f8f7a;
  --olive: #c3cb4e;
  --pip: #4973e8;
  --muted: #5a5a55;
  --track: #d9d8d1;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
}

a {
  color: var(--ink);
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--pip);
  outline-offset: 3px;
}

h1:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Layout ------------------------------------------------------------- */

#app {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  outline: none;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 16px max(24px, env(safe-area-inset-bottom));
  min-width: 0;
}

.screen.center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.screen.center .btn {
  align-self: stretch;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grow {
  flex: 1 1 16px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 12px;
}

.brand {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
}

.brand span {
  color: var(--tangerine);
}

.kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* --- Type ----------------------------------------------------------------- */

.title-xl,
.title-lg,
.title-md,
.prompt {
  margin: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.title-xl {
  font-size: clamp(36px, 11vw, 46px);
  line-height: 0.95;
  letter-spacing: -2px;
}

.title-lg {
  margin-top: 18px;
  font-size: clamp(28px, 8.6vw, 36px);
  line-height: 1;
  letter-spacing: -1.4px;
}

.title-md {
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -1px;
}

.lead {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.fine {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.label {
  font-size: 15px;
  font-weight: 700;
}

.optional {
  font-weight: 500;
  color: var(--muted);
}

/* --- Pieces --------------------------------------------------------------- */

.sticker,
.sticker-win {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 2px 2px 0 var(--ink);
}

.sticker-tangerine {
  background: var(--tangerine);
}

.tilt-r {
  transform: rotate(3deg);
}

.tilt-l {
  transform: rotate(-5deg);
}

.chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-size: 13px;
  font-weight: 600;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 0 24px;
  border-radius: 30px;
  border: 0;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background: var(--ink);
  color: var(--white);
}

.btn-acid {
  background: var(--acid);
  color: var(--ink);
  font-weight: 800;
}

.btn-outline {
  min-height: 52px;
  background: transparent;
  border: 1.5px solid var(--ink);
  font-size: 16px;
}

.btn-small {
  width: auto;
  min-height: 48px;
  padding: 0 18px;
  font-size: 15px;
  flex-shrink: 0;
}

.btn-arrow {
  justify-content: space-between;
  padding: 0 8px 0 26px;
}

.btn-dot {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 22px;
  background: var(--tangerine);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-acid .btn-dot {
  background: var(--ink);
  color: var(--acid);
}

.btn[aria-disabled="true"] {
  opacity: 0.45;
}

.btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.btn-link {
  align-self: center;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: none;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

input[type="text"] {
  width: 100%;
  min-width: 0;
  height: 60px;
  padding: 0 22px;
  border-radius: 30px;
  border: 2px solid var(--ink);
  background: var(--white);
  font-size: 20px;
  font-weight: 700;
}

.hint,
.status {
  margin: 8px 0;
  min-height: 1.4em;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.status:empty {
  margin: 0;
  min-height: 0;
}

/* --- Pip -------------------------------------------------------------------- */

.pip {
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

.pip-lg {
  width: 180px;
  height: auto;
}

.pip-md {
  width: 120px;
  height: auto;
}

.pip-sm {
  width: 92px;
  height: auto;
}

.pip-hero {
  position: absolute;
  right: 6px;
  bottom: -6px;
  width: 128px;
  height: auto;
}

.pip-peek {
  position: absolute;
  right: 16px;
  top: -62px;
  width: 108px;
  height: auto;
  clip-path: inset(0 0 38% 0);
}

.pip .p-frown,
.pip .p-brows-cross,
.pip .p-eyes-shut,
.pip .p-eyes-happy,
.pip .p-grin,
.pip .p-huff {
  display: none;
}

.pip .p-arm-l {
  transform-origin: 116px 173px;
}

.pip .p-arm-r {
  transform-origin: 186px 175px;
}

.pip .p-head {
  transform-origin: 150px 175px;
}

.pip .p-body {
  transform-origin: 150px 250px;
}

.pip .p-cheeks ellipse,
.pip .p-eyes {
  transform-box: fill-box;
  transform-origin: center;
}

/* Thinking: looking up, as if counting. */
.pip[data-mood="think"] .p-pupils {
  transform: translate(3px, -6px);
}

/* Celebrate: arms up, big grin, happy eyes. */
.pip[data-mood="celebrate"] .p-arm-l {
  transform: rotate(55deg);
}

.pip[data-mood="celebrate"] .p-arm-r {
  transform: rotate(-55deg);
}

.pip[data-mood="celebrate"] .p-eyes,
.pip[data-mood="celebrate"] .p-smile {
  display: none;
}

.pip[data-mood="celebrate"] .p-eyes-happy,
.pip[data-mood="celebrate"] .p-grin {
  display: inline;
}

/* Pout: turned away, eyes shut, cheeks puffed. Comic, never sad at you. */
.pip[data-mood="pout"] {
  transform: scaleX(-1);
}

.pip[data-mood="pout"] .p-eyes,
.pip[data-mood="pout"] .p-smile,
.pip[data-mood="pout"] .p-brows {
  display: none;
}

.pip[data-mood="pout"] .p-frown,
.pip[data-mood="pout"] .p-brows-cross,
.pip[data-mood="pout"] .p-eyes-shut,
.pip[data-mood="pout"] .p-huff {
  display: inline;
}

.pip[data-mood="pout"] .p-head {
  transform: rotate(-8deg) translate(-4px, 0);
}

.pip[data-mood="pout"] .p-cheeks ellipse {
  transform: scale(1.6);
}

.pip[data-mood="pout"] .p-arm-l {
  transform: rotate(-38deg);
}

.pip[data-mood="pout"] .p-arm-r {
  transform: rotate(42deg);
}

/* --- Loading -------------------------------------------------------------- */

.dots {
  display: flex;
  gap: 8px;
  margin: 6px 0 0;
}

.dots span {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: var(--ink);
  opacity: 0.25;
}

/* --- Intro ------------------------------------------------------------------ */

.hero {
  position: relative;
  margin-top: 18px;
  min-height: 168px;
  padding: 18px 20px;
  border-radius: 30px;
  background: var(--bubblegum);
  border: 2.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-1.5deg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

.hero-score {
  margin-top: 6px;
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -5px;
  line-height: 0.9;
}

.hero-score small {
  font-size: 30px;
  letter-spacing: 0;
}

.intro form {
  margin-top: 20px;
}

/* --- Questions -------------------------------------------------------------- */

.qtop {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.progress {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 3px;
}

.progress span {
  height: 8px;
  border-radius: 4px;
  background: var(--track);
}

.progress .done {
  background: var(--ink);
}

.progress .now {
  background: var(--tangerine);
}

.qmeta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.prompt {
  margin-top: 14px;
  font-size: clamp(24px, 7.4vw, 30px);
  line-height: 1.08;
  letter-spacing: -1px;
}

.choices,
.typed {
  position: relative;
  margin-top: 74px;
  padding: 18px 14px 14px;
  border-radius: 34px;
  background: var(--acid);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice {
  min-height: 56px;
  padding: 6px 16px 6px 6px;
  border: 0;
  border-radius: 28px;
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.choice .letter {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 22px;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}

.choice-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.choice[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
}

.choice[aria-pressed="true"] .letter {
  background: var(--acid);
  color: var(--ink);
}

.numfield {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 22px;
  height: 64px;
  border-radius: 32px;
  background: var(--white);
  border: 2px solid var(--ink);
}

.numfield.has-prefix {
  padding: 0 22px 0 8px;
}

.numfield input[type="text"] {
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 28px;
  font-weight: 800;
  outline: none;
}

.numfield:focus-within {
  outline: 3px solid var(--pip);
  outline-offset: 3px;
}

.unit {
  height: 48px;
  padding: 0 16px;
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
  white-space: nowrap;
}

.question .btn {
  margin-top: 4px;
}

/* The boss question: ink background, a BOSS sticker. */
.question.boss {
  background: var(--ink);
  color: var(--white);
}

.boss .progress span {
  background: #3a3a36;
}

.boss .progress .done {
  background: var(--acid);
}

.boss .chip {
  color: #d9d8d1;
  border-color: var(--muted);
}

.sticker-boss {
  padding: 6px 14px;
  background: var(--acid);
  color: var(--ink);
  font-size: 22px;
  letter-spacing: 1px;
  box-shadow: 3px 3px 0 var(--tangerine);
}

.boss .choices,
.boss .typed {
  background: var(--tangerine);
  color: var(--ink);
}

.boss .btn-link {
  color: var(--white);
}

.boss :focus-visible,
.boss .numfield:focus-within {
  outline-color: var(--acid);
}

/* --- Result ------------------------------------------------------------------ */

.headrow {
  margin-top: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.duel {
  position: relative;
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.score-card {
  min-height: 188px;
  padding: 16px;
  border-radius: 30px;
  border: 2.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.score-card.you {
  background: var(--acid);
}

.score-card.them {
  background: var(--bubblegum);
  align-items: flex-end;
  text-align: right;
}

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 26px;
  border: 2.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  background: var(--white);
}

.you .avatar {
  background: var(--pip);
  color: var(--white);
  font-size: 15px;
}

.score {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -4px;
  line-height: 0.9;
}

.sticker-win {
  align-self: flex-start;
  background: var(--ink);
  color: var(--acid);
  box-shadow: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}

.them .sticker-win {
  align-self: flex-end;
}

.card-name {
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.vs {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 30px;
  background: var(--ink);
  color: var(--white);
  border: 3px solid var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  transform: rotate(-6deg);
}

.tiles-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: 26px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tile-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tile-who {
  width: 52px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tiles {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 3px;
}

.tiles span {
  height: 20px;
  border-radius: 5px;
}

.tiles .right {
  background: var(--teal);
}

.tiles .wrong {
  background: var(--tangerine);
}

.result .btn-outline {
  margin-top: 12px;
}

.review {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review li {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  background: var(--white);
}

.review-num {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.got .review-num {
  background: var(--teal);
  color: var(--ink);
}

.missed .review-num {
  background: var(--tangerine);
}

.review li > div {
  min-width: 0;
}

.review p {
  margin: 0;
  overflow-wrap: anywhere;
}

.review-q {
  font-size: 15px;
  font-weight: 600;
}

.review-a {
  margin-top: 6px !important;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--ink);
  font-weight: 800;
}

.review-why {
  margin-top: 6px !important;
  font-size: 14px;
  color: #3a3a36;
}

.review-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.result > .btn-primary {
  margin-top: 16px;
}

.share-box {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.share-box input[type="text"] {
  height: 48px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
}

.app-card {
  margin-top: 18px;
  padding: 20px;
  border-radius: 30px;
  background: var(--lilac);
  border: 2.5px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  text-align: left;
  align-self: stretch;
}

.app-card h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.8px;
}

.app-card p {
  margin: 8px 0 14px;
  font-size: 15px;
}

.store-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-store {
  min-height: 52px;
  font-size: 16px;
}

.error .lead {
  max-width: 320px;
  margin-bottom: 8px;
}

/* --- Home page ---------------------------------------------------------------- */

.home h1 {
  margin-top: 8px;
}

/* --- Motion: only when people are happy to see it --------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .enter-fwd {
    animation: enter-fwd 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }

  .enter-none {
    animation: enter-fade 0.28s ease-out both;
  }

  .dots span {
    animation: dot 1.1s ease-in-out infinite;
  }

  .dots span:nth-child(2) {
    animation-delay: 0.15s;
  }

  .dots span:nth-child(3) {
    animation-delay: 0.3s;
  }

  .choice {
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
  }

  .choice:active {
    transform: scale(0.98);
  }

  .score-card.you {
    animation: slide-l 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.1s both;
  }

  .score-card.them {
    animation: slide-r 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.2s both;
  }

  .vs {
    animation: vs-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.55s both;
  }

  .tiles span {
    animation: tile 0.3s ease-out both;
    animation-delay: calc(0.6s + var(--n, 0) * 0.04s);
  }

  .pip .p-eyes {
    animation: blink 4.6s infinite;
  }

  .pip[data-mood="idle"] .p-ear-l,
  .pip[data-mood="think"] .p-ear-l {
    transform-origin: 99px 126px;
    animation: ear-l 2.8s ease-in-out infinite;
  }

  .pip[data-mood="idle"] .p-ear-r,
  .pip[data-mood="think"] .p-ear-r {
    transform-origin: 202px 126px;
    animation: ear-r 2.8s ease-in-out infinite;
  }

  .pip[data-mood="celebrate"] .p-body {
    animation: hop 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) 0.4s 3;
  }

  .pip[data-mood="celebrate"] .p-shadow {
    transform-box: fill-box;
    transform-origin: center;
    animation: shadow 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) 0.4s 3;
  }

  .pip[data-mood="celebrate"] .p-arm-l {
    animation: wave-l 0.45s ease-in-out 0.4s 6 alternate;
  }

  .pip[data-mood="celebrate"] .p-arm-r {
    animation: wave-r 0.45s ease-in-out 0.4s 6 alternate;
  }

  .pip[data-mood="pout"] .p-cheeks ellipse {
    animation: puff 1.4s ease-in-out 0.4s 3;
  }

  .pip[data-mood="pout"] .p-huff {
    animation: huff 1.4s ease-out 0.4s 3 both;
  }

  @keyframes enter-fwd {
    from {
      opacity: 0;
      transform: translateX(28px);
    }
  }

  @keyframes enter-fade {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  @keyframes dot {
    0%,
    100% {
      opacity: 0.25;
      transform: translateY(0);
    }
    50% {
      opacity: 1;
      transform: translateY(-6px);
    }
  }

  @keyframes slide-l {
    from {
      transform: translateX(-40px);
      opacity: 0;
    }
  }

  @keyframes slide-r {
    from {
      transform: translateX(40px);
      opacity: 0;
    }
  }

  @keyframes vs-pop {
    from {
      transform: scale(0.2) rotate(-40deg);
      opacity: 0;
    }
  }

  @keyframes tile {
    from {
      transform: scaleY(0.2);
      opacity: 0;
    }
  }

  @keyframes blink {
    0%,
    93%,
    100% {
      transform: scaleY(1);
    }
    96% {
      transform: scaleY(0.1);
    }
  }

  @keyframes ear-l {
    0%,
    100% {
      transform: rotate(0);
    }
    50% {
      transform: rotate(5deg);
    }
  }

  @keyframes ear-r {
    0%,
    100% {
      transform: rotate(0);
    }
    50% {
      transform: rotate(-5deg);
    }
  }

  @keyframes hop {
    0%,
    100% {
      transform: translateY(0);
    }
    12% {
      transform: translateY(4px) scale(1.04, 0.95);
    }
    45% {
      transform: translateY(-34px);
    }
    75% {
      transform: translateY(0) scale(1.03, 0.97);
    }
  }

  @keyframes wave-l {
    to {
      transform: rotate(80deg);
    }
  }

  @keyframes wave-r {
    to {
      transform: rotate(-80deg);
    }
  }

  @keyframes shadow {
    45% {
      transform: scale(0.7);
      opacity: 0.6;
    }
  }

  @keyframes puff {
    0%,
    100% {
      transform: scale(1.6);
    }
    50% {
      transform: scale(1.9);
    }
  }

  @keyframes huff {
    0% {
      opacity: 0;
      transform: translateX(0);
    }
    30% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateX(-14px);
    }
  }
}