/* CodeCrafters – spillerportrætter, flag og trøjefarver (js/vfm-faces.js). Bruges af Virtual Football Manager og
   samlerkortene under Min konto. Farver kun via variabler. */
:root {
  /* portrætter (js/vfm-faces.js): hudtoner, hår, øjne – og flagfarver */
  --face-skin-1: #f6d3b8; --face-skin-2: #eab894; --face-skin-3: #d49a6f; --face-skin-4: #b47a4f; --face-skin-5: #8a5636; --face-skin-6: #5e3a24;
  --face-hair-1: #17120f; --face-hair-2: #3b2619; --face-hair-3: #6b4426; --face-hair-4: #9a6a3c; --face-hair-5: #d9b46a; --face-hair-6: #b5562a; --face-hair-7: #a9a6a1;
  --face-iris-1: #5a3a22; --face-iris-2: #4f7fb8; --face-iris-3: #5f8a4e; --face-eye: #fbfaf7; --face-pupil: #111111;
  --face-shade: rgba(60, 30, 15, .16); --face-light: rgba(255, 255, 255, .13); --face-lip: rgba(150, 60, 55, .38); --face-line: rgba(60, 30, 15, .45);
  --face-collar: #f4f4f4; --face-hl-c: #ffffff; --face-sh-c: #3a1c0c; --face-blush: rgba(210, 90, 80, .1); --face-lash: rgba(25, 15, 10, .85);
  --fl-red: #d0103a; --fl-white: #ffffff; --fl-blue: #0b5aa8; --fl-navy: #13286b; --fl-yellow: #fcd116; --fl-gold: #ffce00; --fl-green: #0a8a3c; --fl-black: #111111;
  --kit-0: #d64545; --kit-1: #2f6fd6; --kit-2: #1f9d55; --kit-3: #e3a21a; --kit-4: #7a3fd1; --kit-5: #e06a1c; --kit-6: #14919b; --kit-7: #3a3a40;
}
/* standardfarve uden klasse (fx et skjold uden klub) – klasserne k0–k7 nedenfor vælger klubbens farve */
:root { --kit: var(--kit-0); }
.k0 { --kit: var(--kit-0); } .k1 { --kit: var(--kit-1); } .k2 { --kit: var(--kit-2); } .k3 { --kit: var(--kit-3); }
.k4 { --kit: var(--kit-4); } .k5 { --kit: var(--kit-5); } .k6 { --kit: var(--kit-6); } .k7 { --kit: var(--kit-7); }
.face { display: block; border-radius: 50%; overflow: hidden; flex: none; }
.face-photo { object-fit: cover; background: var(--hover); }
.face .gb-1 { stop-color: var(--hover); } .face .gb-2 { stop-color: var(--sel); }
.face .gs-hl { stop-color: var(--face-hl-c); stop-opacity: .3; } .face .gs-hl2 { stop-color: var(--face-hl-c); stop-opacity: .22; }
.face .gs-0 { stop-color: var(--face-hl-c); stop-opacity: 0; }
.face .gs-sh { stop-color: var(--face-sh-c); stop-opacity: .38; } .face .gs-sh2 { stop-color: var(--face-sh-c); stop-opacity: .3; }
.face .f-kit { fill: var(--kit); }
.face .f-shade { fill: var(--face-shade); } .face .f-shade2 { fill: var(--face-shade); opacity: 1.4; } .face .f-light { fill: var(--face-light); }
.face .f-light2 { fill: var(--face-light); opacity: .9; } .face .f-blush { fill: var(--face-blush); }
.face .f-collar { fill: var(--face-collar); }
.face .f-eye { fill: var(--face-eye); } .face .f-pupil { fill: var(--face-pupil); } .face .f-glint { fill: var(--face-eye); }
.face .f-lash { fill: none; stroke: var(--face-lash); stroke-width: 1.2; stroke-linecap: round; }
.face .f-mouth, .face .f-line, .face .f-part { fill: none; stroke: var(--face-line); stroke-width: .9; stroke-linecap: round; }
.face .f-line2 { fill: none; stroke: var(--face-line); stroke-width: .6; stroke-linecap: round; opacity: .55; }
.face .f-ear { fill: none; stroke: var(--face-line); stroke-width: .7; opacity: .5; }
.face .f-nostril { fill: var(--face-line); opacity: .6; }
.face .f-lip { fill: var(--face-lip); } .face .f-lipup { fill: var(--face-lip); opacity: 1.6; filter: brightness(.85); }
.face .f-stubble { opacity: .3; } .face .f-beard { opacity: .93; } .face .f-buzz { opacity: .8; } .face .f-shaved { opacity: .16; }
.fs-1 { fill: var(--face-skin-1); } .fs-2 { fill: var(--face-skin-2); } .fs-3 { fill: var(--face-skin-3); }
.fs-4 { fill: var(--face-skin-4); } .fs-5 { fill: var(--face-skin-5); } .fs-6 { fill: var(--face-skin-6); }
.fh-1 { fill: var(--face-hair-1); } .fh-2 { fill: var(--face-hair-2); } .fh-3 { fill: var(--face-hair-3); } .fh-4 { fill: var(--face-hair-4); }
.fh-5 { fill: var(--face-hair-5); } .fh-6 { fill: var(--face-hair-6); } .fh-7 { fill: var(--face-hair-7); }
.fi-1 { fill: var(--face-iris-1); } .fi-2 { fill: var(--face-iris-2); } .fi-3 { fill: var(--face-iris-3); }
.flag { display: inline-block; width: 21px; height: 14px; border-radius: 2px; vertical-align: -2px; flex: none; box-shadow: 0 0 0 1px var(--border); }
.flag .fl-red { fill: var(--fl-red); } .flag .fl-white { fill: var(--fl-white); } .flag .fl-blue { fill: var(--fl-blue); } .flag .fl-navy { fill: var(--fl-navy); }
.flag .fl-yellow { fill: var(--fl-yellow); } .flag .fl-gold { fill: var(--fl-gold); } .flag .fl-green { fill: var(--fl-green); } .flag .fl-black { fill: var(--fl-black); }
.flag .fl-green-line { fill: none; stroke: var(--fl-green); stroke-width: 1; }
.face-silhouette .sil-bg { fill: var(--hover); }
.face-silhouette .sil-fg { fill: var(--muted); opacity: .55; }
.face-own { object-position: 50% 22%; }   /* samlerkortets eget foto: ansigtet i fokus, også i den runde ramme */