/* UNHINGED – design language borrowed from Are.na:
   white, Helvetica/Arial, greys, blocks with thin borders, captions underneath.
   Colours taken 1:1 from the Are.na palette. Red marks disagreement. */

:root {
  --bg: #fff;
  --bg-soft: #f7f7f7;
  --line: #ededed;
  --line-strong: #dedede;
  --muted: #999;
  --slate: #696969;
  --ink: #000;
  --red-1: #faf4f3;
  --red-3: #b93d3d;
  --blue-1: #ebecf7;
  --blue-2: #3d46c2;
  --brand: #00075f;
  --on-brand: #fff;

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-xs: 0.78125rem;
  --fs-s: 0.9rem;
  --fs-m: 1rem;
  --fs-l: 1.2rem;
  --fs-xl: 1.5rem;
  --fs-3xl: 2.5rem;
  --r: 3px;
  --gutter: 20px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --bg-soft: #1a1a1a;
    --line: #333;
    --line-strong: #4f4f4f;
    --muted: #7a7a7a;
    --slate: #b2b2b2;
    --ink: #fff;
    --red-1: #1a0404;
    --red-3: #eb6864;
    --blue-1: #191d52;
    --blue-2: #5e6dee;
    --brand: #e2dfe9;
    --on-brand: #000;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--blue-1); }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }

/* ---------- Frame ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  max-width: 1240px;
  min-height: 64px;
  margin: 0 auto;
  padding: 12px var(--gutter);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-s);
  font-weight: bold;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.mark { display: block; width: 26px; height: 26px; }

.avatar {
  display: block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ink);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

main {
  padding: 0 var(--gutter);
  animation: enter 0.25s ease-out both;
}
main.narrow { max-width: calc(680px + 2 * var(--gutter)); margin: 0 auto; }
main.wide { max-width: 1240px; margin: 0 auto; }

.foot {
  width: calc(100% - 2 * var(--gutter));
  max-width: 1200px;
  margin: 100px auto 0;
  padding: 20px 0 40px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
}

@keyframes enter {
  from { opacity: 0; transform: translateY(6px); }
}

hr { margin: 80px 0; border: 0; border-top: 1px solid var(--line); }

.error { margin: 15px 0 0; font-size: var(--fs-s); color: var(--red-3); }
.error:empty { display: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 15px;
  border: 0;
  border-radius: var(--r);
  font-size: var(--fs-s);
  font-weight: bold;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, opacity 0.15s;
}
.btn-l { padding: 11px 20px; font-size: var(--fs-m); }
.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-brand:hover { opacity: 0.88; }
.btn-soft { background: var(--bg-soft); color: var(--ink); }
.btn-soft:hover { background: var(--line); }
.btn[disabled] { opacity: 0.35; cursor: default; }

.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--slate);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.link:hover { color: var(--ink); text-decoration-color: currentColor; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 25px; }

/* ---------- Start ---------- */

.hero { padding-top: 22vh; }
.hero .question { margin: 0; }

/* ---------- Signup ---------- */

.flow { padding-top: 15px; }

.flow-top { font-size: var(--fs-l); line-height: 1; }
.back { color: var(--slate); text-decoration: none; }
.back:hover { color: var(--ink); }
button.back { padding: 0; border: 0; background: none; font: inherit; line-height: 1; cursor: pointer; }
.input.code { font-size: var(--fs-xl); letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.input.code::placeholder { letter-spacing: normal; }
.note { margin: 10px 0 0; font-size: var(--fs-s); color: var(--muted); }

.bar { height: 2px; margin-top: 15px; background: var(--line); }
.bar span { display: block; height: 100%; background: var(--ink); transition: width 0.3s; }

.question {
  margin: 45px 0 0;
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.fields { display: grid; gap: 15px; margin-top: 45px; }
.field-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 15px; }

.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  font-size: var(--fs-xl);
}
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--blue-2); box-shadow: 0 0 0 3px var(--blue-1); }
.input.is-invalid { border-color: var(--red-3); }
.input.is-invalid:focus { box-shadow: 0 0 0 3px var(--red-1); }
.input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.input::-webkit-inner-spin-button,
.input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  max-width: 560px;
  margin-top: 35px;
}

