/* ============================================================================
   FUTKING design system — CSS port of futking-design-system-d4544cc6
   Each block mirrors the corresponding component in the design-system bundle
   (components/**.jsx). Values are copied from the source, not re-derived.
   ========================================================================= */

/* --- Wordmark (navigation/Wordmark.jsx) ---------------------------------- */
.fk-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fk-wordmark-size, 22px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.fk-wordmark__fut { color: var(--cream-100); }
.fk-wordmark__king { color: var(--action-primary); }
.fk-wordmark--ink .fk-wordmark__fut { color: var(--ink-900); }

/* --- Button (core/Button.jsx) -------------------------------------------- */
.fk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  /* size: md */
  padding: 11px 18px;
  font-size: var(--fs-caption);
  /* variant: primary */
  background: var(--action-primary);
  color: var(--text-on-gold);
  box-shadow: 0 2px 0 var(--gold-700);
}
.fk-btn:hover { text-decoration: none; }
.fk-btn--sm { padding: 7px 12px; font-size: var(--fs-micro); }
.fk-btn--lg { padding: 15px 26px; font-size: var(--fs-body-sm); }

/* color é reafirmado aqui: a:hover (tokens/base.css) vence .fk-btn na cascata */
.fk-btn:hover { background: var(--action-primary-hover); color: var(--text-on-gold); }

.fk-btn--secondary {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--line-strong);
  box-shadow: none;
}
.fk-btn--secondary:hover {
  background: rgba(243, 237, 221, .08);
  border-color: var(--line-gold);
  color: var(--text-accent);
}

.fk-btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-press);
}
.fk-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* --- Badge (core/Badge.jsx) ---------------------------------------------- */
.fk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  /* tone: neutral */
  background: rgba(243, 237, 221, .12);
  color: var(--text-strong);
}
.fk-badge--pill { border-radius: var(--radius-pill); }
.fk-badge--live { background: var(--status-live); color: var(--cream-100); }
.fk-badge--gold { background: var(--action-primary); color: var(--text-on-gold); }
.fk-badge--win { background: var(--status-win); color: var(--ink-900); }
.fk-badge--yellow-card { background: var(--card-yellow); color: var(--ink-900); }
.fk-badge--red-card { background: var(--card-red); color: var(--cream-100); }
.fk-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  animation: futking-pulse 1.4s var(--ease-standard) infinite;
}

/* --- Card (core/Card.jsx) ----------------------------------------------- */
.fk-card {
  border-radius: var(--radius-md);
  padding: var(--fk-card-padding, var(--space-6));
  transition:
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-out-strong);
  /* tone: felt */
  background: var(--surface-card);
  border: var(--border-hair) solid var(--line-hairline);
  box-shadow: var(--shadow-card);
  color: var(--text-body);
}
.fk-card--ink {
  background: var(--surface-inverse);
  border-color: rgba(243, 237, 221, .1);
}
.fk-card--paper {
  background: var(--surface-paper);
  border-color: var(--line-paper);
  box-shadow: var(--shadow-paper);
  color: var(--text-on-paper);
}
.fk-card--outline {
  background: transparent;
  border-color: var(--line-hairline);
  box-shadow: none;
}
.fk-card--interactive { cursor: pointer; }
.fk-card--interactive:hover {
  border-color: var(--line-gold);
  transform: translateY(-2px);
}

/* --- SectionHeading (core/SectionHeading.jsx) ---------------------------- */
.fk-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.fk-heading__text { text-align: left; flex: 1; }
.fk-heading__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-2);
}
.fk-heading__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--text-strong);
}
.fk-heading__rule {
  height: 3px;
  width: 56px;
  background: var(--action-primary);
  margin-top: var(--space-3);
}

/* --- Icon (core/Icon.jsx) ----------------------------------------------- *
 * The bundle masks Lucide SVGs from a CDN. Ported as inline <svg> so the
 * page carries no third-party runtime dependency; same 1.5px stroke glyphs.  */
.fk-icon {
  display: inline-block;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- TeamCrest (match/TeamCrest.jsx) ------------------------------------ */
.fk-crest {
  --fk-crest-size: 44px;
  width: var(--fk-crest-size);
  height: var(--fk-crest-size);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fk-crest-color, var(--felt-600));
  color: var(--cream-100);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: calc(var(--fk-crest-size) * 0.38);
  letter-spacing: -0.02em;
  border: var(--border-thick) solid var(--gold-500);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}

/* --- MatchCard (match/MatchCard.jsx) ------------------------------------ */
.fk-match {
  --fk-card-padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fk-match__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fk-match__competition {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.fk-match__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}
.fk-match__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.fk-match__team-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  text-transform: uppercase;
  color: var(--text-strong);
}
.fk-match__score {
  font: var(--type-score);
  font-size: var(--fs-h1);
  color: var(--text-strong);
  letter-spacing: var(--tracking-mono);
}
.fk-match__score--live { color: var(--text-accent); }
.fk-match__score-sep { color: var(--text-muted); padding: 0 6px; }
.fk-match__vs {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--text-muted);
}
.fk-match__when {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-caption);
}
.fk-match__when > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- Input (forms/Input.jsx) -------------------------------------------- */
.fk-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}
.fk-input__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.fk-input__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: rgba(8, 33, 26, .55);
  border: var(--border-hair) solid var(--line-hairline);
  box-shadow: none;
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.fk-input__field:focus-within {
  border-color: var(--line-gold);
  box-shadow: var(--ring-focus);
}
.fk-input__control {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: var(--type-body);
  font-size: var(--fs-body-sm);
  color: var(--text-strong);
}
.fk-input--paper .fk-input__label { color: var(--text-on-paper-muted); }
.fk-input--paper .fk-input__field {
  background: var(--surface-paper-raised);
  border-color: var(--line-paper);
}
.fk-input--paper .fk-input__control { color: var(--text-on-paper); }

