/* Looks like the game on stream: night navy panels with a gold edge and snow on top, gold ribbons,
   a string of lights. The picture pieces in /assets/hud are drawn by the same code as the game's. */
@font-face {
  font-family: "Rubik";
  src: url("/assets/Rubik.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --night: #0d1220;
  --panel: #18203a;
  --text: #f1f3fb;
  --muted: #c3cadf;
  --gold: #ffc26b;
  --gold-light: #ffd68a;
  --gold-deep: #ecaa4e;
  --gold-shadow: #96601e;
  --brown: #2b1709;
  --blue: #8fc7ff;
  --green: #5fe08a;
  --line: rgb(255 255 255 / 14%);
  --tabs-height: 4.5rem;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--night);
  color: var(--text);
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 100%;
  line-height: 1.5;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: calc(var(--tabs-height) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* The village stays behind the whole page, dimmed and out of focus. */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: var(--night) url("/assets/night.jpg") center / cover no-repeat;
}

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

img {
  max-width: 100%;
}

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

/* ---- Decoration ---------------------------------------------------------------------------- */

.snow {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lights {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 2.75rem;
  overflow: hidden;
  pointer-events: none;
}

.lights svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lights .bulb-halo {
  animation: twinkle 2.4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from {
    opacity: 0.25;
  }

  to {
    opacity: 0.95;
  }
}

.corner {
  position: absolute;
  z-index: 4;
  top: -0.25rem;
  width: 5.5rem;
  height: auto;
  pointer-events: none;
}

.corner--left {
  left: 0;
}

.corner--right {
  right: 0;
  transform: scaleX(-1);
}

/* ---- First screen -------------------------------------------------------------------------- */

/* The tree and the square stay in the clear at the top, and the text starts where the picture fades out. */
.hero {
  position: relative;
  padding: 30svh 1rem 1.5rem;
  overflow: hidden;
}

.hero__picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(58svh, 40rem);
  object-fit: cover;
  object-position: 50% 30%;
  /* Melts into the night behind the page, so no edge shows where the picture ends. */
  -webkit-mask-image: linear-gradient(#000 52%, transparent 100%);
  mask-image: linear-gradient(#000 52%, transparent 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.brand {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.logo {
  margin: 0.125rem 0 0.75rem;
  background: linear-gradient(#ffe7b5, var(--gold) 55%, #f09d3a);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: clamp(2.5rem, 11.5vw, 5.75rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  filter: drop-shadow(0 3px 0 rgb(43 23 9 / 90%)) drop-shadow(0 0 22px rgb(255 170 70 / 35%));
}

.lead {
  margin: 0 auto 1.25rem;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}

/* The gold ribbon of the game's announcements, as the page's main button. */
.ribbon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  padding: 0.5rem 4.25rem 1.125rem;
  border: 1px solid transparent;
  border-image: url("/assets/hud/ribbon.png") 16 184 40 184 fill / 8px 92px 20px 92px stretch;
  color: var(--brown);
  font-size: 1.1875rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.ribbon:hover {
  filter: brightness(1.08);
}

.ribbon:active {
  transform: translateY(2px);
}

/* The counters from the corner of the stream. */
.hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  margin: 0;
  padding: 1.5rem 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-image: url("/assets/hud/panel_snow_small.png") 60 120 40 120 fill / 30px 60px 20px 60px round stretch;
  list-style: none;
}

.hud__item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.125rem;
  min-width: 0;
  line-height: 1.15;
}

.hud__item img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.hud__item strong {
  color: var(--gold);
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  font-weight: 900;
  line-height: 1.1;
}

.hud__item span {
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  text-wrap: balance;
}

.hud__event {
  margin: 0.625rem 0 0;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
}

.hud__event a {
  font-weight: 800;
}

/* Someone already living here came for their house, not for the pitch. */
.signed-in .hero {
  padding-top: 20svh;
}

.signed-in .hero__picture {
  height: 40svh;
}

.signed-in .hero__actions {
  display: none;
}

.signed-in .lead,
.signed-in #how {
  display: none;
}

/* ---- Menu: a game's tab bar on a phone, a sticky strip on a big screen ------------------------ */

.tabs {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 2px solid var(--gold-deep);
  background: linear-gradient(var(--panel), #0b0f1e);
}

.tabs__item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.125rem;
  min-height: var(--tabs-height);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.tabs__item img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.tabs__item[aria-current="true"] {
  background: rgb(255 194 107 / 12%);
  color: var(--gold);
}

/* ---- Panels ---------------------------------------------------------------------------------- */

.village {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.25rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.25rem 0.75rem 2rem;
}

.village__column {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  min-width: 0;
}

[hidden] {
  display: none !important;
}

section[id],
#event {
  scroll-margin-top: 1rem;
}

/* The game's own panel texture: only its middle repeats, so the snow keeps its shape at any width. */
.card {
  position: relative;
  min-width: 0;
  padding: 2.75rem 1.25rem 1.5rem;
  border: 1px solid transparent;
  border-image: url("/assets/hud/panel_snow.png") 88 160 56 160 fill / 44px 80px 28px 80px round stretch;
}

.card p {
  margin: 0.5rem 0;
}

.card > p:last-child {
  margin-bottom: 0;
}

.card--garland {
  padding-top: 4.25rem;
}

.card--garland::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 50%;
  width: min(19rem, 86%);
  aspect-ratio: 660 / 145;
  background: url("/assets/hud/garland.webp") center / contain no-repeat;
  transform: translateX(-50%);
  pointer-events: none;
}