.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--bg);
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  text-align: center;
  hyphens: auto;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}
.choice:hover { border-color: var(--ink); }
.choice.is-selected { border-color: var(--ink); background: var(--ink); color: var(--bg); }

.textblock {
  display: block;
  width: 100%;
  min-height: 180px;
  margin-top: 35px;
  padding: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--bg);
  font-size: var(--fs-l);
  line-height: 1.45;
  resize: vertical;
}
.textblock:focus { outline: none; border-color: var(--ink); }

.drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: min(100%, 320px);
  aspect-ratio: 1;
  margin-top: 45px;
  overflow: hidden;
  border: 1px dashed var(--line-strong);
  color: var(--slate);
  font-size: var(--fs-s);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.drop:hover,
.drop.is-over { border-color: var(--ink); color: var(--ink); }
.drop .plus { font-size: 2.25rem; font-weight: 300; line-height: 1; }
.drop.has-photo { border-style: solid; border-color: transparent; }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* ---------- Match ---------- */

.center { text-align: center; }
.slot {
  width: min(70vw, 300px);
  aspect-ratio: 1;
  margin: 65px auto 0;
  overflow: hidden;
  background: var(--bg-soft);
}
.slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.slot img:not([src]) { visibility: hidden; }
.slot-name { margin: 15px 0 0; font-size: var(--fs-l); }

/* ---------- Blocks (the Are.na grid) ---------- */

.blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 35px 25px;
}

.block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  color: inherit;
  text-decoration: none;
}

.tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}
.tile.photo { border-color: transparent; background: var(--bg-soft); }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

.tile.text { padding: 15px; font-size: var(--fs-s); line-height: 1.45; }
.tile.text p { margin: 0; }
.tile.text::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45px;
  background: linear-gradient(transparent, var(--bg));
}

.tile.word {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: var(--fs-xl);
  text-align: center;
  hyphens: auto;
}

.caption {
  padding: 0 5px;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--slate);
  text-align: center;
  overflow-wrap: anywhere;
}
.caption strong { color: var(--ink); }
.rank { color: var(--muted); }

a.block .tile { transition: opacity 0.15s; }
a.block:hover .tile { opacity: 0.85; }
a.block.is-current .tile { outline: 2px solid var(--ink); outline-offset: 3px; }

/* One dot per debate question, red = you disagree */
.dots { display: flex; gap: 5px; margin-top: 20px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.dots i.on { background: var(--red-3); }
.dots.small { justify-content: center; gap: 3px; margin-top: -4px; }
.dots.small i { width: 6px; height: 6px; }

/* ---------- Results ---------- */

.duel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px)) minmax(0, 1fr);
  gap: 25px;
  align-items: start;
  margin-top: 25px;
}
.duel-info { padding-left: 20px; }
.name { margin: 0; font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -0.01em; }
.city { margin: 6px 0 0; font-size: var(--fs-l); color: var(--slate); }

.section-block { margin-top: 80px; }

.cmp { border-top: 1px solid var(--line); }
.cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 150px;
  gap: 15px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.cmp-q::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 10px 2px 0;
  border-radius: 50%;
  background: var(--red-3);
}
.cmp-a { display: flex; gap: 6px; font-size: var(--fs-s); }
.cmp-a span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.cmp-row.is-same { color: var(--muted); }
.cmp-row.is-same .cmp-q::before { background: var(--line-strong); }
.cmp-row.is-same b { font-weight: normal; }

/* ---------- Phone ---------- */

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .hero { padding-top: 16vh; }
  hr { margin: 65px 0; }
  .blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 15px; }
  .duel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .duel-info { grid-column: 1 / -1; padding-left: 0; }
  .name { font-size: 2rem; }
  .section-block { margin-top: 65px; }
  .cmp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 15px; }
  .cmp-q { grid-column: 1 / -1; }
  .foot { margin-top: 65px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}