body.secret_santa {
  /* From the mockups: https://claude.ai/artifact/TBzxx7Sz3t5eNYaPnvGoGU */
  --frost: #f1f5f1;
  --card: #ffffff;
  --ink: #1c2824;
  --muted: #55635d;
  --line: #d3dcd6;
  --berry: #a51d36;
  --berry-dark: #7d1428;
  --berry-soft: #f8e3e7;
  --pine: #2c5a4a;
  --pine-soft: #e0ece5;
  --gold: #7f5710;
  --gold-soft: #f5ead2;
  --night: #2a3a57;
  --night-soft: #e4e9f3;

  margin: 0;
  background: var(--frost);
  color: var(--ink);
  font-family: system-ui, sans-serif;
  line-height: 1.45;

  a {
    color: var(--berry);

    &:hover {
      color: var(--berry-dark);
    }
  }

  .topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--card);
    border-bottom: 1px solid var(--line);

    .brand {
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--ink);
      text-decoration: none;
    }

    .sign-out, .sign-up {
      margin-left: auto;
    }
  }

  .flash {
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 18px 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--pine-soft);
    color: var(--pine);

    &.visible { opacity: 1; }

    &.alert {
      background: var(--berry-soft);
      color: var(--berry-dark);
    }

    button {
      border: none;
      background: transparent;
      color: inherit;
      font-size: 1.2rem;
      cursor: pointer;
    }
  }

  /* Space colors: green for what you receive, red for who you give to, blue for organizing */
  --letter: #2c5a4a; --letter-dark: #1f4236; --letter-soft: #e0ece5; --letter-ground: #f2f6f2;
  --santa: #a51d36; --santa-dark: #7d1428; --santa-soft: #f8e3e7; --santa-ground: #fbf3f4;
  --orga: #2a3a57; --orga-dark: #1b2840; --orga-soft: #e2e8f3; --orga-ground: #f1f4f9;
  --paper: #fcf8ee;
  --space: var(--berry); --space-dark: var(--berry-dark); --space-soft: var(--berry-soft);

  .space-letter { --space: var(--letter); --space-dark: var(--letter-dark); --space-soft: var(--letter-soft); --space-ground: var(--letter-ground); }
  .space-santa { --space: var(--santa); --space-dark: var(--santa-dark); --space-soft: var(--santa-soft); --space-ground: var(--santa-ground); }
  .space-orga { --space: var(--orga); --space-dark: var(--orga-dark); --space-soft: var(--orga-soft); --space-ground: var(--orga-ground); }

  main > .stack {
    max-width: 40rem;
    margin-inline: auto;
    padding: 20px 18px 40px;
  }

  /* One event, seen from one space */
  .event-shell {
    min-height: calc(100dvh - 58px);
    background: var(--space-ground);
  }

  .event-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px 12px;
    background: var(--card);

    h1 { font-size: 1.5rem; }
    p { font-size: 0.9rem; }
  }

  .space-band {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--space);
    color: #ffffff;

    span { opacity: 0.85; font-size: 0.9rem; }
  }

  .space-content {
    max-width: 40rem;
    margin-inline: auto;
    padding: 18px 16px 120px;
  }

  /* Phone: the spaces as a bottom tab bar */
  .spaces {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--card);
    border-top: 1px solid var(--line);
  }

  .space-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 10px;
    color: var(--muted);
    text-decoration: none;

    .space-name { font-size: 0.75rem; font-weight: 700; }
    .space-phrase { display: none; font-size: 0.8rem; }

    &:hover { color: var(--space-dark); }

    &.active {
      color: var(--space);
      background: var(--space-soft);
      box-shadow: inset 0 3px 0 var(--space);
    }

    &.disabled {
      color: #a3aea8;

      .space-phrase { display: block; font-size: 0.65rem; }
    }
  }

  /* Desktop: the spaces in a column on the left */
  @media (min-width: 900px) {
    .event-shell {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
    }

    .spaces {
      position: sticky;
      top: 0;
      align-self: start;
      height: calc(100dvh - 58px);
      flex-direction: column;
      gap: 6px;
      padding: 18px 14px;
      border-top: none;
      border-right: 1px solid var(--line);
    }

    .space-tab {
      flex: none;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      column-gap: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      color: var(--space-dark);

      .space-name { font-size: 1rem; }
      .space-phrase { display: block; width: 100%; padding-left: 34px; opacity: 0.85; }

      &.active { color: #ffffff; background: var(--space); box-shadow: none; }
      &.disabled .space-phrase { font-size: 0.8rem; }
    }

    .space-content { padding-bottom: 40px; }
  }

  h1, h2, h3 {
    margin: 0;
    line-height: 1.15;
    text-wrap: balance;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
  h3 { font-size: 1rem; }
  p { margin: 0; }

  .muted { color: var(--muted); }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* Layout */
  .stack {
    display: flex;
    flex-direction: column;
    gap: 20px;

    &.tight { gap: 10px; }
  }

  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    &.wrap { flex-wrap: wrap; justify-content: flex-start; }
  }

  .page-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .back {
    align-self: flex-start;
    font-size: 0.95rem;
  }

  /* Surfaces */
  .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
  }

  .cards, .people, .pairs, .problems, .checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .event-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ink);
    text-decoration: none;

    .event-name { font-size: 1.15rem; }

    &:hover { border-color: var(--muted); color: var(--ink); }
  }

  .notice {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--pine-soft);
    color: var(--pine);

    &.alert {
      background: var(--berry-soft);
      color: var(--berry-dark);
    }

    .problems { margin-top: 8px; gap: 6px; color: var(--ink); }
  }

  .card.checklist { padding: 16px; }

  .eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--berry);
  }

  .notice.gift-day {
    background: var(--gold-soft);
    color: var(--gold);

    strong { font-size: 1.15rem; }
    small { color: var(--ink); }
  }

  .chip.gift_day { background: var(--gold-soft); color: var(--gold); }

  .checklist li::before {
    content: "✓ ";
    color: var(--pine);
    font-weight: 700;
  }

  /* Chips */
  .chip {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--line);
    color: var(--muted);

    &.preparation { background: var(--berry-soft); color: var(--berry); }
    &.exchanges, &.joined { background: var(--pine-soft); color: var(--pine); }
    &.invited { background: var(--gold-soft); color: var(--gold); }
    &.declined, &.over { background: transparent; border: 1px solid var(--line); }
  }

  /* Stepper */
  .stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    font-size: 0.8rem;

    li {
      display: flex;
      flex-direction: column;
      gap: 6px;
      color: var(--muted);

      &::before {
        content: "";
        height: 5px;
        border-radius: 3px;
        background: var(--line);
      }

      &.done { color: var(--pine); }
      &.done::before { background: var(--pine); }
      &.current { color: var(--ink); font-weight: 700; }
      &.current::before { background: var(--berry); }
    }
  }

  /* People */
  .people li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    border-bottom: 1px solid var(--line);

    .name { flex-grow: 1; }
  }

  .avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pine);
    color: #ffffff;
    font-weight: 700;

    &.pending { background: var(--muted); }
  }

  /* Buttons */
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 14px;
    border: 1.5px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;

    &.primary {
      border-color: var(--space);
      background: var(--space);
      color: #ffffff;

      &:hover { background: var(--space-dark); }
    }
  }

  .link, .icon {
    min-height: 44px;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: var(--berry);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .link.quiet {
    align-self: center;
    color: var(--muted);
    text-decoration: underline;
  }

  .icon {
    min-width: 44px;
    color: var(--muted);
    font-size: 1.3rem;
  }

  .button_to { display: contents; }

  /* Forms */
  .form {
    input[type="text"], input[type="email"], input[type="date"], input[type="number"], textarea, select {
      box-sizing: border-box;
      width: 100%;
      min-height: 48px;
      padding: 10px 14px;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      background: var(--card);
      font: inherit;
    }

    &.row select { width: auto; flex-grow: 1; }

    .row input[type="date"] { flex-grow: 1; width: auto; }
    .row .button { flex-shrink: 0; min-height: 48px; }
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;

    label { font-weight: 700; }
  }

  .check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    cursor: pointer;

    input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--berry); }
  }

  .choice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: var(--gold-soft);

    legend { float: left; font-weight: 700; }
  }

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

  /* Participant side */
  .grow { flex-grow: 1; }

  .row.start { justify-content: flex-start; }

  .avatar {
    &.small { width: 30px; height: 30px; font-size: 0.85rem; }
    &.large { width: 44px; height: 44px; }
    &.xlarge { width: 56px; height: 56px; font-size: 1.4rem; }
  }

  .person-card {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    text-decoration: none;

    &:hover { border-color: var(--muted); color: var(--ink); }
  }

  /* Placeholder for the hand-drawn santa icons */
  .santa-badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px dashed var(--gold);
    background: var(--gold-soft);
    color: var(--gold);
    display: grid;
    place-items: center;

    svg { width: 55%; height: 55%; }

    &.small { width: 30px; height: 30px; }
    &.large { width: 56px; height: 56px; }
  }

  /* Handwriting: system cursive fonts, until a font is hosted here */
  .santa-name, .letter-text {
    font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  }

  .santa-name {
    font-size: 1.15rem;
    color: var(--gold);
  }

  .santas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;

    li { display: flex; align-items: center; gap: 12px; }
  }

  .names {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    li {
      padding: 6px 12px;
      border-radius: 999px;
      background: var(--card);
      border: 1px solid var(--line);
    }
  }

  .letter-text {
    font-size: 1.3rem;
    line-height: 1.35;
    white-space: pre-line;
  }

  /* Wins over the form's `font: inherit` */
  textarea.letter-text {
    font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
    font-size: 1.3rem;
    white-space: pre-wrap;
  }

  /* Organizer dashboard */
  .dashboard {
    display: grid;
    gap: 22px;
  }

  @media (min-width: 1100px) {
    .space-orga .space-content { max-width: 68rem; }
    .dashboard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  }

  .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
  }

  .action {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;

    .button { box-sizing: border-box; width: 100%; min-height: 48px; padding: 6px 10px; line-height: 1.2; text-align: center; border-color: var(--space); color: var(--space-dark); background: var(--card); }
    .button_to { display: block; }
    small { font-size: 0.78rem; }
  }

  .button.disabled {
    border: 1.5px dashed #b8c2bc;
    color: #8a968f;
    background: transparent;
    cursor: default;
  }

  .members {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);

    .member-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pairs-inline { font-size: 0.82rem; color: var(--space-dark); }
    .link { min-height: 32px; padding: 0 6px; font-size: 0.85rem; color: var(--space-dark); }
  }

  .chip.waiting, .chip.included { background: var(--gold-soft); color: var(--gold); }
  .chip.draft { background: var(--orga-soft); color: var(--orga-dark); border: 1px dashed var(--orga); }
  .avatar.draft { background: var(--orga); }
  .avatar.waiting, .avatar.included { background: var(--muted); }
  .avatar.declined { background: #b8c2bc; }

  /* Before the draw, the dashboard's people in one list per state */
  .member-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 4px;

    > header { justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
    h2 { margin: 0; font-size: 1.1rem; }
    .count { white-space: nowrap; }
    .member a.link { text-decoration: none; }
    .member:last-child { border-bottom: none; }
    .button_to { display: inline; }
    > .button_to .link, > .link { align-self: flex-start; min-height: 36px; color: var(--space-dark); }
    &.muted-section { opacity: 0.8; }
  }

  .button.small { min-height: 38px; padding: 0 12px; font-size: 0.9rem; }

  .notice.info { background: var(--space-soft); color: var(--space-dark); }
  .notice.warn { background: var(--gold-soft); color: var(--gold); }

  .recipients {
    list-style: none;
    margin: 0;
    padding: 0;

    li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
    .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }

  .chip.role-orga { background: var(--orga-soft); color: var(--orga); }
  .chip.role-letter { background: var(--letter-soft); color: var(--letter); }
  strong.role-orga { color: var(--orga); }
  strong.role-letter { color: var(--letter); }
  strong.role-santa { color: var(--santa); }
  .legend { font-size: 0.9rem; }

  .link.danger { align-self: center; color: var(--berry); }

  /* Modals: a sheet coming up from the bottom on phones, a centered window on desktop */
  dialog.modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto 0 0;
    padding: 0;
    border: none;
    background: transparent;

    &::backdrop { background: rgba(16, 24, 40, 0.55); }
  }

  .sheet {
    max-height: 88dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: var(--card);
    color: var(--ink);

    header h2 { flex: 1; font-size: 1.3rem; }
  }

  /* A square close button, its cross on the content's right edge */
  .sheet-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: -11px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--muted);
    font-size: 1.6rem;
    line-height: 1;
    text-decoration: none;

    &:hover { background: var(--space-soft); color: var(--space-dark); }
  }

  @media (min-width: 700px) {
    dialog.modal { width: 34rem; margin: auto; }
    .sheet { border-radius: 20px; padding-bottom: 22px; }
  }

  .invite-row {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 8px;
  }

  fieldset.plain {
    margin: 0;
    padding: 0;
    border: none;

    legend { padding: 0; margin-bottom: 6px; font-weight: 700; }
  }

  /* 1 to 6, as one row of choices */
  .segmented {
    display: flex;
    gap: 6px;

    label { flex: 1; }
    input { position: absolute; opacity: 0; }

    span {
      display: grid;
      place-items: center;
      min-height: 46px;
      border-radius: 12px;
      border: 1.5px solid var(--space);
      color: var(--space-dark);
      font-weight: 700;
      cursor: pointer;
    }

    input:checked + span { background: var(--space); color: #ffffff; }
    input:focus-visible + span { outline: 2px solid var(--space); outline-offset: 2px; }
  }

  /* Letter paper, for letters being written or read */
  .letter-paper {
    padding: 16px 18px;
    border-radius: 4px 16px 16px 16px;
    background: var(--paper);
    border: 1px solid #e6dcc3;
    white-space: pre-line;
  }

  /* "Mes enfants": the children as capsules, scrolling sideways when there are many */
  .capsules {
    margin-inline: -16px;
    padding: 2px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;

    ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; width: max-content; }
  }

  .capsule {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1.5px solid var(--santa);
    background: var(--card);
    color: var(--santa-dark);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;

    &.current { background: var(--santa); color: #ffffff; }
  }

  /* The child given to: their name is the title */
  .child-head {
    display: flex;
    flex-direction: column;
    gap: 4px;

    h2 { font-size: 1.6rem; color: var(--santa-dark); }
  }

  .tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
  }

  .tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;

    &.current { color: var(--space-dark); box-shadow: inset 0 -3px 0 var(--space); }
  }

  .dot-inline {
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--space);
  }

  .notice.secret-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--space-soft);
    color: var(--space-dark);
  }

  /* A conversation scrolls on its own, opening on its latest messages: the reversed column starts at
     its end, and the message box stays right below */
  .thread {
    max-height: min(60dvh, 34rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    padding-right: 4px;
  }

  /* Long links are cut to a readable length; the link and its title keep the whole URL */
  .autolink {
    display: inline-block;
    max-width: min(100%, 22em);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  .bubble .autolink { color: inherit; }

  /* Messages */
  .messages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 86%;

    .bubble-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .author { font-size: 0.85rem; font-weight: 700; }
    .author.santa-name { font-weight: 400; font-size: 1.05rem; }

    .bubble {
      padding: 10px 14px;
      border-radius: 16px 16px 16px 4px;
      background: var(--card);
      border: 1px solid var(--line);
      white-space: pre-line;
      overflow-wrap: anywhere;
    }

    time { font-size: 0.75rem; color: var(--muted); }

    &.mine {
      align-self: flex-end;

      .bubble-group { align-items: flex-end; }
      .author { color: var(--muted); font-weight: 400; }
      .bubble { border-radius: 16px 16px 4px 16px; background: var(--space); border-color: var(--space); color: #ffffff; }
    }

    &.secret .bubble {
      background: var(--night-soft);
      border: 1.5px dashed var(--night);
      color: var(--ink);
    }
  }

  /* What the reader hasn't seen yet */
  .new {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--berry);

    &::before { content: "● "; }
  }

  .message.unread .bubble { box-shadow: 0 0 0 2px var(--berry-soft); }

  .secret-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--night);
  }

  .composer {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .row input[type="text"] { flex-grow: 1; }
    .row .button { min-height: 48px; }

    &:has(.secret-toggle input:checked) input[type="text"] {
      background: var(--night-soft);
      border: 1.5px dashed var(--night);
    }
  }

  .secret-toggle input { accent-color: var(--night); }

  /* Who gives to whom, for me: my santas (green, what I receive), me, my children (red, who I give
     to). Also the stage of the draw and reveal animations (relations_controller.js). */
  .space-relations { --space: var(--gold); --space-dark: #5e400b; --space-soft: var(--gold-soft); --space-ground: #faf6ec; }

  .relations {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;

    h2 { margin: 0 0 8px; font-size: 1.1rem; justify-content: center; text-align: center; }
    h2 small { display: block; font-size: 0.85rem; font-weight: 400; }

    [data-secret-santa--relations-target="stage"] { transition: opacity 0.4s, transform 0.4s; }
    .waiting { opacity: 0; transform: translateY(12px); }
  }

  .relations-group { width: 100%; }

  .relation-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .relation-card {
    width: 9.5rem;
    min-height: 7.5rem;
    perspective: 700px;

    .card-inner, .card-face { box-sizing: border-box; }

    .card-inner {
      position: relative;
      display: grid;
      height: 100%;
      min-height: inherit;
      color: var(--ink);
      text-decoration: none;
    }
  }

  .relations-me {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 14rem;
  }

  /* Downward: the gifts go from the santas to me, from me to my children */
  .relation-flow {
    width: 2px;
    height: 34px;
    background: repeating-linear-gradient(to bottom, var(--line) 0 5px, transparent 5px 9px);
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -2px;
      border: 6px solid transparent;
      border-top-color: var(--muted);
      transform: translateX(-50%);
    }
  }

  /* A santa card: their santa name in front, who they are behind, both the card's whole size */
  .santa-card {
    height: 9rem;

    .card-inner { border-radius: 16px; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.3, 1.4, 0.5, 1); }
    &.flipped .card-inner { transform: rotateY(180deg); }

    .card-face {
      grid-area: 1 / 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 100%;
      padding: 12px 8px;
      border-radius: 16px;
      backface-visibility: hidden;
      background: var(--letter-soft);
      border: 1.5px solid var(--letter);
    }

    .back { transform: rotateY(180deg); background: var(--card); }
    .avatar { background: var(--letter); }
    .avatar.unknown { background: var(--muted); }
    &.sparkle .card-inner { animation: card-glow 1.4s ease-out; }
  }

  /* A child card: their name, which spins during the draw */
  .child-card {
    .card-inner {
      align-content: center;
      justify-items: center;
      gap: 6px;
      padding: 12px 8px;
      border-radius: 16px;
      background: var(--santa-soft);
      border: 1.5px solid var(--santa);
    }

    .avatar { background: var(--santa); }
    .child-name { font-size: 1.15rem; }
    &.spinning .card-inner { border-style: dashed; }
    &.spinning .child-name { opacity: 0.75; }
    &.landed .card-inner { animation: card-land 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
  }

  .relations-replay { justify-content: center; gap: 4px 16px; margin-top: 18px; }

  .relations-link { align-self: flex-start; font-size: 0.95rem; }
}

@keyframes card-land {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.12); box-shadow: 0 0 0 6px var(--santa-soft); }
  100% { transform: scale(1); }
}

@keyframes card-glow {
  0% { box-shadow: 0 0 0 0 rgba(127, 87, 16, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(127, 87, 16, 0.15); }
  100% { box-shadow: 0 0 0 16px rgba(127, 87, 16, 0); }
}