.title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.75rem;
  color: var(--gold);
  font-size: clamp(1.375rem, 5vw, 1.75rem);
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.title img {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.subtitle {
  margin: 1.5rem 0 0.625rem;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 800;
}

.note {
  color: var(--muted);
  font-size: 0.9375rem;
}

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

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding: 0.5rem 1.125rem;
  border: 0;
  border-radius: 0.75rem;
  background: linear-gradient(var(--gold-light), var(--gold-deep));
  box-shadow: inset 0 1px 0 rgb(255 240 205 / 80%), 0 3px 0 var(--gold-shadow);
  color: var(--brown);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}

button:hover,
.button:hover {
  filter: brightness(1.07);
}

button:active,
.button:active {
  box-shadow: inset 0 1px 0 rgb(255 240 205 / 80%), 0 1px 0 var(--gold-shadow);
  transform: translateY(2px);
}

button.plain,
.button--plain {
  border: 1px solid rgb(255 194 107 / 55%);
  background: rgb(13 18 32 / 72%);
  box-shadow: none;
  color: var(--text);
  font-weight: 700;
}

button.plain:active,
.button--plain:active {
  box-shadow: none;
}

button.chosen {
  outline: 3px solid var(--text);
  outline-offset: 1px;
}

button:disabled {
  background: rgb(255 255 255 / 9%);
  box-shadow: none;
  color: var(--muted);
  filter: none;
  transform: none;
  cursor: default;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1rem;
}

/* ---- How it works ---------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.steps img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.steps p {
  margin: 0;
}

.steps strong {
  color: var(--gold);
}

/* ---- Your house ------------------------------------------------------------------------------ */

.house-head {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.house-head img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

.house-head h2 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(1.375rem, 5vw, 1.75rem);
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.house-head p {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.purse {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0.25rem;
}

.purse img {
  width: 2.75rem;
  height: 2.75rem;
}

.purse strong {
  color: var(--gold);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
}

.purse span {
  font-size: 1.125rem;
  font-weight: 700;
}

progress {
  display: block;
  width: 100%;
  height: 0.875rem;
  margin: 0.5rem 0 0.25rem;
  overflow: hidden;
  border: 0;
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 14%);
  appearance: none;
}

progress::-webkit-progress-bar {
  background: rgb(255 255 255 / 14%);
}

progress::-webkit-progress-value {
  background: linear-gradient(var(--gold-light), var(--gold-deep));
}

progress::-moz-progress-bar {
  background: var(--gold);
}

/* Shop shelves: every item is one big button with its picture and price. */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  position: relative;
  display: grid;
  grid-template-rows: 5rem 1fr auto;
  justify-items: center;
  gap: 0.375rem;
  width: 100%;
  height: 100%;
  padding: 0.75rem 0.5rem 0.625rem;
  border: 1px solid rgb(255 194 107 / 38%);
  border-radius: 0.875rem;
  background: linear-gradient(rgb(255 255 255 / 10%), rgb(255 255 255 / 3%));
  box-shadow: none;
  color: var(--text);
  font-weight: 700;
}

