@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
  Color works in three shares. Neutrals carry about 60% of the page, because
  reading happens as dark text on a light surface. Royal violet carries about 30%.
  Gold is the 10% accent, kept for the crown and the one thing to press, and it
  sits opposite violet on the color wheel. The flag colors are decoration only and
  never hold body text. tests/colors.test.js checks every pair below.
*/
:root {
  --surface: #ffffff;
  --line: #e3e0e9;
  --field-line: #7d7689;
  --ink: #1b1326;
  --ink-soft: #595266;
  --tint: #f4f0fa;
  --link: #5a1fb0;
  --error: #b3261e;

  --royal: #2a0a52;
  --on-royal: #ffffff;
  --on-royal-soft: #d8cfe8;

  --gold: #ffc81e;
  --gold-hover: #ffd95e;
  --gold-deep: #e8a200;

  --flag-red: #e40303;
  --flag-orange: #ff8c00;
  --flag-yellow: #ffed00;
  --flag-green: #008026;
  --flag-blue: #004cff;
  --flag-violet: #750787;

  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --radius: 8px;
  --gutter: clamp(16px, 4vw, 40px);
  --column: 760px;
  --page: 1120px;
  --bar-height: 48px;
}

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

html {
  color-scheme: light;
  background: var(--surface);
  scroll-padding-bottom: calc(var(--bar-height) + 16px);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body {
  margin: 0;
  padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom));
  background: var(--surface);
  color: var(--ink);
  font-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
}

p {
  text-wrap: pretty;
}

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

.throne :focus-visible,
.page-head :focus-visible,
.bar :focus-visible {
  outline-color: var(--on-royal);
}

.take :focus-visible {
  outline-color: var(--royal);
}

[hidden] {
  display: none !important;
}

/* For screen readers only. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 30;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* Wordmark, the same on every page. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  display: block;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  padding-block: 12px;
  text-align: left;
}

.jump {
  display: flex;
  gap: 28px;
}

.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-royal-soft);
  font-weight: 600;
  text-decoration: none;
}

.jump a:hover {
  color: var(--on-royal);
  text-decoration: underline;
}

/* First screen: the champion, then the way to replace them. */
.throne {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--gutter) 48px;
  background: var(--royal);
  color: var(--on-royal);
  text-align: center;
}

.throne.full {
  justify-content: center;
  min-height: calc(100svh - var(--bar-height) - 36px);
}

.throne.full .masthead {
  margin-bottom: auto;
}

.throne.full .after {
  margin-bottom: auto;
}

.crown {
  display: block;
  width: clamp(88px, 13vh, 132px);
  height: auto;
  margin-top: clamp(0px, 1.5vh, 16px);
  transform-origin: 50% 85%;
  animation: hover 4s ease-in-out infinite;
}

@keyframes hover {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(-3deg); }
}

/* Played once when a new name takes the crown while the page is open. */
.crown.landed {
  animation: land 700ms ease-out, hover 4s ease-in-out 700ms infinite;
}

@keyframes land {
  0% { transform: translateY(-56px) rotate(-16deg); }
  55% { transform: translateY(6px) rotate(-3deg); }
  100% { transform: translateY(0) rotate(-6deg); }
}

h1 {
  width: 100%;
  max-width: 1200px;
  margin: 0;
  font-weight: inherit;
}

/* A fixed height, so the form below stays put while someone types a name. */
.name-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(152px, 21vh, 200px);
}

.top-name {
  display: block;
  max-width: 100%;
  font-size: 96px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.title-line {
  display: block;
  margin-top: 8px;
  font-size: clamp(var(--text-lg), 2.4vw, 1.75rem);
  line-height: 1.25;
}

.reign {
  min-height: 27px;
  margin: 8px 0 0;
  color: var(--on-royal-soft);
  font-size: var(--text-md);
  text-wrap: balance;
}

.reign img {
  display: inline-block;
  margin-right: 8px;
  vertical-align: -3px;
}

.reign + .reign {
  min-height: 0;
  margin-top: 2px;
}

.reign:empty {
  display: none;
}

/* Good news, said once: on a crown's own page right after it's paid for. */
.news {
  margin: 8px 0;
  padding: 6px 14px;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

.news:empty,
.toast:empty {
  display: none;
}

/* The same news on the home page floats, so it never moves a form someone is filling in. */
.toast {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  z-index: 15;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  transform: translateX(-50%);
}

/* The one task on the page gets its own white surface. */
.take {
  scroll-margin-top: 24px;
  width: min(100%, var(--column));
  margin-top: 32px;
  padding: 24px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.take h2 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
}

.take-intro {
  max-width: 34rem;
  margin: 4px 0 16px;
  color: var(--ink-soft);
}

.fields {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "name country pay"
    "seat seat seat";
  gap: 12px;
  align-items: end;
}

.field.name { grid-area: name; }
.field.country { grid-area: country; }
.pay { grid-area: pay; }

/* The one extra on offer. The whole row is the checkbox's label. */
.seat {
  grid-area: seat;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  cursor: pointer;
}

.seat strong {
  color: var(--ink);
}

.seat:hover {
  border-color: var(--field-line);
}

.seat:has(:checked) {
  border-color: var(--royal);
  background: var(--tint);
  color: var(--ink);
}

.seat input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--royal);
  cursor: pointer;
}

