/* ── Match settings ─────────────────────────────────────────────────── */

/* wordmark shrinks to a top bar here — the screen carries a lot */
.screen--match { padding-top: calc(var(--sat) + 16px); }
.screen--match .screen__inner { gap: clamp(14px, 2.4vh, 24px); }

.brand--mini .brand__title { font-size: clamp(26px, 8.4vw, 40px); }

.brand--mini .brand__tagline {
  margin-top: clamp(3px, .8vh, 6px);
  font-size: clamp(8.5px, 2.5vw, 11px);
  letter-spacing: .19em;
}

.match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 18px);
  width: min(100%, 430px);
}

.match__head {
  position: relative;
  text-align: center;
}

/* same trick as the wordmark: hold the boards off the heading */
.match__head::before {
  content: '';
  position: absolute;
  inset: -30% -12%;
  z-index: -1;
  background: radial-gradient(
    58% 58% at 50% 50%,
    var(--bg) 0%,
    rgba(251, 251, 253, .85) 48%,
    rgba(251, 251, 253, 0) 74%
  );
}

.match__title {
  margin: 0;
  font-size: clamp(24px, 6.8vw, 34px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.match__sub {
  margin: 5px 0 0;
  font-size: clamp(12.5px, 3.5vw, 15px);
  color: var(--ink-soft);
}

/* ── Opponent chip ──────────────────────────────────────────────────── */

.vs {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  max-width: 100%;
  padding: 9px 20px 9px 11px;
  border-radius: var(--radius-tile);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 8px 22px rgba(17, 24, 39, .07);
}

.vs__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--c-blue-soft);
  color: var(--c-blue-ink);
  font-size: 18px;
  font-weight: 750;
}

.vs__text { display: flex; flex-direction: column; min-width: 0; }
.vs__name { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.vs__hash { font-size: 13px; color: var(--ink-soft); }

/* ── Option groups ──────────────────────────────────────────────────── */

.opts { display: grid; gap: clamp(8px, 2.4vw, 12px); }
.opts--3 { grid-template-columns: repeat(3, 1fr); }
.opts--4 { grid-template-columns: repeat(4, 1fr); }

.opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: clamp(62px, 9vh, 78px);
  padding: 10px 4px;
  border: 2px solid transparent;
  border-radius: 14px;
  text-align: center;
  transition: background-color .16s ease, border-color .16s ease,
    color .16s ease, transform .16s cubic-bezier(.2, .8, .3, 1);
}

.opt__label {
  font-size: clamp(11px, 3.2vw, 14.5px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--opt-ink, var(--ink));
  text-wrap: balance;
}

.opt__meta {
  font-size: clamp(11.5px, 3.3vw, 14px);
  font-weight: 600;
  color: var(--ink);
}

.opt__glyph { display: flex; color: var(--opt-ink, var(--ink-soft)); }
.opt__glyph svg { width: clamp(17px, 4.8vw, 20px); height: auto; }
.opt:active { transform: scale(.975); }

.opt--green   { --opt-ink: var(--c-green-ink); background: var(--c-green-soft); border-color: var(--c-green-line); }
.opt--blue    { --opt-ink: var(--c-blue-ink);  background: var(--c-blue-soft);  border-color: var(--c-blue-line); }
.opt--red     { --opt-ink: var(--c-red-ink);   background: var(--c-red-soft);   border-color: var(--c-red-line); }
.opt--neutral { --opt-ink: var(--ink-mid);     background: #f4f5f7;             border-color: transparent; }

/* selection is the option's own colour, so the tints stay readable */
.opt.is-selected { border-color: var(--opt-ink); background: var(--surface); }
.opt--green.is-selected  { background: var(--c-green-soft); }
.opt--blue.is-selected   { background: var(--c-blue-soft); }
.opt--red.is-selected    { background: var(--c-red-soft); }
.opt--neutral.is-selected { --opt-ink: var(--c-blue-ink); background: var(--c-blue-soft); }

/* ── Colour balls ───────────────────────────────────────────────────── */

.ball-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.2vh, 9px);
  padding: clamp(12px, 2vh, 16px) 4px clamp(9px, 1.4vh, 12px);
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color .18s ease, background-color .18s ease;
}

.ball {
  width: clamp(34px, 10vw, 44px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .34) 21%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 50% 116%, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 58%),
    var(--ball);
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .16), 0 5px 12px -3px var(--ball);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease;
}

/* the name is the reward for picking — space is always reserved for it */
.ball-opt__name {
  min-height: 1.25em;
  font-size: clamp(11px, 3.1vw, 13.5px);
  font-weight: 750;
  letter-spacing: -.01em;
  opacity: 0;
  transition: opacity .18s ease;
}

.ball-opt.is-selected { border-color: var(--ball); }
.ball-opt.is-selected .ball { transform: scale(1.07); }
.ball-opt.is-selected .ball-opt__name { opacity: 1; }
.ball-opt:active .ball { transform: scale(1.02); }

@media (hover: hover) {
  .opt:hover { border-color: var(--opt-ink); transform: translateY(-1px); }
  .ball-opt:hover { border-color: var(--ball); }
  .ball-opt:hover .ball {
    transform: scale(1.15) translateY(-2px);
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .16), 0 11px 20px -5px var(--ball);
  }
  .ball-opt.is-selected:hover .ball { transform: scale(1.18) translateY(-2px); }
}

/* ── Start ──────────────────────────────────────────────────────────── */

.action--lg {
  width: min(100%, 320px);
  min-height: clamp(54px, 7.6vh, 62px);
  margin-top: clamp(4px, 1vh, 10px);
  margin-inline: auto;
  border-radius: 16px;
  font-size: clamp(16.5px, 4.8vw, 19px);
}

.action--lg.action--white { box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 8px 22px rgba(17, 24, 39, .1); }

.action--lg .action__icon svg { width: clamp(19px, 5.2vw, 22px); }

.card.is-nudge { animation: nudge .3s ease; }

@media (min-width: 720px) {
  .match { width: min(100%, 470px); }
  .match__title { font-size: 36px; }
  .brand--mini .brand__title { font-size: 42px; }
}