/* Word card — proportional layout via container query units (cqw/cqh).
   Establish a containment context with .word-card (width + aspect-ratio). */

.word-card {
  box-sizing: border-box;
  position: relative;
  width: var(--card-width, 100%);
  aspect-ratio: 9 / 16;
  container-type: size;
  container-name: word-card;
  /* Percentages resolve per-axis against the card box (avoid self-referential cqw corner radii). */
  border-radius: 3.5%;
  overflow: hidden;
  background: #1a1a1a;
  --category-color: #3d78ff;
}

.word-card *,
.word-card *::before,
.word-card *::after {
  box-sizing: border-box;
}

.word-card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Category badge ---------- */

.word-card__badge {
  position: absolute;
  top: 4.7cqh;
  left: 4.7cqw;
  width: 10.5cqw;
  height: 10.5cqw;
  z-index: 2;
}

.word-card__badge-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 126%;
  height: 126%;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--category-color) 35%, transparent);
  filter: blur(1.8cqw);
  pointer-events: none;
}

.word-card__badge-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    var(--category-color),
    color-mix(in srgb, var(--category-color) 70%, transparent)
  );
  border: 0.4cqw solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0.6cqw 1.1cqw rgba(0, 0, 0, 0.3),
    inset 0 0.1cqw rgba(255, 255, 255, 0.12);
}

.word-card__badge-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}

.word-card__badge-icon svg {
  width: 4.7cqw !important;
  height: 4.7cqw !important;
  stroke-width: 2.25px;
}

/* ---------- Word band ---------- */

.word-card__band {
  position: absolute;
  top: 72cqh;
  left: 0;
  right: 0;
  height: 7.25cqh;
  display: flex;
  align-items: center;
  z-index: 3;
  padding-left: 5.9cqw;
  padding-right: 5.9cqw;
  background-color: color-mix(in srgb, var(--category-color) 55%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0.85cqw 1.85cqw rgba(0, 0, 0, 0.35);
}

.word-card__word {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: var(--word-font-size, 14cqw);
  color: #fff;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    0 0.2cqw 0.65cqw rgba(0, 0, 0, 0.55),
    0 0.12cqw 0.35cqw rgba(0, 0, 0, 0.45);
}

/* ---------- Definition ---------- */

.word-card__definition {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(72cqh + 7.25cqh + 1.65cqh);
  margin: 0;
  padding: 0 5.9cqw;
  z-index: 3;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: 4.3cqw;
  line-height: 1.38;
  text-align: center;
  color: #fff;
  text-shadow:
    0 0.15cqw 0.5cqw rgba(0, 0, 0, 0.65),
    0 0.1cqw 0.35cqw rgba(0, 0, 0, 0.45);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* ---------- Footer ---------- */

.word-card__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 4.7cqw 4.7cqh;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4cqw;
  z-index: 4;
  pointer-events: none;
}

.word-card__skill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(12 / 32 * 3.1cqw);
  min-width: 0;
}

.word-card__skill-icon svg {
  width: 3.1cqw !important;
  height: 3.1cqw !important;
  stroke-width: 2.5px;
  color: #fff;
  flex-shrink: 0;
}

.word-card__skill-label {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-weight: 700;
  font-size: 3.1cqw;
  letter-spacing: 0.12em;
  color: #fff;
  white-space: nowrap;
  text-shadow:
    0 0.1cqw 0.38cqw rgba(0, 0, 0, 0.65),
    0 0.06cqw 0.22cqw rgba(0, 0, 0, 0.45);
}

.word-card__edition {
  font-family: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Menlo, Monaco,
    Consolas, monospace;
  font-weight: 400;
  font-size: 3.1cqw;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow:
    0 0.1cqw 0.38cqw rgba(0, 0, 0, 0.65),
    0 0.06cqw 0.22cqw rgba(0, 0, 0, 0.45);
}