.seat input[aria-invalid='true'] {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

.field label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.field input,
.field select {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-md);
}

.field select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%231b1326'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
}

.field [aria-invalid='true'] {
  border-color: var(--error);
  outline: 1px solid var(--error);
}

.pay,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13.5rem;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.pay:hover,
.button:hover {
  background: var(--gold-hover);
}

.pay:disabled {
  background: var(--line);
  cursor: progress;
}

.form-error {
  margin: 12px 0 0;
  color: var(--error);
  font-weight: 600;
}

.form-error:empty {
  display: none;
}

.fine {
  margin: 12px 0 0;
  color: var(--ink-soft);
}

.fine a {
  color: var(--link);
}

.after {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.button.quiet {
  border: 1px solid var(--on-royal);
  background: transparent;
  color: var(--on-royal);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.button.quiet:hover {
  background: var(--on-royal);
  color: var(--royal);
}

/* A second-rank button on the white part of the page. */
.button.outline {
  border: 1px solid var(--field-line);
  background: var(--surface);
  color: var(--ink);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.button.outline:hover {
  border-color: var(--ink);
  background: var(--tint);
}

.aside {
  max-width: 34rem;
  margin: 24px 0 0;
  color: var(--on-royal-soft);
  font-size: var(--text-md);
  text-wrap: balance;
}

.aside a {
  color: var(--on-royal);
  font-weight: 600;
}

.aside a:hover {
  color: var(--gold);
}

/* Thrown once when a buyer lands on their new crown. */
.confetti {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.confetti i {
  position: absolute;
  top: -24px;
  width: 10px;
  height: 18px;
  animation: fall 3s linear forwards;
}

.confetti .red { background: var(--flag-red); }
.confetti .orange { background: var(--flag-orange); }
.confetti .yellow { background: var(--flag-yellow); }
.confetti .green { background: var(--flag-green); }
.confetti .blue { background: var(--flag-blue); }
.confetti .violet { background: var(--on-royal); }
.confetti .gold { background: var(--gold); }

@keyframes fall {
  to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); }
}

/* The flag stays, as a stripe rather than the whole page. */
.flag {
  display: grid;
  grid-template-rows: repeat(6, 6px);
}

.flag i:nth-child(1) { background: var(--flag-red); }
.flag i:nth-child(2) { background: var(--flag-orange); }
.flag i:nth-child(3) { background: var(--flag-yellow); }
.flag i:nth-child(4) { background: var(--flag-green); }
.flag i:nth-child(5) { background: var(--flag-blue); }
.flag i:nth-child(6) { background: var(--flag-violet); }

/* Below the throne: the list, with the slower games beside it. */
.board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 72px;
  align-items: start;
  max-width: var(--page);
  margin-inline: auto;
  padding: 48px var(--gutter) 72px;
}

.list h2 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.intro {
  margin: 4px 0 16px;
  color: var(--ink-soft);
}

.list .intro {
  font-size: var(--text-md);
}

.more {
  width: 100%;
  margin-top: 16px;
}

.side {
  display: grid;
  gap: 40px;
}

.panel h2 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.25;
}

/* Lines up the first panel's heading with the list's larger one. */
.panel:first-child h2 {
  padding-top: 6px;
}

.panel .button {
  width: 100%;
}

.seats,
.standings {
  margin: 0 0 16px;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.seat-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
}

