/* ── Word type colour system ── */
/* masc = red, fem = indigo — all others avoid red & blue families */
:root {
  --c-masc: #C0392B;  /* red — masculine */
  --c-fem:  #5C6BC0;  /* indigo — feminine */
  --c-verb: #B45309;  /* amber — action/energy */
  --c-adj:  #7B3FA0;  /* violet — distinct from indigo */
  --c-pron: #2E7D32;  /* forest green */
  --c-prep: #5C6B00;  /* dark olive */
  --c-num:  #6B5B4E;  /* warm brown-grey */
  --c-adv:  #6B7D2E;  /* warm sage/chartreuse */
}

/* Badge colours */
.badge-masc { background: var(--c-masc); }
.badge-fem  { background: var(--c-fem);  }
.badge-verb { background: var(--c-verb); }
.badge-adj  { background: var(--c-adj);  }
.badge-pron { background: var(--c-pron); }
.badge-prep { background: var(--c-prep); }
.badge-num  { background: var(--c-num);  }
.badge-adv  { background: var(--c-adv);  }

/* ── Background treatments for card fronts ── */

/* Masculine nouns: warm cream with upward flame (triangle) motif */
.bg-masc {
  background-color: #fff7f6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='64' viewBox='0 0 52 64'%3E%3Cpolygon points='26%2C4 46%2C58 6%2C58' fill='%23C0392B' opacity='0.11'/%3E%3Cpolygon points='26%2C20 36%2C50 16%2C50' fill='white' opacity='0.28'/%3E%3C/svg%3E");
  background-size: 52px 64px;
}

/* Feminine nouns: pale lavender with snowflake motif — strokes at ~12% opacity */
.bg-fem {
  background-color: #f5f6ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg stroke='%235C6BC0' stroke-width='2.5' stroke-linecap='round' opacity='0.15'%3E%3Cline x1='36' y1='4' x2='36' y2='68'/%3E%3Cline x1='4' y1='36' x2='68' y2='36'/%3E%3Cline x1='13' y1='13' x2='59' y2='59'/%3E%3Cline x1='59' y1='13' x2='13' y2='59'/%3E%3Cline x1='36' y1='4' x2='28' y2='14'/%3E%3Cline x1='36' y1='4' x2='44' y2='14'/%3E%3Cline x1='36' y1='68' x2='28' y2='58'/%3E%3Cline x1='36' y1='68' x2='44' y2='58'/%3E%3Cline x1='4' y1='36' x2='14' y2='28'/%3E%3Cline x1='4' y1='36' x2='14' y2='44'/%3E%3Cline x1='68' y1='36' x2='58' y2='28'/%3E%3Cline x1='68' y1='36' x2='58' y2='44'/%3E%3Ccircle cx='36' cy='36' r='4' fill='%235C6BC0' stroke='none' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

/* Verbs: warm amber with chevron/motion marks */
.bg-verb {
  background-color: #fdf6e8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='40' viewBox='0 0 48 40'%3E%3Cpolyline points='4%2C24 14%2C14 24%2C24 34%2C14 44%2C24' fill='none' stroke='%23B45309' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.14'/%3E%3C/svg%3E");
  background-size: 48px 40px;
}

/* Adjectives: soft violet with nested diamonds */
.bg-adj {
  background-color: #f5eeff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpolygon points='26%2C8 42%2C26 26%2C44 10%2C26' fill='none' stroke='%237B3FA0' stroke-width='2' opacity='0.12'/%3E%3Cpolygon points='26%2C16 34%2C26 26%2C36 18%2C26' fill='none' stroke='%237B3FA0' stroke-width='1.5' opacity='0.09'/%3E%3C/svg%3E");
  background-size: 52px 52px;
}

/* Pronouns: forest green with concentric rings */
.bg-pron {
  background-color: #eaf5ea;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='8' fill='none' stroke='%232E7D32' stroke-width='2' opacity='0.13'/%3E%3Ccircle cx='30' cy='30' r='18' fill='none' stroke='%232E7D32' stroke-width='1.5' opacity='0.08'/%3E%3Ccircle cx='30' cy='30' r='28' fill='none' stroke='%232E7D32' stroke-width='1' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* Prepositional pronouns: olive with double-arrow motif */
.bg-prep {
  background-color: #f4f7e3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='40' viewBox='0 0 56 40'%3E%3Cline x1='8' y1='20' x2='48' y2='20' stroke='%235C6B00' stroke-width='2' opacity='0.14'/%3E%3Cpolyline points='40%2C12 48%2C20 40%2C28' fill='none' stroke='%235C6B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.14'/%3E%3Cpolyline points='16%2C12 8%2C20 16%2C28' fill='none' stroke='%235C6B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.14'/%3E%3C/svg%3E");
  background-size: 56px 40px;
}

/* Numbers: warm brown-grey with dot grid */
.bg-num {
  background-color: #f2eeeb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='10' cy='10' r='2.5' fill='%236B5B4E' opacity='0.15'/%3E%3Ccircle cx='30' cy='10' r='2.5' fill='%236B5B4E' opacity='0.15'/%3E%3Ccircle cx='20' cy='20' r='2.5' fill='%236B5B4E' opacity='0.15'/%3E%3Ccircle cx='10' cy='30' r='2.5' fill='%236B5B4E' opacity='0.15'/%3E%3Ccircle cx='30' cy='30' r='2.5' fill='%236B5B4E' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* Adverbs: warm sage with diagonal dash marks */
.bg-adv {
  background-color: #f4f6e6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cline x1='4' y1='28' x2='28' y2='4' stroke='%236B7D2E' stroke-width='2' stroke-linecap='round' opacity='0.15'/%3E%3Cline x1='16' y1='40' x2='40' y2='16' stroke='%236B7D2E' stroke-width='2' stroke-linecap='round' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 44px 44px;
}

/* ── Image placeholder tints for card backs ── */
.imgbg-masc { background: linear-gradient(135deg, #fde8e6 0%, #fcc5c0 100%); }
.imgbg-fem  { background: linear-gradient(135deg, #e8eaff 0%, #c5cbf5 100%); }
.imgbg-verb { background: linear-gradient(135deg, #fdf0d0 0%, #f5d898 100%); }
.imgbg-adj  { background: linear-gradient(135deg, #f0e6ff 0%, #d4b0f0 100%); }
.imgbg-pron { background: linear-gradient(135deg, #e6f5e8 0%, #b8dcbe 100%); }
.imgbg-prep { background: linear-gradient(135deg, #edf5d0 0%, #cfe0a0 100%); }
.imgbg-num  { background: linear-gradient(135deg, #ede8e4 0%, #d4c8c0 100%); }
.imgbg-adv  { background: linear-gradient(135deg, #eef3d0 0%, #ccd88a 100%); }