@font-face {
  font-family: Inter;
  src: url('/assets/inter.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --header-height: 148px;
  --paper: #f8f8f5;
  --ink: #050505;
  --line: #dcdcd8;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: #000;
}

* { box-sizing: border-box; }
.filter-defs { position: absolute; pointer-events: none; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height);
  background: #000;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: #000;
  -webkit-font-smoothing: antialiased;
}

button,
input { font: inherit; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  height: var(--header-height);
  background: rgba(248, 248, 245, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.topline {
  height: 64px;
  padding: 0 clamp(18px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.brand,
.handle {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
  letter-spacing: -.055em;
}

.handle { justify-self: end; }

.status {
  max-width: 44vw;
  overflow: hidden;
  font-size: clamp(11px, 1.25vw, 18px);
  font-weight: 800;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meter {
  position: relative;
  height: 84px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  padding-top: 13px;
  overflow: hidden;
}

.meter span,
.kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.meter strong {
  font-size: clamp(35px, 4.8vw, 54px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: 1;
}

.meter i {
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: #e5e5e1;
}

.meter i::after {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: #000;
  content: '';
  transition: width 140ms linear;
}

main { padding-top: var(--header-height); }

.intro {
  min-height: calc(100svh - var(--header-height));
  padding: clamp(32px, 6vw, 90px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  align-items: center;
  gap: clamp(50px, 9vw, 150px);
  background: var(--paper);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.kicker { margin: 0 0 20px; color: #73736f; }

.start-panel h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(64px, 9vw, 146px);
  font-weight: 900;
  letter-spacing: -.085em;
  line-height: .86;
}

.start-form { max-width: 620px; margin-top: clamp(38px, 6vw, 74px); }
.start-form label { display: block; margin-bottom: 9px; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.name-row { display: grid; grid-template-columns: 1fr auto; border-bottom: 2px solid #000; }

.name-row input {
  min-width: 0;
  padding: 16px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #000;
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.05em;
}

.name-row input::placeholder { color: #b5b5b0; }

.name-row button,
#restart {
  border: 0;
  padding: 0 26px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
}

.name-row button:disabled,
#restart:disabled { opacity: .55; cursor: wait; }
.form-error { min-height: 18px; margin: 10px 0 0; color: #a00000; font-size: 12px; font-weight: 700; }

.leaderboard { align-self: center; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.leaderboard-head { height: 54px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.leaderboard-head h2,
.leaderboard-head span { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.leaderboard ol { margin: 0; padding: 0; list-style: none; }
.leaderboard li { min-height: 43px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid #e3e3df; font-size: 13px; }
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard li span { color: #999994; font-variant-numeric: tabular-nums; }
.leaderboard li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard li strong { font-variant-numeric: tabular-nums; }
.leaderboard li.empty { display: flex; color: #888883; }

.feed { display: none; width: 100%; background: #000; }
.playing .feed { display: block; }

.feed-card {
  --image: none;
  position: relative;
  width: 100%;
  height: calc(100svh - var(--header-height));
  min-height: 440px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #0a0a0a;
  scroll-margin-top: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.feed-card::before {
  position: absolute;
  z-index: -2;
  inset: -9%;
  background: var(--image) center / cover no-repeat;
  content: '';
  filter: blur(40px) brightness(.38) saturate(.8);
  transform: scale(1.14);
}

.feed-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at center, transparent 45%, rgba(0,0,0,.28) 100%);
  content: '';
}

.media-frame { width: 100%; height: 100%; display: grid; place-items: center; }

.media-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 20px 48px rgba(0,0,0,.32));
  user-select: none;
  -webkit-user-drag: none;
}

.feed-card[data-kind='meme'] .media-image {
  width: min(100%, 1180px);
  object-fit: contain;
}

.game-over[hidden] { display: none; }

.game-over {
  position: fixed;
  z-index: 100;
  inset: 0;
  padding: clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(380px, 1.1fr);
  align-items: center;
  gap: clamp(30px, 7vw, 110px);
  overflow: auto;
  color: #fff;
  background: #050505;
}

.job-visual {
  position: relative;
  width: min(100%, 620px);
  max-height: calc(100svh - 40px);
  aspect-ratio: 966 / 1250;
  justify-self: end;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px #222, 0 0 70px rgba(255,0,0,.13);
}

.job-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.job-base { filter: grayscale(1) contrast(1.08) brightness(.62); }

.job-glow {
  clip-path: polygon(13% 20%, 88% 20%, 82% 77%, 16% 77%);
  filter: url('#red-ink') drop-shadow(0 0 4px #f00) drop-shadow(0 0 13px #d00);
  opacity: .85;
  animation: red-pulse 1.25s ease-in-out infinite alternate;
}

@keyframes red-pulse { from { opacity: .55; } to { opacity: 1; } }

.game-over-copy { max-width: 700px; }
.game-over-copy .kicker { color: #ff2a2a; }
.game-over-copy h2 { margin: 0; color: #fff; font-size: clamp(72px, 11vw, 180px); font-weight: 900; letter-spacing: -.085em; line-height: .78; }
.job-line { margin: 34px 0 50px; font-size: clamp(22px, 3vw, 42px); font-weight: 800; letter-spacing: -.04em; }
.final-score { padding: 18px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.final-score span { max-width: 45%; overflow: hidden; font-size: 13px; font-weight: 900; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.final-score strong { font-size: clamp(34px, 5vw, 68px); font-variant-numeric: tabular-nums; letter-spacing: -.065em; }
.submit-status { min-height: 18px; margin: 12px 0 32px; color: #999; font-size: 12px; }
#restart { min-height: 58px; padding: 0 32px; color: #000; background: #fff; }
.text-button { margin-left: 22px; border: 0; padding: 12px 0; color: #888; background: transparent; font-size: 11px; font-weight: 900; letter-spacing: .08em; cursor: pointer; }

@media (max-width: 760px) {
  :root { --header-height: 132px; }
  .topline { height: 56px; padding: 0 15px; }
  .brand, .handle { font-size: 17px; }
  .status { max-width: 44vw; font-size: 9px; }
  .meter { height: 76px; flex-direction: column; align-items: center; gap: 1px; padding: 8px 14px 0; }
  .meter span { font-size: 9px; }
  .meter strong { font-size: 39px; }

  .intro {
    min-height: calc(100svh - var(--header-height));
    padding: 45px 22px 34px;
    display: block;
  }

  .start-panel h1 { max-width: 100%; font-size: clamp(46px, 13vw, 60px); }
  .start-form { margin-top: 40px; }
  .name-row input { font-size: 27px; }
  .name-row button { padding: 0 19px; }
  .leaderboard { margin-top: 52px; }

  .feed-card::before { inset: -12%; filter: blur(30px) brightness(.34) saturate(.76); }
  .feed-card::after { background: linear-gradient(0deg, rgba(0,0,0,.2), transparent 20%, transparent 80%, rgba(0,0,0,.2)); }
  .media-image { filter: none; }

  .game-over {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .job-visual { width: min(76vw, 350px); max-height: 51svh; flex: 0 0 auto; justify-self: auto; }
  .game-over-copy { width: 100%; padding-bottom: 30px; }
  .game-over-copy h2 { font-size: clamp(66px, 22vw, 100px); }
  .job-line { margin: 18px 0 24px; font-size: 24px; }
  .final-score strong { font-size: 36px; }
  #restart { width: 100%; }
  .text-button { width: 100%; margin: 10px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .meter i::after { transition: none; }
  .job-glow { animation: none; }
}