@font-face {
  font-family: Unbounded;
  font-weight: 800;
  src: url(fonts/unbounded-latin-800-normal.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  font-weight: 400;
  src: url(fonts/dm-mono-latin-400-normal.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  font-weight: 500;
  src: url(fonts/dm-mono-latin-500-normal.woff2) format('woff2');
  font-display: swap;
}

:root {
  --ink: #110f2e;
  --indigo: #4f46e5;
  --indigo-deep: #2b2580;
  --lilac: #a5a0ff;
  --paper: #f3f1ff;
  --red: #ff3b5c;
  --green: #22e07a;
  --gold: #ffcf33;
  --display: Unbounded, 'Arial Black', sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: var(--ink); }

body {
  margin: 0;
  min-height: 100dvh;
  background:
    repeating-linear-gradient(-62deg, rgba(243, 241, 255, .035) 0 18px, transparent 18px 44px),
    linear-gradient(170deg, var(--indigo) 0, var(--indigo-deep) 420px, var(--ink) 900px);
  color: var(--paper);
  font: 400 16px/1.5 var(--mono);
  overflow-x: hidden;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.screen {
  width: min(100% - 32px, 440px);
  margin: 0 auto;
  padding: 36px 0 20px;
  text-align: center;
  overflow-wrap: anywhere;
}

.lamp { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.lamp i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(17, 15, 46, .35);
}
.lamp i:last-child { background: var(--green); box-shadow: 0 0 18px var(--green), 0 0 0 4px rgba(17, 15, 46, .35); }

h1 {
  margin: 0;
  font: 800 clamp(48px, 15vw, 68px) / .98 var(--display);
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.lede { margin: 16px auto 22px; max-width: 34ch; color: rgba(243, 241, 255, .86); }

.kicker {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lilac);
}
#from-name { color: var(--paper); }

.target {
  margin: 4px 0 0;
  font: 800 clamp(72px, 26vw, 112px) / 1 var(--display);
  color: var(--gold);
  letter-spacing: -.03em;
}
.target span { margin-left: .2em; font: 500 .26em var(--mono); color: var(--paper); letter-spacing: 0; }

.card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}
.card label { font-size: 14px; font-weight: 500; }
.card input {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  font-size: 19px;
}

.primary, .secondary {
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  font: 800 19px/1.15 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.primary { background: var(--green); color: var(--ink); box-shadow: 0 5px 0 #0f8a48; }
.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #0f8a48; }
.primary:disabled { background: #cfcbe8; color: #6c6894; box-shadow: none; cursor: not-allowed; }
.secondary { background: transparent; color: var(--paper); border: 2px solid var(--lilac); }

.link {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  border: 0;
  background: none;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#play {
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#stage { display: block; width: 100%; height: 100%; }
#mute {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 124px);
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 15, 46, .5);
  color: var(--paper);
  font-size: 20px;
  line-height: 1;
}
#mute[aria-pressed='true'] { text-decoration: line-through; opacity: .6; }

#result { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-top: 28px; }
#result h2 {
  margin: 14px 0 6px;
  font: 800 clamp(30px, 9.4vw, 44px) / 1.08 var(--display);
  text-transform: uppercase;
}
#result[data-outcome='lost'] h2, #result[data-outcome='jumped'] h2 { color: var(--red); }
#result[data-outcome='lost'] .target, #result[data-outcome='jumped'] .target { color: var(--paper); }
#result[data-outcome='beat'] h2 { color: var(--gold); }
#result[data-outcome='asleep'] h2 { color: var(--lilac); }
#result[data-outcome='asleep'] .target b { display: inline-block; animation: snooze 2.4s ease-in-out infinite; }
@keyframes snooze {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  #result[data-outcome='asleep'] .target b { animation: none; }
}
#result .lede { margin-bottom: 18px; }
.actions { display: grid; gap: 12px; }
#copy-box { display: grid; gap: 6px; margin: 0; text-align: left; font-size: 14px; }
#copy-box input { width: 100%; height: 44px; padding: 0 10px; border: 0; border-radius: 10px; color: var(--ink); }
.watermark { margin: 18px 0 0; font-weight: 500; letter-spacing: .08em; color: var(--lilac); }

#info {
  width: min(100% - 32px, 440px);
  margin: 8px auto 0;
  padding: 0 0 40px;
}
#info h2 { margin: 26px 0 6px; font: 800 18px/1.2 var(--display); text-transform: uppercase; }
#info p { margin: 0 0 12px; color: rgba(243, 241, 255, .86); }
#info nav { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; }
#info nav span { margin-left: auto; color: var(--lilac); }

.page { width: min(100% - 32px, 620px); margin: 0 auto; padding: 36px 0 40px; }
.page h1 { font-size: clamp(36px, 11vw, 52px); }
.page h2 { margin: 28px 0 4px; font: 800 19px/1.25 var(--display); text-transform: uppercase; color: var(--gold); }
.page p { margin: 0 0 12px; }
.page nav { margin-top: 28px; }