.tile:active {
  box-shadow: none;
}

.tile img.tile__picture {
  width: 100%;
  height: 5rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 45%));
}

.tile__name {
  align-self: center;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 4.5rem;
  min-height: 2rem;
  padding: 0.125rem 0.625rem;
  border-radius: 0.625rem;
  background: linear-gradient(var(--gold-light), var(--gold-deep));
  color: var(--brown);
  font-size: 1rem;
  font-weight: 900;
}

.price img {
  width: 1.125rem;
  height: 1.125rem;
}

.tile:disabled,
.tile--off {
  background: linear-gradient(rgb(255 255 255 / 6%), rgb(255 255 255 / 2%));
  color: var(--text);
}

.tile:disabled .price,
.tile--off .price {
  background: rgb(255 255 255 / 12%);
  color: var(--muted);
}

/* What to do next, when there is not enough for anything yet. */
.card .hint {
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--gold-deep);
  border-radius: 0.75rem;
  background: rgb(255 194 107 / 12%);
  font-weight: 600;
}

.tile--owned {
  border-color: var(--green);
}

.tile--owned:disabled .price {
  background: rgb(95 224 138 / 20%);
  color: var(--green);
}

.tile--locked img.tile__picture {
  opacity: 0.45;
}

/* Thank-yous for support stand out from what ogonki buy. */
.tile--support {
  border-color: rgb(255 138 208 / 50%);
  background: linear-gradient(rgb(255 138 208 / 14%), rgb(255 255 255 / 3%));
}

.tile--support.tile--owned {
  border-color: var(--green);
}

.tile--support:disabled,
.tile--support.tile--off {
  background: linear-gradient(rgb(255 138 208 / 8%), rgb(255 255 255 / 2%));
}

/* Wall colours look like the bulbs on the string. */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.swatch {
  width: 3rem;
  min-height: 3rem;
  padding: 0;
  border: 3px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  background-image: none;
  box-shadow: inset 0 -5px 8px rgb(0 0 0 / 25%);
}

.swatch:active {
  box-shadow: inset 0 -5px 8px rgb(0 0 0 / 25%);
}

.swatch--on {
  border-color: var(--text);
  box-shadow: inset 0 -5px 8px rgb(0 0 0 / 25%), 0 0 14px 2px rgb(255 214 138 / 75%);
}

/* ---- The event ------------------------------------------------------------------------------- */

.card--wide {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
}

.card--event .title {
  justify-content: center;
  text-align: center;
}

.card--event {
  text-align: center;
}

.card--event progress {
  height: 1.125rem;
}

.command {
  color: var(--gold);
  font-weight: 800;
}

.card--event .button-row {
  justify-content: center;
}

.card--event .button-row button {
  flex: 1 1 14rem;
  max-width: 24rem;
  min-height: 3.5rem;
  font-size: 1.125rem;
}

/* ---- Games: the same boards as on stream ------------------------------------------------------ */

.game {
  padding: 0.25rem 0 1.25rem;
}