.seat-no {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.seat-row .who,
.standing .who {
  font-size: var(--text-base);
}

.seat-row img,
.standing img {
  display: block;
  outline: 1px solid var(--line);
}

.standing {
  display: grid;
  grid-template-columns: 1.25rem 24px minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

.place {
  color: var(--ink-soft);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.score {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.bar-track {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--royal);
}

.yours {
  margin: 0;
  font-weight: 600;
}

.yours:empty {
  display: none;
}

.records {
  margin: 12px 0 0;
}

.records dt {
  color: var(--ink-soft);
}

.records dd {
  margin: 0 0 12px;
  font-size: var(--text-md);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.names {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.entry {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}

.rank {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.entry:nth-child(6n + 1) .rank { background: var(--flag-orange); color: var(--ink); }
.entry:nth-child(6n + 2) .rank { background: var(--flag-yellow); color: var(--ink); }
.entry:nth-child(6n + 3) .rank { background: var(--flag-green); color: var(--on-royal); }
.entry:nth-child(6n + 4) .rank { background: var(--flag-blue); color: var(--on-royal); }
.entry:nth-child(6n + 5) .rank { background: var(--flag-violet); color: var(--on-royal); }
.entry:nth-child(6n + 6) .rank { background: var(--flag-red); color: var(--on-royal); }

.who {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.who a {
  color: inherit;
  text-decoration: none;
}

.who a:hover {
  color: var(--link);
  text-decoration: underline;
}

/* Marks a listed name that also holds a Hall of Fame seat. */
.seated {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  background: url(/star.svg) center / contain no-repeat;
  vertical-align: -2px;
}

.where {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  text-align: right;
}

.where img {
  display: block;
  flex: none;
  outline: 1px solid var(--line);
}

/* Always on screen: the credit, the links, and a way back to the form. */
.bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 20px;
  min-height: var(--bar-height);
  padding: 0 var(--gutter) env(safe-area-inset-bottom);
  background: var(--ink);
  color: var(--on-royal);
}

.bar a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: inherit;
}

.bar a:hover {
  color: var(--gold);
}

.bar a.bar-cta {
  display: none;
  min-height: 36px;
  margin-right: auto;
  padding: 0 14px;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease-out;
}

.bar a.bar-cta:hover {
  background: var(--gold-hover);
  color: var(--ink);
}

.past-form .bar a.bar-cta {
  display: inline-flex;
}

/* Rules and privacy */
.page-head {
  padding: 2px var(--gutter);
  background: var(--royal);
  color: var(--on-royal);
}

.page-head .brand {
  min-height: 52px;
}

/* In rem, not ch: ch measures this font's wide zero and ran lines past 90 characters. */
.prose {
  max-width: 35rem;
  margin-inline: auto;
  padding: 40px var(--gutter) 64px;
  box-sizing: content-box;
  font-size: var(--text-md);
  line-height: 1.6;
}

.prose a {
  color: var(--link);
}

.prose h1 {
  max-width: none;
  margin: 0 0 16px;
  font-size: clamp(2.25rem, 6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.prose h2 {
  margin: 40px 0 8px;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
}

.prose p,
.prose ul {
  margin: 0 0 16px;
}

.prose ul {
  padding-left: 1.2em;
}

.prose li + li {
  margin-top: 8px;
}

.updated {
  margin-top: 40px !important;
  color: var(--ink-soft);
  font-size: var(--text-base);
}

@media (max-width: 760px) {
  /* Tighter above the form, so the pay button is on a phone's first screen. */
  .masthead {
    padding-block: 4px;
  }

  .crown {
    width: 80px;
    margin-top: 4px;
  }

  .name-box {
    height: 148px;
  }

  .reign {
    margin-top: 4px;
  }

  .throne {
    padding-bottom: 24px;
  }

  .take {
    margin-top: 16px;
    padding: 16px;
  }

  .take-intro {
    margin-bottom: 12px;
  }

  .jump {
    display: none;
  }

  .fields {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "country"
      "seat"
      "pay";
    gap: 8px;
  }

  .seat {
    margin-top: 4px;
  }

  .pay {
    width: 100%;
  }

  .after {
    flex-direction: column;
    align-self: stretch;
  }

  .after .button {
    width: 100%;
  }

  .board {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-block: 32px 56px;
  }

  .panel:first-child h2 {
    padding-top: 0;
  }

  .entry {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 2px 12px;
  }

  .rank {
    grid-row: span 2;
  }

  .where {
    grid-column: 2;
    text-align: left;
  }

  .bar {
    justify-content: space-between;
  }

  .bar a.bar-cta {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 8px 0 0;
  }

  body.past-form {
    padding-bottom: calc(var(--bar-height) * 2 + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .crown {
    animation: none;
    transform: rotate(-6deg);
  }

  .crown.landed {
    animation: none;
  }

  .pay,
  .button,
  .button.quiet,
  .button.outline,
  .bar a.bar-cta {
    transition: none;
  }
}