/* ============================================================================
   Card rarity presets — the RARITY map from PlayerCard.dc.html, lifted to
   custom properties so both the full PlayerCard and the pack's mini cards
   read the same frame / body / ink values.
   ========================================================================= */
.fk-rarity--comum {
  --pc-frame: linear-gradient(160deg, var(--felt-500) 0%, var(--felt-700) 44%, var(--felt-400) 64%, var(--felt-700) 100%);
  --pc-body: linear-gradient(168deg, var(--felt-800) 0%, var(--ink-800) 60%, var(--ink-900) 100%);
  --pc-stage: linear-gradient(180deg, rgba(243, 237, 221, .05), rgba(243, 237, 221, .02));
  --pc-glow: radial-gradient(58% 52% at 58% 42%, rgba(46, 110, 84, .5), rgba(46, 110, 84, .16) 55%, transparent 78%);
  --pc-fade: linear-gradient(180deg, transparent, var(--ink-800) 88%);
  --pc-plate: linear-gradient(180deg, rgba(243, 237, 221, .05), rgba(243, 237, 221, 0));
  --pc-ink: var(--cream-100);
  --pc-muted: rgba(243, 237, 221, .55);
  --pc-hairline: rgba(243, 237, 221, .22);
  --pc-crest: var(--felt-600);
}
.fk-rarity--rara {
  --pc-frame: linear-gradient(160deg, var(--gold-500) 0%, var(--gold-600) 38%, var(--gold-400) 60%, var(--gold-600) 100%);
  --pc-body: linear-gradient(168deg, var(--ink-700) 0%, var(--ink-800) 55%, var(--ink-900) 100%);
  --pc-stage: linear-gradient(180deg, rgba(243, 237, 221, .05), rgba(243, 237, 221, .02));
  --pc-glow: radial-gradient(58% 52% at 58% 42%, rgba(217, 164, 65, .34), rgba(217, 164, 65, .1) 55%, transparent 78%);
  --pc-fade: linear-gradient(180deg, transparent, var(--ink-800) 88%);
  --pc-plate: linear-gradient(180deg, rgba(243, 237, 221, .06), rgba(243, 237, 221, 0));
  --pc-ink: var(--cream-100);
  --pc-muted: rgba(243, 237, 221, .6);
  --pc-hairline: rgba(217, 164, 65, .5);
  --pc-crest: var(--gold-600);
}
.fk-rarity--lendaria {
  --pc-frame: linear-gradient(160deg, var(--gold-400) 0%, var(--gold-500) 32%, var(--cream-200) 50%, var(--gold-500) 68%, var(--gold-600) 100%);
  --pc-body: linear-gradient(168deg, var(--cream-200) 0%, var(--cream-300) 46%, var(--cream-400) 100%);
  --pc-stage: linear-gradient(180deg, rgba(26, 29, 24, .06), rgba(26, 29, 24, .14));
  --pc-glow: radial-gradient(58% 52% at 58% 42%, rgba(217, 164, 65, .42), rgba(217, 164, 65, .12) 55%, transparent 78%);
  --pc-fade: linear-gradient(180deg, transparent, var(--cream-300) 88%);
  --pc-plate: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  --pc-ink: var(--ink-900);
  --pc-muted: rgba(26, 29, 24, .6);
  --pc-hairline: rgba(26, 29, 24, .3);
  --pc-crest: var(--gold-600);
}

/* --- PlayerCard (PlayerCard.dc.html) ------------------------------------- *
 * Needs a rarity class alongside it, e.g. .fk-player.fk-rarity--lendaria     */
.fk-player {
  --pc-shape: polygon(5% 0, 95% 0, 100% 3.5%, 100% 91%, 93% 100%, 7% 100%, 0 91%, 0 3.5%);
  --pc-name-size: 21px;
  position: relative;
  width: 100%;
  aspect-ratio: .72;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
}
.fk-player__frame {
  position: absolute;
  inset: 0;
  clip-path: var(--pc-shape);
  background: var(--pc-frame);
}
.fk-player__body {
  position: absolute;
  inset: 3px;
  clip-path: var(--pc-shape);
  background: var(--pc-body);
  overflow: hidden;
}
.fk-player__stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 23%;
  overflow: hidden;
  background: var(--pc-stage);
}
.fk-player__glow { position: absolute; inset: 0; background: var(--pc-glow); }
.fk-player__watermark {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  opacity: .16;
}
.fk-player__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: var(--pc-fade);
}
.fk-player__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 82%;
  height: 100%;
}
.fk-player__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The design's slot pan was stored past its clamp, so the crop resolves
     flush to the top of the cut-out. `center` restores an un-panned slot. */
  object-position: center top;
}
.fk-player__photo--center img { object-position: center; }
.fk-player__id {
  position: absolute;
  left: 8%;
  top: 7%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.fk-player__rating {
  font: var(--type-score);
  font-size: 46px;
  line-height: .9;
  color: var(--pc-ink);
  letter-spacing: -.02em;
}
.fk-player__position {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pc-ink);
}
.fk-player__rule {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--pc-hairline);
  margin: 4px 0;
}
.fk-player__country {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  color: var(--pc-muted);
}
.fk-player__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 23%;
  padding: 10px 8% 0;
  text-align: center;
  border-top: 1px solid var(--pc-hairline);
  background: var(--pc-plate);
}
.fk-player__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--pc-name-size);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--pc-ink);
  line-height: 1;
}
.fk-player__tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--pc-muted);
}