.game + .game {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.game:last-child {
  padding-bottom: 0;
}

.game h3 {
  margin: 0 0 0.5rem;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.game p {
  margin: 0.5rem 0;
}

.choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.choices--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rps {
  flex-direction: column;
  gap: 0;
  min-height: 4.5rem;
  padding: 0.375rem 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.rps strong {
  font-size: 1.625rem;
  font-weight: 900;
}

.inline {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

input,
textarea {
  min-width: 0;
  border: 1px solid rgb(255 194 107 / 45%);
  border-radius: 0.75rem;
  background: rgb(13 18 32 / 70%);
  color: var(--text);
  font: inherit;
}

input {
  flex: 1;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
}

input::placeholder {
  color: var(--muted);
}

.word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

.card .word {
  margin: 0.75rem 0;
}

.word span {
  display: grid;
  width: 2.25rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 13%);
  color: var(--gold);
  font-size: 1.375rem;
  font-weight: 900;
}

/* Lives are light bulbs, as on stream. */
.lives {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.card .lives {
  margin: 0.5rem 0;
}

.lives span {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
}

.lives .lives__on {
  background: var(--gold);
  box-shadow: 0 0 10px rgb(255 194 107 / 80%);
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 4.75rem);
  gap: 0.3125rem;
  justify-content: center;
  margin: 0.75rem 0;
}

.board button {
  height: 4.75rem;
  padding: 0;
  border-radius: 0.625rem;
  background: rgb(255 255 255 / 14%);
  box-shadow: none;
  color: var(--text);
  font-size: 2.25rem;
  font-weight: 900;
}

.board button:not(:disabled):hover {
  background: rgb(255 194 107 / 28%);
}

.board button:disabled {
  background: rgb(255 255 255 / 9%);
}

.board .mark-x:disabled {
  color: var(--gold);
}

.board .mark-o:disabled {
  color: var(--blue);
}

/* The quiz and "believe it or not". */
.game .question {
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.answer {
  justify-content: flex-start;
  min-height: 3.5rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-align: left;
}

.answer span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.answer strong {
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 900;
}

.answer em {
  margin-left: auto;
  padding-left: 0.25rem;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 900;
}

.answers--two .answer {
  justify-content: center;
  min-height: 4rem;
  font-size: 1.125rem;
  text-align: center;
}

.answers--two .answer em {
  margin-left: 0;
}

button.answer--right:disabled {
  background: linear-gradient(var(--gold-light), var(--gold-deep));
  color: var(--brown);
}

button.answer--right strong {
  color: var(--brown);
}

.game .winners {
  color: var(--gold);
  font-size: 1.125rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.choices--after {
  margin-top: 0.5rem;
}

/* Counting. The pictures are placed from a seed, the same way as on stream. */
.count-ask {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.count-ask img {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.scatter {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0.75rem 0;
  overflow: hidden;
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 7%);
}

.scatter__item {
  position: absolute;
  width: 10.5%;
  height: auto;
  pointer-events: none;
}

/* Guess the number. */
.game .range {
  color: var(--gold);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.range-bar {
  position: relative;
  height: 0.875rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 14%);
}

.range-bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 0.5rem;
  border-radius: 0.5rem;
  background: var(--gold);
}

/* Four in a row: column buttons over a rack of discs. It spills into the card's padding on a phone,
   because seven buttons a thumb can hit do not otherwise fit across. */
.four {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.125rem;
  max-width: 28rem;
  margin: 0.75rem auto;
  padding: 0.125rem;
  border-radius: 0.75rem;
  background: #21386b;
}

@media (max-width: 30rem) {
  .four {
    margin-inline: -0.75rem;
  }
}

.four__column {
  min-width: 0;
  min-height: 2.75rem;
  margin-bottom: 0.125rem;
  padding: 0;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  font-weight: 900;
}

.four__cell {
  aspect-ratio: 1;
  margin: 0.0625rem;
  border-radius: 50%;
  background: rgb(8 12 24 / 92%);
}

.four__cell--x {
  background: var(--gold);
}

.four__cell--o {
  background: var(--blue);
}

.four__cell--marked {
  box-shadow: inset 0 0 0 0.1875rem #fff;
}

/* ---- Hall of Fame ------------------------------------------------------------------------------ */

.parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.875rem;
}

.part {
  min-height: 2.75rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgb(255 194 107 / 55%);
  background: rgb(13 18 32 / 72%);
  box-shadow: none;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
}

.part:active {
  box-shadow: none;
}

.part--on {
  border-color: transparent;
  background: linear-gradient(var(--gold-light), var(--gold-deep));
  color: var(--brown);
  font-weight: 800;
}

.ranks {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rank {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.25rem 0.75rem 0.25rem 0.375rem;
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 6%);
}

.rank__place {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 12%);
  color: var(--text);
  font-weight: 900;
}

.rank--1 .rank__place {
  background: linear-gradient(#ffe7a8, #e9a93e);
  box-shadow: 0 0 12px rgb(255 194 107 / 65%);
  color: var(--brown);
}

.rank--2 .rank__place {
  background: linear-gradient(#f2f5fb, #aab4c8);
  color: #1c2233;
}

.rank--3 .rank__place {
  background: linear-gradient(#f0b78c, #b36f3f);
  color: #2b1709;
}

.rank__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank__value {
  color: var(--gold);
  font-weight: 800;
  white-space: nowrap;
}

/* ---- Ideas ----------------------------------------------------------------------------------- */

.idea-form {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.idea-form label {
  font-weight: 800;
}

textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.625rem 0.75rem;
  resize: vertical;
}

.idea-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
}

.card .form-result {
  min-height: 1.5rem;
  margin: 0;
  color: var(--gold);
  font-weight: 700;
}

.ideas {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ideas li {
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 7%);
  overflow-wrap: anywhere;
}

.card .ideas p {
  margin: 0.125rem 0;
}

.ideas .button-row {
  margin-top: 0.5rem;
}

.ideas .button-row button {
  flex: 1 1 9rem;
}

/* ---- The announcement ribbon ------------------------------------------------------------------ */

.toast {
  position: fixed;
  z-index: 20;
  top: 0.75rem;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 1rem);
  margin: 0;
  padding: 0.5rem 2.75rem 1rem;
  border: 1px solid transparent;
  border-image: url("/assets/hud/ribbon.png") 16 184 40 184 fill / 8px 72px 20px 72px stretch;
  color: var(--brown);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
}

.toast:empty {
  display: none;
}

/* ---- Bottom of the page ----------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  padding: 1rem 1rem 4.5rem;
  background: url("/assets/hud/drift.webp") bottom center / max(100%, 60rem) auto no-repeat;
  font-weight: 700;
}

.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* ---- Text pages ------------------------------------------------------------------------------- */

.page {
  position: relative;
  max-width: 44rem;
  margin: 1.5rem auto 3rem;
  padding: 3rem 1.5rem 2rem;
  border: 1px solid transparent;
  border-image: url("/assets/hud/panel_snow.png") 88 160 56 160 fill / 44px 80px 28px 80px round stretch;
}

.page .brand a {
  font-weight: 700;
}

.page h1 {
  margin: 0 0 0.75rem;
  color: var(--gold);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
}

.page h2 {
  margin: 1.75rem 0 0.5rem;
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 800;
}

.page li {
  margin: 0.375rem 0;
}

code {
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
  background: rgb(255 255 255 / 12%);
}

/* ---- Bigger screens --------------------------------------------------------------------------- */

@media (min-width: 40rem) {
  .corner {
    width: 8.5rem;
  }

  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }

  .hud__item img {
    width: 3.25rem;
    height: 3.25rem;
  }

  .hud__item span {
    font-size: 0.9375rem;
  }
}

@media (min-width: 62rem) {
  body {
    padding-bottom: 0;
  }

  .hero {
    padding-top: 38svh;
    padding-bottom: 2rem;
  }

  .hero__inner {
    max-width: 60rem;
  }

  .logo {
    white-space: nowrap;
  }

  .hud {
    max-width: 46rem;
    margin: 0 auto;
  }

  .tabs {
    position: sticky;
    top: 0;
    bottom: auto;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding-bottom: 0;
    border-top: 0;
    border-bottom: 2px solid var(--gold-deep);
  }

  .tabs__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 8rem;
    min-height: 3.25rem;
    padding: 0 1rem;
    justify-content: center;
    font-size: 1rem;
  }

  .village {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    padding: 2rem 1.5rem 2.5rem;
  }

  .card--wide {
    grid-column: 1 / -1;
  }

  section[id],
  #event {
    scroll-margin-top: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .lights .bulb-halo {
    animation: none;
    opacity: 0.7;
  }

  .ribbon,
  button,
  .button {
    transition: none;
  }
}