/* =========================================================================
   Sprite Locker — clean rebuild of the original design system.
   Colors/values carried over faithfully from the original ft-* classes.
   ========================================================================= */

:root {
  --font-display: "Anton", system-ui, sans-serif;   /* italic display / brand */
  --font-sans: "Saira Condensed", system-ui, sans-serif;
  --bg: #070a1c;
  --ink: #eaf2ff;
  --ink-dim: #d2e1ffa6;
  --panel: #131a42b8;
  --panel-border: #78aaff33;
  --accent: #1ab4ff;
  --gold: #ffc31f;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--bg);
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; }
button { font-family: inherit; }

/* ---- animated screen background (radial glows + gradient) ---- */
.ft-screen {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
/* Gradient lives on a dedicated fixed layer that WebKit composites once,
   instead of `background-attachment: fixed`, which repaints the whole
   viewport gradient every scroll frame in Safari (Chrome composites it). */
.ft-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(120% 80% at 12% -10%, #1f3aa0 0, #1f3aa000 55%),
    radial-gradient(120% 90% at 100% 0, #3a1f78 0, #3a1f7800 50%),
    linear-gradient(#0c1230, #070a1c);
}
.ft-shell {
  width: 100%;
  max-width: 120rem;
  margin-inline: auto;
  padding: 2.5rem clamp(1rem, 2.5vw, 3rem) 5.5rem;
}
.ft-readable { max-width: 66rem; margin-inline: auto; }

/* ---- typography helpers ---- */
.ft-display { font-family: var(--font-display); font-style: italic; letter-spacing: .01em; }
.ft-heading { text-transform: uppercase; letter-spacing: .04em; font-style: italic; font-weight: 800; }
.ft-brand {
  text-transform: uppercase; letter-spacing: .01em; color: #eaf4ff;
  font-family: var(--font-display); font-style: italic; line-height: 1; font-size: 1.5rem;
}
.ft-title {
  color: transparent;
  background: linear-gradient(#fff, #b9ecff 55%, #5cc6ff);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px #07123c99) drop-shadow(0 0 28px #3cbeff99);
}
.muted { color: #d2e1ffa6; }

/* ---- panels ---- */
.ft-panel {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: .75rem;
  box-shadow: inset 0 1px #ffffff0d, 0 18px 40px #00000073;
}

/* ---- buttons ---- */
.ft-pillbtn {
  text-transform: uppercase; letter-spacing: .03em; color: #dbeaff; cursor: pointer;
  background: #ffffff0d; border: 1px solid #78aaff59; border-radius: .4rem;
  display: inline-flex; justify-content: center; align-items: center; gap: .45rem;
  padding: .55rem 1rem; font-size: .9rem; font-style: italic; font-weight: 800;
  transition: background .1s, border-color .1s, filter .1s;
}
.ft-pillbtn:hover { background: #ffffff1f; filter: brightness(1.08); }
.ft-pillbtn--accent { color: #06182e; border-color: transparent; background: linear-gradient(#7fe7ff, #1ab4ff 48%, #0f8fe6); }
.ft-pillbtn--gold { color: #3a2a00; border-color: transparent; background: linear-gradient(#ffe680, #ffc31f 50%, #f5a300); }
.ft-reset {
  text-transform: uppercase; letter-spacing: .03em; color: var(--ink-dim); cursor: pointer;
  background: none; border: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .6rem; font-size: .85rem; font-style: italic; font-weight: 700;
}
.ft-reset:hover { color: #fff; }

.ft-input {
  text-transform: none; letter-spacing: .01em; color: #fff; background: #00000052;
  border: 2px solid #82beff73; border-radius: .35rem; outline: none; width: 100%;
  padding: .55rem .8rem; font-weight: 600;
  transition: border-color .12s, box-shadow .12s;
}
.ft-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #1ab4ff33; }

/* ---- header ---- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-logo { display: block; }
.header-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.account-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .7rem;
  background: #ffffff0d; border: 1px solid #78aaff40; border-radius: 999px; color: #dbeaff;
  font-weight: 700; font-size: .9rem;
}
.account-chip .avatar {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: linear-gradient(135deg, #7fe7ff, #1ab4ff); color: #06234a;
  display: grid; place-items: center; font-weight: 800; font-size: .8rem;
}

/* ---- hero ---- */
.hero { text-align: center; margin-bottom: 2rem; }
.hero-title { font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1; margin: 0; }
.hero-sub { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-style: italic; color: #9fc4ff; margin: .4rem 0 1rem; }
.hero-lead { color: #cfe0ff; max-width: 46rem; margin: 0 auto; }

/* ---- progress panel ---- */
.progress-panel { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ft-ring {
  --p: 0;
  width: 68px; height: 68px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(#3fd0ff 0 calc(var(--p) * 1%), #ffffff1a calc(var(--p) * 1%) 100%);
  box-shadow: 0 0 16px #3fd0ff59; position: relative;
}
.ft-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #0c1230; }
.ring-label { position: relative; z-index: 1; font-weight: 800; font-style: italic; font-size: .9rem; }
.progress-body { flex: 1 1 260px; min-width: 220px; }
.progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.progress-counts { display: flex; align-items: baseline; gap: .9rem; }
.progress-count { font-family: var(--font-display); font-style: italic; color: #9fdcff; }
.mastered-count { display: inline-flex; align-items: baseline; gap: .25rem; font-family: var(--font-display); font-style: italic; color: var(--gold, #ffc31f); }
.mastered-crown { color: var(--gold, #ffc31f); }
.ft-progress { background: #0006; border: 1px solid #ffffff2e; border-radius: 999px; height: .85rem; overflow: hidden; }
.ft-progress-fill { background: linear-gradient(90deg, #1ab4ff, #7fe7ff 50%, #ffc31f); height: 100%; transition: width .35s; box-shadow: 0 0 12px #1ab4ffbf; }
.progress-legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .7rem; }
.legend-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: #cfe0ff; }
.ft-pip { border-radius: 999px; flex: none; width: .6rem; height: .6rem; display: inline-block; box-shadow: 0 0 6px currentColor; }
.progress-tools { display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; }
.dust-line { margin-top: .55rem; font-size: .82rem; color: #cfe0ff; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.dust-gem { color: #7fe7ff; text-shadow: 0 0 8px #1ab4ffaa; }
.dust-sep { opacity: .4; }
#dustOwned, #dustTotal { font-weight: 800; font-style: italic; color: #9fdcff; }
.dust-cell { white-space: nowrap; font-weight: 700; font-style: italic; color: #9fdcff; }

/* ---- filters ---- */
.filters { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.filter-group { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  cursor: pointer; text-transform: uppercase; letter-spacing: .03em; font-weight: 800; font-style: italic; font-size: .82rem;
  padding: .4rem .85rem; border-radius: .4rem; border: 1px solid #78aaff40; background: #ffffff0d; color: #cfe0ff;
  transition: filter .1s, background .1s;
}
.chip[aria-pressed="true"] { color: #06182e; background: linear-gradient(#7fe7ff, #1ab4ff 48%, #0f8fe6); border-color: transparent; }
.missing-toggle { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: #cfe0ff; cursor: pointer; }

/* =========================================================================
   MATRIX — the tracker grid
   ========================================================================= */
.matrix { display: grid; gap: 1rem; }
.rarity-band { margin-top: 1rem; }
.rarity-band-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; }
.creature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .85rem; }

.creature-card { display: flex; flex-direction: column; gap: .6rem; padding: .9rem; }
.creature-head { display: flex; align-items: center; gap: .6rem; }
.creature-name { font-family: var(--font-display); font-style: italic; text-transform: uppercase; letter-spacing: .02em; font-size: 1.15rem; }
.ft-rarity {
  display: inline-block; padding: .22rem .7rem; border-radius: .25rem; font-weight: 800; font-style: italic;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #06182e;
  transform: skew(-11deg); border: 1px solid #ffffffa6;
  background: linear-gradient(180deg, var(--grad-from, var(--rarity)) 0, var(--rarity) 55%, var(--grad-to, var(--rarity)) 100%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--rarity) 70%, transparent);
}
.ft-rarity > span { display: inline-block; transform: skew(11deg); }
.creature-count { margin-left: auto; font-weight: 700; color: #9fdcff; font-style: italic; font-size: .85rem; }

/* variant cells */
.cell-row { display: flex; flex-wrap: wrap; gap: 1.1rem .6rem; }
.ft-cell {
  width: 4.25rem; height: 4.25rem; border-radius: .3rem; cursor: pointer; position: relative;
  display: inline-block; transform: skew(-11deg); transition: transform .1s, box-shadow .1s, filter .1s;
  border: 2px solid #ffffff24;
}
.ft-cell:hover { transform: skew(-11deg) translateY(-2px); filter: brightness(1.08); }
.ft-cell-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: skew(11deg); }
.ft-sprite-img { width: 100%; height: 100%; object-fit: contain; padding: .3rem; pointer-events: none; user-select: none; filter: drop-shadow(0 1px 2px #0000008c); }

.ft-cell--off { background: linear-gradient(#ffffff0d, #0006); border-color: #ffffff24; }
.ft-cell--off .ft-sprite-img { filter: grayscale(1) brightness(.85) contrast(.9); opacity: .4; }
.ft-cell--owned {
  border: 2px solid #ffffffd9;
  background: radial-gradient(120% 100% at 50% 115%, var(--grad-from, var(--rarity)) 0, var(--rarity) 42%, var(--grad-to, var(--rarity)) 100%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rarity) 75%, transparent), inset 0 -10px 18px color-mix(in srgb, var(--rarity) 40%, #fff);
}
.ft-cell--mastered { border-width: 3px; border-color: var(--gold); box-shadow: 0 0 14px #ffc31fa6, inset 0 -10px 18px color-mix(in srgb, var(--rarity) 40%, #fff); }
.cell-label { text-align: center; font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; color: #9fb4d9; pointer-events: none; }
.ft-cell-crown {
  position: absolute; top: -10px; right: -10px; z-index: 3; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; color: #3a2a00; font-size: .85rem; transform: skew(11deg);
  background: linear-gradient(#ffe08a, #f5a300); border: 1.5px solid #0c1030e6; box-shadow: 0 1px 5px #0000008c;
}
.cell-wrap { display: flex; flex-direction: column; align-items: center; gap: .4rem; }

/* ---- reference table ---- */
.info { margin-top: 3rem; }
.section-title { font-size: 1.5rem; margin-bottom: .4rem; }
.table-wrap { overflow-x: auto; }
.ft-ref-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .92rem; }
.ft-ref-table th, .ft-ref-table td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid #ffffff14; vertical-align: top; }
.ft-ref-table th { text-transform: uppercase; letter-spacing: .04em; font-style: italic; color: #9fc4ff; font-size: .78rem; }
.ft-ref-table td.ft-heading { white-space: nowrap; }
.ft-rarity-tag {
  display: inline-block; padding: .2rem .7rem; border-radius: .25rem; font-weight: 800; font-style: italic; font-size: .72rem;
  text-transform: uppercase; color: #06182e; transform: skew(-11deg); border: 1px solid #ffffffa6;
  background: linear-gradient(180deg, var(--grad-from, var(--rarity)) 0, var(--rarity) 55%, var(--grad-to, var(--rarity)) 100%);
}

/* ---- ported prose sections ---- */
.prose { color: #cfe0ff; line-height: 1.7; }
.variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; margin-top: 1rem; }
.variant-card { padding: .9rem 1rem; }
.variant-card { --rarity: #7fb0ff; border-left: 3px solid var(--rarity); }
.variant-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.variant-name { font-size: 1.05rem; }
.variant-badge {
  font-size: .68rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .03em;
  color: #06182e; padding: .18rem .55rem; border-radius: .25rem; transform: skew(-11deg);
  background: color-mix(in srgb, var(--rarity) 80%, #fff);
}
.variant-desc { margin: 0; font-size: .88rem; }

.faq-list { display: grid; gap: .6rem; margin-top: 1rem; }
.faq-item { padding: 0; overflow: hidden; }
.faq-item > summary {
  cursor: pointer; list-style: none; padding: .9rem 1.1rem; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .02em; color: #dbeaff; font-size: .95rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; color: #7fe7ff; font-size: 1.2rem; transition: transform .15s; }
.faq-item[open] > summary::after { content: "−"; }
.faq-item > p { margin: 0; padding: 0 1.1rem 1rem; line-height: 1.6; }

/* ---- footer ---- */
.site-footer { margin-top: 3rem; text-align: center; }
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ---- legal pages (privacy policy, etc.) ---- */
.legal { padding-block: 1rem 3rem; }
.legal .section-title { margin-top: 2rem; }
.legal .prose { margin: .6rem 0; }
.legal ul.prose { padding-left: 1.25rem; }
.legal ul.prose li { margin: .35rem 0; line-height: 1.7; }
.legal a { color: var(--accent); }

/* =========================================================================
   MODALS + TOASTS (auth / trade dialogs)
   ========================================================================= */
.modal-host {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: #04081aee; backdrop-filter: blur(4px); padding: 1rem;
}
.modal-host[hidden] { display: none; }
.modal {
  width: min(100%, 30rem); max-height: 90vh; overflow-y: auto; padding: 1.5rem;
}
.modal--wide { width: min(100%, 46rem); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.modal-title { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: 1.4rem; }
.modal-close { background: none; border: none; color: #cfe0ff; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.field { margin-bottom: .9rem; }
.field label { display: block; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: #9fc4ff; margin-bottom: .3rem; }
.form-error { color: #ff8a8a; font-size: .85rem; min-height: 1.1rem; }
.form-switch { text-align: center; margin-top: 1rem; color: #cfe0ff; font-size: .9rem; }
.link-btn { background: none; border: none; color: #7fe7ff; cursor: pointer; font-weight: 700; text-decoration: underline; }
.auth-provider-btn { width: 100%; margin-bottom: .85rem; }
.auth-divider {
  display: flex; align-items: center; gap: .75rem; color: #9fc4ff;
  font-size: .78rem; font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: .03em; margin: .2rem 0 .85rem;
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: #78aaff33; }

.toast-host { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.toast {
  background: #0c1230; border: 1px solid #78aaff59; color: #eaf4ff; padding: .7rem 1.1rem; border-radius: .5rem;
  box-shadow: 0 10px 30px #00000080; font-weight: 600; animation: toast-in .2s ease;
}
.toast--error { border-color: #ff8a8a80; }
.toast--success { border-color: #7fffb080; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- trade-specific ---- */
.match-list { display: grid; gap: .75rem; }
.match-card { padding: 1rem; display: grid; gap: .6rem; }
.match-head { display: flex; align-items: center; gap: .6rem; }
.match-give-get { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.match-col h4 { margin: 0 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #9fc4ff; }
.mini-sprites { display: flex; flex-wrap: wrap; gap: .3rem; }
.mini-sprite { width: 2.4rem; height: 2.4rem; border-radius: .25rem; border: 1px solid #ffffff24; background: #ffffff0d; padding: .15rem; }
.match-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.empty-state { text-align: center; color: #9fb4d9; padding: 2rem 1rem; }

/* =========================================================================
   TRADE SCREEN — full-screen swipe deck
   ========================================================================= */
.trade-screen {
  position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column;
  background-image:
    radial-gradient(120% 80% at 12% -10%, #1f3aa0 0, #1f3aa000 55%),
    radial-gradient(120% 90% at 100% 0, #3a1f78 0, #3a1f7800 50%),
    linear-gradient(#0c1230, #070a1c);
  padding: env(safe-area-inset-top) 1rem 1rem;
}
.trade-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem .25rem; }
.trade-title { font-size: 1.6rem; }
.trade-deck {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  max-width: 30rem; width: 100%; margin: 0 auto; min-height: 0;
}
.trade-actions { display: flex; justify-content: center; gap: 2.5rem; padding: 1.25rem 0 .5rem; }
.swipe-btn {
  width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 2px solid #ffffff26; cursor: pointer;
  font-size: 1.6rem; font-weight: 800; display: grid; place-items: center; transition: transform .1s, filter .1s;
  background: #131a42; color: #fff;
}
.swipe-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.swipe-yes { color: #3ad07a; border-color: #3ad07a80; box-shadow: 0 0 18px #3ad07a44; }
.swipe-no { color: #ff6b6b; border-color: #ff6b6b80; box-shadow: 0 0 18px #ff6b6b44; }

.swipe-card {
  position: absolute; width: 100%; max-width: 30rem; padding: 1.25rem; cursor: grab;
  touch-action: pan-y; user-select: none;
  transform: scale(calc(1 - var(--depth, 0) * .04)) translateY(calc(var(--depth, 0) * 14px));
  transition: transform .2s ease;
}
.swipe-card:active { cursor: grabbing; }
.swipe-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.swipe-name { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; }
.swipe-kind { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.swipe-kind.incoming { color: #ffc36b; }
.swipe-kind.match { color: #7fe7ff; }
.swipe-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: start; }
.swipe-sides.compact { grid-template-columns: 1fr 1fr; }
.swipe-side h4 { margin: 0 0 .45rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: #9fc4ff; }
.side-dust { color: #9fdcff; font-style: italic; }
.swipe-arrow { align-self: center; color: #7fe7ff; font-size: 1.4rem; }
.swipe-fair {
  margin-top: 1rem; text-align: center; font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: .03em; font-size: .82rem; padding: .5rem; border-radius: .4rem;
}
.fair-even { color: #cfe0ff; background: #ffffff0d; }
.fair-good { color: #06231a; background: linear-gradient(#7fffb0, #3ad07a); }
.fair-bad  { color: #2a0808; background: linear-gradient(#ffb0b0, #ff6b6b); }

.mini-sprites { display: flex; flex-wrap: wrap; gap: .3rem; }
.mini-sprite { width: 2.6rem; height: 2.6rem; border-radius: .25rem; border: 1px solid #ffffff24; background: #ffffff0d; padding: .15rem; }

/* swipe stamps */
.swipe-stamp {
  position: absolute; top: 1.4rem; font-family: var(--font-display); font-style: normal;
  font-size: 2rem; padding: .2rem .7rem; border: 4px solid; border-radius: .5rem; opacity: 0;
  transition: opacity .1s; pointer-events: none; z-index: 2;
}
.stamp-go { left: 1.4rem; color: #3ad07a; border-color: #3ad07a; transform: rotate(-16deg) skewX(-9deg); }
.stamp-nope { right: 1.4rem; color: #ff6b6b; border-color: #ff6b6b; transform: rotate(16deg) skewX(-9deg); }
.swipe-card.show-go .stamp-go { opacity: 1; }
.swipe-card.show-nope .stamp-nope { opacity: 1; }

.trade-empty { display: grid; gap: .6rem; place-items: center; }
.empty-emoji { font-size: 2.5rem; }

/* active trades view */
.active-screen { z-index: 151; }
.active-wrap { flex: 1; overflow-y: auto; max-width: 40rem; width: 100%; margin: 0 auto; padding-bottom: 2rem; }
.active-list { display: grid; gap: .75rem; }
.active-card { padding: 1rem; display: grid; gap: .6rem; }
.active-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.active-status { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.active-status.accepted { color: #3ad07a; }
.active-status.pending { color: #ffc36b; }

@media (max-width: 640px) {
  .progress-tools { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .match-give-get { grid-template-columns: 1fr; }
}

/* Anton ships no italic face, so `font-style: italic` on it triggers Chrome's
   faux-italic — which slants these display headings the WRONG way (backwards,
   to the left). Force a real forward/right slant with a skew instead. */
.ft-display, .ft-brand, .progress-count, .creature-name, .modal-title, .swipe-name {
  font-style: normal;
  display: inline-block;
  transform: skewX(-9deg);
}